wpf基本布局控件 -- 01

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="wdpf入门学习" Height="450" Width="800">
    <Grid x:Name="___No_Name_asdasdas">
        <!-- 布局选项 二行两列  -->
        <Grid.RowDefinitions>
            <!-- height属性高度 auto 自适应 根据子元素是否可以撑开 或者固定像素 eg：100
            或 比列 2 * 标识是第二行高度的2倍
            width 和 height 类似
            -->
            <RowDefinition  />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- 样式的设置
            Grid.ColumnSpan="2" 占据 2 列的位置
        <Border Background="red" Grid.ColumnSpan="2" Grid.RowSpan="2" />
        给整个页面设置ref背景色
        -->
        <Border Background="red" Grid.ColumnSpan="2" Grid.RowSpan="2" />
        <Border  Grid.Column="1" Grid.Row="0"  Background="yellow"  />
        <Border  Grid.Column="0" Grid.Row="1" Background="pink" />
        <Border Grid.Column="1" Grid.Row="1"  Background="skyblue"  />

        <!-- StackPanel 布局控件 水平或者垂直放置元素
         默认是垂放置元素的 vertical 是默认垂直排列
        Orientation 设置方向  Horizontal 是水平排列
        -->
         <StackPanel Orientation="Horizontal">
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
            <Button Width="100" Height="40" Background="yellow" />
        </StackPanel>
        <!-- WrapPanel 环绕控件 当水平或垂直空间不够会自动换行
        Orientation 默认水平排列 Horization 
        Vertiavl 垂直排列
        -->
        <WrapPanel  Grid.Row="1" Grid.Column="0" Orientation="Vertical">
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
            <Button Width="100" Height="40" />
        </WrapPanel>
        <!-- 
         停靠面板
          最后一个元素默认可以填充{拉伸}剩余所有的空间
        LastChildFill = false 设置不填充
        DockPanel.Dock 设置元素的方向
        
        -->
        <DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="true">
            <Button DockPanel.Dock="Bottom" Width="100" Height="40" Background="hotpink" />
            <Button DockPanel.Dock="top" Width="100" Height="40" Background="hotpink" />
            <Button Width="100" Height="40" Background="hotpink" />
        </DockPanel>
        <!-- 平均布局
        
        -->
        <UniformGrid  Grid.Row="0" Grid.Column="1">
            <Button Width="100" Height="30" />
            <Button Width="100" Height="30" />
            <Button Width="100" Height="30" />
            <Button Width="100" Height="30" />
            <Button Width="100" Height="30" />
            <Button Width="100" Height="30" />
        </UniformGrid>
    </Grid>
</Window>

 实现布局：

 代码：

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="wdpf入门学习" Height="450" Width="800">
    <Grid>
        <!-- 使用两行布局 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>

        <!-- 默认渲染第一行 -->
        <Border  Background="#686cc8" />

        <!-- 第二行使用 2 列布局  -->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions >
                <ColumnDefinition Width="200" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Border  Background="BLUE" />
            <Grid  Grid.Column="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <Border Margin="5" Background="#7378db" />
                <Border Margin="5" Grid.Column="1" Background="#4398cd" />
                <Border Margin="5" Grid.Column="2" Background="#e480d5" />
                <Border Margin="5" Grid.Column="3" Background="#4db5b1" />
                <Border Margin="5"  Grid.Column="4" Background="#e17b7b" />

                <Border  Margin="5" Grid.Row="1" Grid.ColumnSpan="3" Background="red" />
                <Border  Margin="5"  Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Background="yellow" />
                <Border  Margin="5" Grid.Row="2" Grid.ColumnSpan="3" Background="blue" />
                <Border  Margin="5" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2" Background="green" />
            </Grid>
        </Grid>
    </Grid>
</Window>