09-表格控件Grid的使用

通过设置RowDefinitions和ColumnDefinitions 可以设置行和列的一个表格

如果想要显示表格线 需要设置Grid的ShowGridLines=True属性

然后里面的控件 通过设置Grid.Row 和Grid.Column来设置它的附加属性的位置。

设置表格格子的宽度和高度

通过设置ColumnDefinition的Width 就可以设置它的宽度

支持auto

或者* 2*等这些倍数的

跨行跨列的问题

和html类似

设置控件的 Grid.ColumnSpan = “2” 表示该控件跨越两列

如果跨行 则是Grid.RowSpan = “2”;

跨行跨列 默认是往下和往右去取的

分隔条的使用

比如我们想要在第一列和第二列直接加一个分隔条

我们在Grid里面加入一个GridSplitter控件 然后让的RowSpan 占所有行

VerticalAlignment设为Stretch 则是顶满全部

并且 设置HorizontalAlignment设为Center

结合控件的minWidth 跨越避免控件因为拖动而看不见

分隔条 只能 往左右两列进行压缩和伸展

我们可以给我们的列 设置一个最小宽度 这样避免压缩没了

<Grid ShowGridLines="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="2*" MinWidth="30"></ColumnDefinition>
        <ColumnDefinition Width="3*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="1" Grid.Column="2" Content="5" Margin="3"/>
    <Button Grid.Row="2" Grid.Column="3" Grid.RowSpan="2" Content="Enter" Margin="3"/>
    <GridSplitter Grid.Column="1" Grid.Row="0" Grid.RowSpan="4" Width="2" Background="#FFF16312" HorizontalAlignment="Center" VerticalAlignment="Stretch"  ></GridSplitter>
</Grid>Code language: HTML, XML (xml)