WPF页面布局-容器控件

    页面布局：指的是子控件的大小，位置的控制。

          StackPanel：把子元素按横向或纵向的顺序进行排列。窗体缩小控件跟着缩小。其中的一个属性控制横向还是纵向排列-Orientation。

<Window x:Class="页面布局.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="586.604" Width="762.313">
    <Grid>
        <!--Orientation属性控制横向还是纵向排列。Vertical指横向-->
        <StackPanel Orientation="Vertical">
           <Button Content="1"></Button>
            <Button Content="2"></Button>
            <TextBox Text="xiao"></TextBox>
        </StackPanel>
    </Grid>
</Window>

    图示：  

    

         wrapPanel：将各个控件按照行或列的顺序摞列，当长度或高度不够是就会自动调整换列或行。

<Window x:Class="页面布局.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="586.604" Width="762.313">
    <Grid>
        <WrapPanel>
            <Button Content="1" Width="163"></Button>
            <Button Content="2" Width="197"></Button>
            <TextBox Text="xiao" Width="199"></TextBox>
        </WrapPanel>
    </Grid>
</Window>

    图示：

    

        Grid：顾名思义网格，用ColumnDefinitions和RowDefinitions可以设计好多小格，把子控件放在里面。

<Window x:Class="页面布局.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="586.604" Width="762.313">
    <Grid>
        <Grid>
            <!--定义表格的列数，3列-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!--定义表格的行数，3行-->
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <!--往空格里放控件，Grid.Row="1" Grid.Column="1"表示把button按钮放在第二行第二列（从0开始算）-->
            <Button Grid.Row="1" Grid.Column="1"></Button>
        </Grid>
    </Grid>
</Window>

     图示：

     

     对于写前台界面来说，布局很重要。学会布局就相当于教会我们怎样设计前台的架构。