WPF快速入门3-Grid

Grid 分割行和列

一、调整行和列

实例1：创建2行3列

                效果

              

               代码

               

    <Grid ShowGridLines="True"><!--ShowGridLines是否显示边线-->        <!--两行-->        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <!--三列-->        <Grid.ColumnDefinitions>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition></ColumnDefinition>        </Grid.ColumnDefinitions>    </Grid>

 

实例2：添加元素

           效果：

          

           代码：

         

    <Grid ShowGridLines="True"><!--ShowGridLines是否显示边线-->        <!--两行-->        <!--三列-->        <Button Content="Left Top" Grid.Row="0" Grid.Column="0" Margin="3"/>        <Button Content="Center Top" Grid.Row="0" Grid.Column="1" Margin="3"/>        <Button Content="Right" Grid.Row="1" Grid.Column="2" Margin="3"/>    </Grid>

 

实例3 调整列

        效果

        

       代码

      

        <Grid.ColumnDefinitions>            <ColumnDefinition Width="Auto"></ColumnDefinition>            <ColumnDefinition Width="*"></ColumnDefinition>            <ColumnDefinition Width="2*"></ColumnDefinition> <!--Width="2*" 是第二列的2倍-->        </Grid.ColumnDefinitions>

二、布局舍入

       UseLayoutRounding="True" 边界不模糊

      

    <Grid ShowGridLines="True" UseLayoutRounding="True"><!--ShowGridLines是否显示边线-->    </Grid>

三、跨越行和列

        Grid.ColumnSpan="2" 跨越两列

        效果：

        

         代码：

         

       <Button Content="Right" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>        <!--Grid.Column="1" Grid.ColumnSpan="2" 从第1列开始，跨越2列-->

四、分割窗口

                <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
        <!--VerticalAlignment="Stretch"垂直填满  HorizontalAlignment="Center"水平居中-->

       效果：

       

       代码：

       

    <Grid>        <!--两行-->        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <!--三列-->        <Grid.ColumnDefinitions>            <ColumnDefinition Width="*" MinWidth="50"></ColumnDefinition> <!--MinWidth最小宽度-->            <ColumnDefinition Width="Auto"></ColumnDefinition>            <ColumnDefinition Width="*" MinWidth="50"></ColumnDefinition>            <ColumnDefinition Width="2*"></ColumnDefinition>        </Grid.ColumnDefinitions>                <Button Content="Left Top" Grid.Row="0" Grid.Column="0" Margin="3" Grid.RowSpan="2"/>        <Button Content="Center Top" Grid.Row="0" Grid.Column="2" Margin="3"/>        <Button Content="Right" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"/>        <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>        <!--VerticalAlignment="Stretch"垂直填满  HorizontalAlignment="Center"水平居中-->            </Grid>

 

      
五、共享尺度组

      和其他行和列的尺寸匹配 SharedSizeGroup 

<Grid  Grid.IsSharedSizeScope="True">  
      <Grid.ColumnDefinitions >  
<ColumnDefinition Width="20"   SharedSizeGroup ="mgroup1"/>  
<ColumnDefinition   Width="40"  SharedSizeGroup ="mgroup2"/>  
<ColumnDefinition  Width="20" SharedSizeGroup ="mgroup1"/>  
<ColumnDefinition  Width="40" SharedSizeGroup ="mgroup2"/>  
</Grid.ColumnDefinitions>  
…  
</Grid>