Question

对于我在C＃中的WPF项目，我必须创建一个菜单状态，它应该如下图所示

enter image description here

到目前为止，我已经创建了

enter image description here

此窗口的XAML代码：

<UserControl x:Class="MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">
    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="125"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="400*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>
        <!-- title -->
        <Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
            <Viewbox>
                <TextBlock>Title</TextBlock>
            </Viewbox>
        </Label>
        <!-- menu -->
        <Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="50"/>                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>            
        </Grid>
    </Grid>
</UserControl>

此窗口的问题是此组件（标签和按钮及其内容）无法正确缩放。我想要的是，当我调整窗口大小时，我希望这些组件与窗口成比例。不确定网格布局是否有问题，但如何正确修复此组件的比例。

修改

好的，所以我按照你的指示，我喜欢结果（一切看起来都足够好），

enter image description here

但我有两个更多小问题：

1）对XAML代码进行了新的更改，我的最后一个按钮与窗口的南边界碰撞，这不是我想要的。我想要的是一个空白空间，其大小几乎完全（如果可能）或封闭空间，如标签“标题”和窗口的北边界之间。我通过在末尾<RowDefinition Height="*"/>定义一个新行找到了解决方案。不确定这是否是正确的方法。

2）因此，到目前为止，我理解，1 ，2 *，......乘以当前大小。但是，似乎我仍然觉得我不完全理解它。目前，我在问自己，我现在怎么能改变网格布局中按钮组件的大小（在某些情况下是宽度或高度）？最后，我是否可以直接将大小的属性更改为按钮或通过网格布局？

以下是新窗口的代码。

<UserControl x:Class="TypeRacer_Client.state.MenuState"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="800">
    <Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="3*"/> 
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!-- title -->
        <Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
            <Viewbox>
                <TextBlock>Title</TextBlock>
            </Viewbox>
        </Label>
        <!-- menu -->
        <Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="15"/>
                <RowDefinition Height="*"/>                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>
            <Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
                <Viewbox><TextBlock>State</TextBlock></Viewbox>
            </Button>            
        </Grid>
    </Grid>
</UserControl>

Answer 1

使用星形大小（比率）来调整网格行的大小等。像，2 ，4 *等。这将使行和列保持相同的比例，无论窗口的大小是多少，像这样：

<RowDefinition Height="*" />
<RowDefinition Height="2* />  //this will be 2x the previous row's height

设置按钮的样式以获得一致的宽度/高度/其他属性等。

 <Style TargetType="Button" x:Name="SomeButtonStyle">
   <Setter Property="Width" Value="90" /> 
 </Style>

然后，对于每个按钮，您需要相同的高度/宽度/任何属性：

<Button Style="{StaticResource SomeButtonStyle}" />

这样可以防止您在每个按钮中放置宽度，高度或字体等，并且可以更快地在一个地方更改值，而不是每个按钮。

组件无法正确扩展

1 个答案: