Xaml中UI布局之Grid

Xaml中的Grid控件相当于Html中的Table标签，用表格的行列来控制布局。

基本定义如下：

 <Grid x:Name="Grid1" Grid.Row="3" Grid.Column="3" Height="300" Margin="12,0,12,0" >//Row，Column属性用来设置Grid几行几列
        <Grid.RowDefinitions>//这个标签用来对Grid的行属性进行设置，可以设置高度等
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="100"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>//设置Grid列属性的样式，
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="150"></ColumnDefinition>
            <ColumnDefinition Width="150"></ColumnDefinition>
        </Grid.ColumnDefinitions>
//设置完毕的grid的行列属性样式之后就可以添加，控件，控件中的Grid.Row和Gird.Column用来设置该控件在Grid位于第几行，第几列
        <Button x:Name="btn1" Content="Button1" Grid.Row="0" Grid.Column="0"></Button>
        <Button x:Name="btn2" Content="Button2" Grid.Row="1" Grid.Column="0"></Button>
        <Button x:Name="btn3" Content="Button3" Grid.Row="2" Grid.Column="1"></Button>
        <Button x:Name="btn4" Content="Button4" Grid.Row="0" Grid.Column="2"></Button>
    </Grid>

<Grid.RowDefinitions>
<Grid.ColumnDefinitions>
在这个两个标签中设置行列的高度和宽度属性有几种方式
1.固定大小：固定大小就是写数字，类似代码，写好固定的width或者height，如果控件大小超过了行列的大小仅仅会显示控件的一部分内容
2.Auto自动大小，行列的大小会随着控件的大小变化而变化
3.比例设置大小，用星号*表示。比如设置第一行高度1*，第二行高度是2*，那么第二列的高度就是第一例的2倍高度。他们会根据整个Grid的高度来按比例分配计算