组件无法正确缩放

Question

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

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

此窗口的 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>

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

编辑：

好的，所以我按照您的指示进行操作，我喜欢结果（一切似乎都足够好），

但我还有 两个 小问题：

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}" />

这将防止您在您制作的每个按钮中添加宽度、高度或字体等，并且可以更快地在一个位置更改值，而不是每个按钮。