如何使 WPF 窗口响应式

Question

我正在使用 Blend Expression，并且刚刚开始使用 WPF。

我正在尝试制作一个窗口响应式窗口，它可以容纳多个网格，并将根据窗口大小调整大小到最小宽度。

它会像：

到目前为止我的代码：

<Window x:Class="Blend.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" WindowState="Maximized">
    <Grid>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
                    Padding="5" HorizontalAlignment="Left" Margin="20,10,0,0" 
                    VerticalAlignment="Top" Height="211.5" Width="484.5">
    <Grid Background="#FFEDF3F8">

    </Grid>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="523.333,10,16.334,283.5">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="21.333,234,16.334,144">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Border CornerRadius="5" BorderBrush="RoyalBlue" BorderThickness="1" 
        Padding="5" Margin="21.333,372,16.334,31.5">
        <Grid Background="#FFEDF3F8"/>
    </Border>
    <Button Content="Button" HorizontalAlignment="Left" Margin="626.833,478.5,0,0"
     VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="693.166,478.5,0,0" 
    VerticalAlignment="Top" Width="49" Background="#FF00458C"/>
    </Grid>
</Window>

我在这里尝试了两件事：一是

Margin

，另一个是使用“对齐”与

Width

和

Height

。

不确定哪个能解决我的目的，其次它是否会响应屏幕尺寸。

我读到了关于使用 * 的动态网格，但这似乎在这里不起作用。

Answer 1

您没有以正确的方式使用网格。

WPF 网格有一个允许设置列和行的属性。然后，您可以将元素放入网格内并设置它们应该位于哪一行/哪列。

当然，你可以在网格内有网格等等。

然后，您可以使用

Width="2*"

和类似的东西，使列比其他列更大或更小，“响应式”。

下面的代码应该为您提供与您尝试实现的目标“相似”的内容。

<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid Grid.Row="0"
          Grid.Column="0"
          Background="Red" />

    <Grid Grid.Row="0"
          Grid.Column="1"
          Background="Blue" />

    <Grid Grid.Row="1"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Violet" />

    <Grid Grid.Row="2"
          Grid.Column="0"
          Grid.ColumnSpan="2"
          Background="Green" />

    <StackPanel Grid.Row="3"
                Grid.ColumnSpan="2"
                Orientation="Horizontal">
         <Button>OK</Button>
         <Button>Cancel</Button>
    </StackPanel>
</Grid>

您可以使用“*”和

"Auto"

来设置列和行的宽度和高度，“*”始终定义为当前窗口宽度或高度的“百分比”。如果一列带有“*”，另一列带有“2*”，则带有“2*”的列将是仅带有“*”的列的两倍大，这将产生 2/3 1/3 的分隔。

"Auto"

表示它将采用“允许显示柱内部的较小宽度或高度”。

Answer 2

您可以使用多列和多行的用法示例作为引导程序 您可以使用属性 grid.row 或 gird.column 定义新控件。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Content="Button" Grid.Column="1" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
    <Button Content="Button" HorizontalAlignment="Left" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
</Grid>