我正在使用 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
。
不确定哪个能解决我的目的,其次它是否会响应屏幕尺寸。
我读到了关于使用 * 的动态网格,但这似乎在这里不起作用。
您没有以正确的方式使用网格。
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"
表示它将采用“允许显示柱内部的较小宽度或高度”。
您可以使用多列和多行的用法示例作为引导程序 您可以使用属性 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>