c# - 组件无法正确缩放

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

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