如何使WPF窗口具有响应性

Question

如何使WPF窗口具有响应性

wpf

23

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

我试图创建一个响应式窗口，可以容纳多个网格，并根据窗口大小重新调整大小到最小宽度。

它将是这样的：

enter image description here

我目前的代码：

<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的“对齐方式”。

不确定哪种方法能够解决我的问题，其次它是否会根据屏幕大小进行响应。

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

- Arijit Mukherjee

你应该定义你的网格(Grid)的行和列。你是否阅读了在线文档？里面有一个例子。 - Clemens

但是如果我不想这样做，只是定义整个网格怎么办呢？是的，@Clemens，我已经检查过了。 - Arijit Mukherjee

@Clemens，正如您所看到的，我正在将每个网格包含在边框内，然后尝试在边框上设置宽度/高度，否则边框和网格将无法正确显示。 - Arijit Mukherjee

2个回答

0

您可以使用多列和多行，就像Bootstrap的使用示例一样。您可以使用属性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>

- mohammadreza gohari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gimly · Accepted Answer

你没有正确地使用网格。

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”表示它将采用“允许显示列内部内容的较小宽度或高度”。