如何使 WPF 窗口响应

How to make a WPF Window responsive

提问by Arijit Mukherjee

I'm using Blend Expression and just started with WPF.

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

I'm trying to make a window responsive window which can accommodate multiple Grids and will be re sized as per the window size to a minimum width.

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

It will be like:

它会像：

My Code So Far:

我的代码到目前为止：

<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>

I have tried two things here: one is Marginand other is using 'Alignments' with Widthand Height.

我在这里尝试了两件事：一是Margin使用 'Alignments'Width和Height。

Not sure which will solve my purpose and secondly will it respond to the screen size or not.

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

I read about dynamic Grid using * but that does not seems to work here.

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

回答by Gimly

You're not using the grid in the correct way.

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

WPF Grids have a property that allows to set columns and rows. Then, you would put elements inside the grid and set in which row/column they should go.

WPF 网格具有允许设置列和行的属性。然后，您将元素放入网格中并设置它们应该放在哪一行/哪一列。

Of course you can have grids inside grid and so on.

当然，您可以在网格内放置网格等等。

You can then play with the Width="2*" and things like that to make columns larger or smaller than other, "responsively".

然后，您可以使用 Width="2*" 和类似的东西来“响应地”使列比其他列更大或更小。

The code below should give you something "similar" to what you try to achieve.

下面的代码应该为您提供与您尝试实现的“相似”的东西。

<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>

You can play with "*" and "Auto" for width and height of the column and rows, "*" is always defined as a "percent" of the current windows' width or height. If you have one column with "*" and another with "2*", the one with "2*" will be twice as big as the one with only "*", which will make a 2/3 1/3 separation.

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

The "Auto" means that it will take "the smaller width or height that allows to show the inside of the column".

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

回答by mohammadreza gohari

you can use multi column and multi row that usage example as bootstrap you can define new control with attribute grid.row or gird.column.

您可以使用多列和多行作为引导程序，您可以使用属性 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>