Xaml 页面布局学习

    对于一开始设计xaml界面的初学者，总是习惯性的拖拽控件进行布局，这样也许方便、简单、快捷，但偶尔会出现一些小错误，

当需要将控件进行很细微的挪动时也比较吃力。

   这里，我个人建议用一些代码将xaml界面划分一下比较好，这样既使界面简单，有条理化，又使界面美观，易于对界面的各个部分

进行操作。

  使用页面布局的两个定义是Grid.ColumnDefinitions和Grid.RowDefinitions。

下面演示一些实例（这些例子是本人在wpf上运行的）：

  <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="100" />
            <RowDefinition Height="40" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
    </Grid>

界面生成的结果：

代码中的 * 表示余下的说有长度，如果有多个 * ，则将剩下的长度等分为多份。

如：

  <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />

        </Grid.RowDefinitions>
    </Grid>

结果：

有了一个好的布局界面，就可以加入一些其它的控件在对应的空间内了：

   <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />

        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red" ></Rectangle>
        <Rectangle Grid.Row="1" Grid.Column="1" Fill="Blue" ></Rectangle>
        <Rectangle Grid.Row="2" Grid.Column="3" Fill="Green"></Rectangle>
        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Chocolate" ></Rectangle>
    </Grid>

结果：

如上面展示的一样，row与column都是从0开始算起的，这一小细节值得注意。

有了一个好的布局界面，对于接下来的控件的位置就更好确定了，也不用担心控件会在自己不小心的情况下变换位置。

这些尤其是对于向用户显示信息的时候尤为重要。