XAML五个布局元素

1.Grid: 网格。Grid布局可以自定义行和列并通过行列的数量、行高列宽来调整控件的布局。近似Html中的table。

特点：可以定义任意数量的行和列，非常灵活；

行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定，并可以设置最大和最小值；

内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列；

可以设置Children元素的对齐方向

例子：

    <Grid ShowGridLines="True">

        <Grid.RowDefinitions>

            <RowDefinition ></RowDefinition>

            <RowDefinition ></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="50"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Margin="3">1</Button>

        <Button Grid.Row="0" Grid.Column="2" Margin="3">2</Button>

        <Button Grid.Row="1" Grid.Column="0" Margin="3">3</Button>

        <Button Grid.Row="1" Grid.Column="2" Margin="3">4</Button>

        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False">

        </GridSplitter>

</Grid>

 

效果图：

 

2. StackPanel：栈式面板。栈式面板可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。

特点：同类元素排列紧凑，移除一个元素后，后面的元素会自动向前填充空缺

例子：

<StackPanel x:Name="stackpanel" Margin="0" Orientation="Horizontal">

        <Button Content="1"></Button>

        <Button Content="22"></Button>

        <Button Content="333"></Button>

        <Button Content="4444"></Button>

        <Button Content="55555"></Button>

</StackPanel>

 

效果图：

 

3. Canvas：画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form 的布局方式。

特点：依赖纵横坐标，艺术性较强。

例子：

<Canvas>

        <TextBox Width="123" BorderBrush="Blue"></TextBox>

        <TextBox Canvas.Left="150" Canvas.Top="200" Width="200" BorderBrush="Green"></TextBox>

        <Button Height="200" Canvas.Right="10" Canvas.Bottom="30" Content="按钮"></Button>

    </Canvas>

 

效果图：

 

4. DockPanel：泊靠式面板。内部元素可以选择泊靠的方向（上下左右），类似于Winform中设置控件的Dock属性。

特点：内部元素可以选择泊靠的方向

例子：

<DockPanel LastChildFill="False">

        <Button DockPanel.Dock="Left" Content=" 左 "></Button>

        <Button DockPanel.Dock="Top" Content=" 上 "></Button>

        <Button DockPanel.Dock="Right" Content=" 右 "></Button>

        <Button DockPanel.Dock="Bottom" Content="下"></Button>

        <Button  DockPanel.Dock="Top" Content="最后一个按钮不填充剩余空间"></Button>

</DockPanel>

 

效果图：

 

5. WrapPanel：自动折行面板。内部元素在排满一行后能够自动折行，类似于Html中的流式布局。

特点：内部元素在排满一行后能够自动折行

例子：

<WrapPanel Orientation="Vertical">

        <Button Width="100">按钮1</Button>

        <Button Width="100">按钮2</Button>

        <Button Width="100">按钮3</Button>

        <Button Width="100">按钮4</Button>

        <Button Width="100">按钮5</Button>

        <Button Width="100">按钮6</Button>

</WrapPanel>

 

效果图：

当Height="200"

 

当Height="100"