WPF-Grid布局容器

一、Grid行和列

             其中包含行和列的定义，子元素的行列属性设定，跨行跨列的写法、布局舍入。

    <Grid ShowGridLines="True"><!--ShowGridLines可以控制Grid网格线的显示与否-->
        <Grid.ColumnDefinitions><!--通过列和行的定义标签来定义Grid网格中的行和列的数量、宽高长度或比例等属性-->
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!--在子元素中定义该子元素属于哪行哪列 Grid.Column="1" Grid.Row="1"-->
        <Button Grid.Column="1" Grid.Row="1" Width="100" Height="35" Content="按钮"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2" Text="测试" FontSize="60" VerticalAlignment="Center" HorizontalAlignment="Center"/> <!--跨行跨列 Grid.ColumnSpan="2" Grid.RowSpan="2"-->
        <Grid Grid.Row="2" Grid.Column="0" UseLayoutRounding="True"/><!--布局舍入 UseLayoutRounding=true可以消除像素计算问题导致的边界模糊-->
    </Grid>

二、分割窗口 

        GridSplitter 可拖动的分割线，改变分割线两边的宽度或高度。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="5"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="5"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid Background="AliceBlue" Grid.Row="0" Grid.Column="0"/>
        <Grid Background="AntiqueWhite" Grid.Row="2" Grid.Column="0"/>
        <Grid Background="Aqua" Grid.Row="0" Grid.Column="2"/>
        <Grid Background="Aquamarine" Grid.Row="2" Grid.Column="2"/>
        <!--这里注意无论是水平还是垂直分割，HorizontalAlignment都必须为Stretch-->
        <GridSplitter Background="Black" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Width="5" ShowsPreview="True" HorizontalAlignment="Stretch"/>
        <GridSplitter Background="Purple" Grid.Row="1" Grid.Column="0" DragIncrement="10" Grid.ColumnSpan="3" Height="5"  ShowsPreview="False" HorizontalAlignment="Stretch"/>
        <!--ShowsPreview决定了是即时跟随鼠标拖动改变分割状态，还是要在松开鼠标时改变分割状态-->
        <!--DragIncrement设置分割条移动幅度-->
    </Grid>

三、共享尺寸组 

        不同Grid里的某两个列或行，绑定同一个共享尺寸组，可以保持宽高大小一致。

        可以跟随GridSplitter的宽高大小变换效果，但个人不建议这么用，实际使用起来影响拖动分割线效果，猜测可能内部逻辑有默认宽高，导致第二个Grid的拖动卡在一定的范围内。

 <Grid Grid.IsSharedSizeScope="True">
     <Grid.RowDefinitions>
         <RowDefinition/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Grid Grid.Row="0">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" SharedSizeGroup="testGroup"/> <!--SharedSizeGroup设置-->
             <ColumnDefinition Width="5"/>
             <ColumnDefinition MinWidth="100"/>
         </Grid.ColumnDefinitions>
         <Grid Grid.Column="0" Background="AliceBlue"/>
         <GridSplitter Grid.Column="1" Background="Black" HorizontalAlignment="Stretch"/>
         <Grid Grid.Column="2" Background="Aqua"/>
     </Grid>
     <Grid Grid.Row="1">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" SharedSizeGroup="testGroup"/><!--SharedSizeGroup设置-->
             <ColumnDefinition Width="5"/>
             <ColumnDefinition MinWidth="100"/>
         </Grid.ColumnDefinitions>
         <Grid Grid.Column="0" Background="Bisque"/>
         <GridSplitter Grid.Column="1" Background="White" HorizontalAlignment="Stretch"/>
         <Grid Grid.Column="2" Background="BlueViolet"/>
     </Grid>
 </Grid>

四、UniformGrid 

        特殊的布局容器，很少用，不支持预设定行和列的宽高属性，一切均分。