WPF快速入门3-Grid

Grid 分割行和列

实例：效果



代码：

<Window xmlns:my="clr-namespace:AutomaticConfigurationAPP" x:Class="AutomaticConfigurationAPP.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="留言板" Height="200" Width="400"
MinHeight="200" MinWidth="340" MaxHeight="400" MaxWidth="600">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<!--Width="Auto" 宽度由内容决定-->
<ColumnDefinition Width="Auto"/>
<!--Width="*" 分配剩余宽度-->
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="4"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="4"/>
<RowDefinition Height="*"/>
<RowDefinition Height="4"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<TextBlock Text="请选择您的部门并留言：" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center"/>
<ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/> <!--Grid.ColumnSpan="4" 跨4列-->
<TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
<Button Content="提交" Grid.Column="2" Grid.Row="4"/>
<Button Content="清除" Grid.Column="4" Grid.Row="4"/>
</Grid>
</Window>

一、调整行和列

实例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>