如何使WPF窗口具有响应性

我使用的是混合表达式，刚开始使用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>

我在这里尝试了两种方法：一种是

边距

，另一种是使用

宽度

和

高度

的“对齐”

不确定哪一个会解决我的目的，其次它是否会响应屏幕大小

---

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

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

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>

好啊
取消

您可以使用“*”和“自动”来显示列和行的宽度和高度，“*”始终定义为当前窗口宽度或高度的“百分比”。如果有一列带有“*”和另一列带有“2*”，则带有“2*”的列将是只有“*”的列的两倍大，这将形成2/3 1/3的分隔

---

“自动”意味着它将采用“允许显示列内部的较小宽度或高度”。

您可以使用多列和多行作为引导示例 可以使用属性grid.row或grid.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>

您应该定义网格的列和行。你看过报纸了吗？有一个例子，但如果我不想这样做，n只是定义整个网格呢？是的@Clemens，我检查过了。@Clemens，正如你所看到的，我将每个网格都包含在一个边框内，然后尝试设置该边框的宽度/高度，否则无法正确查看该边框和网格。它是否也会响应？如果响应意味着它将根据窗口大小重新排列，那么是的。这是使网格具有这种行为的正确方法。此外，尽量不要在XAML中放置太多与项目外观相关的内容。它有点像HTML和CSS，您可以创建样式并将这些样式应用于元素。是否有任何方法可以避免每次都编写这种样式

Grid.Row=“0”和Grid.Column=“0”不是必需的，因为这是默认值，所以如果您不设置它们，它会将项目放在第一列第一行（但我喜欢添加它们，因为它会直接向您提供项目所在位置的信息）。背景我在示例中添加这些网格只是为了查看网格的位置，因此您可以将其删除。关于样式，请查看此（第一个谷歌结果…）网页：