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>