WPF-Grid使用
程序员文章站
2024-02-16 12:21:58
...
Grid设置行和列
Grid.RowDefinitions
Grid.RowDefinitions用于设置行数量,在<Grid.RowDefinitions></Grid.RowDefinitions>
的标签中添加 <RowDefinition></RowDefinition>
元素,有几个<RowDefinition></RowDefinition>
元素表示有几行。
例如两行
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
Grid.ColumnDefinitions
Grid.ColumnDefinitions用于设置列数量,在<Grid.ColumnDefinitions></Grid.ColumnDefinitions>
的标签中添加 <ColumnDefinition></ColumnDefinition>
元素,有几个<ColumnDefinition></ColumnDefinition>
元素表示有几列。
例如三列
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
完整两行三列代码
ShowGridLines=”True”用于设置程序运行后显示网格线,在测试环境中使用
<Window x:Class="combination.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="396" Width="502">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</Window>
设置元素在Grid中的位置
使用Grid.Row和Grid.Column的数值设定第几行第几列, Grid.Row=”0” Grid.Column=”0”表示第0行第0列。如图代码展示出的按钮位置。
<Window x:Class="combination.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="396" Width="502">
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Button" Grid.Row="0" Grid.Column="0" />
<Button Content="Button" Grid.Row="0" Grid.Column="1"/>
<Button Content="Button" Grid.Row="1" Grid.Column="2"/>
</Grid>
</Window>
调整Grid行列的尺寸
1.设置绝对尺寸Width和Height
2.设置自动尺寸,满足容器大小
3.比例设置尺寸。
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
UseLayoutRounding 抗锯齿,处理Grid分配后不为整数的情形Grid.ColumnSpan和Grid.RowSpan设置元素跨行或者跨列
分割线GridSplitter
代码使用GridSplitter属性后的效果如下
<Window x:Class="combination.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="396" Width="502">
<Grid >
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="Auto" ></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="4*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Content="Button" Grid.Row="0" Grid.Column="0" />
<Button Content="Button" Grid.Row="0" Grid.Column="2"/>
<Button Content="Button" Grid.Row="1" Grid.Column="3"/>
<GridSplitter Grid.Column="1" Width="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
</Grid>
</Window>