WPF常用的布局面板

概述：本文简要介绍了WPF布局面板的使用以及其相关的属性。

目录

一、面板

二、面板控件的使用

1.StackPanel

2.WrapPanel

3.DockPanel

 4.Canvas

5.Grid

6.VirtualizingStackPanel

---

前言

如果是初次学习WPF，建议先了解一下WPF概述，以便选着合适的章节学习。

---

一、面板

面板控件	含义
StackPanel	在堆叠面板中，子元素允许以水平或垂直方式堆叠。
WrapPanel	基于orientation属性，子元素按照从左到右或从上到下的顺序排列。
DockPanel	以排列相对于彼此的子元素，水平或垂直。Dock属性可以将子元素停靠在顶部，底部，右侧，左侧和中部。
Canvas	画布面板可以使用相对于画布任意一侧（例如左，右，顶部和底部）的坐标来定位子元素。
Grid	网格面板由行和列组成。网格中的子元素可以以表格形式排列。
VirtualizingStackPanel	虚拟化的 StackPanel，可以显示其中一部分的内容，使用此控件则可大幅提高呈现效率。

二、面板控件的使用

1.StackPanel

按照水平线方向或垂直线方向排列子控件。

常用的属性：

属性	含义
Margin	控制内部控件的外边距
HorizontalAlignment	设定控件的竖直对齐方式，如，设置水平对齐为Left、Right或Center
VerticalAlignment	设定控件的水平对齐方式，设置水平对齐为Top、Center、Stretch或Bottom
MinWidth	允许的最小宽度
MinHeight	允许的最小高度
MaxWidth	随控件变化时，允许的最大宽度
MaxHeight	随控件变化时，允许的最大高度

代码如下（示例）：

    <Grid>
        <StackPanel>
            <Button Content="第一个按钮"/>
            <Button Content="第二个按钮"/>
            <Button Content="第三个按钮" />
        </StackPanel>
        <Grid Margin="0,80,0,0">
            <StackPanel x:Name="stanckPanel1" Orientation="Horizontal">
                <Button x:Name="btn1" Content="第一个按钮"/>
                <Button x:Name="btn2" Content="第二个按钮"/>
                <Button x:Name="btn3" Content="第三个按钮" />
            </StackPanel>
        </Grid>
    </Grid>

效果图：

注意：

Margin="10"表示各边距均为10；
Margin="10,20,30,40"表示设定左、上、右、下各边缘分别为10、20、30、40。
HorizontalAlignment属性需要在StackPanel面板设置Orientation="Vertical"的前提下；
VerticalAlignment属性需要在StackPanel面板设置Orientation="Horizontal"的前提下。

2.WrapPanel

WrapPanel 可以让元素水平和垂直方向固定，在空间不足会自动换行。

常用属性：

属性	含义
Orientation	获取或设置一个值，该值指定子内容的排列方向，默认是按水平方向排列
Background	获取或设置用于填充 Brush 的边框之间的区域的 Panel
HorizontalAlignment	获取或设置在父元素中组合此元素时所应用的水平对齐特征
VerticalAlignment	获取或设置在父元素中组合此元素时所应用的垂直对齐特征
Margin	获取或设置元素的外边距
Opacity	透明度

代码如下（示例）：

    <Grid>
        <WrapPanel Margin="10">
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="Orange"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="OrangeRed"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="Orchid"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="Green"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="Yellow"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="YellowGreen"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="LightYellow"/>
            <Border Margin="2" Width="200" Height="200"  BorderThickness="1" Background="Beige"/>
        </WrapPanel>
    </Grid>

效果图：

3.DockPanel

DockPanel可以将内容布局到4个方向Top，Left，Bottom，Right。 

常用属性：

属性	含义
Dock	子元素用4个值Left、Top、Right、Bottom来控制它们的停靠
HorizontalAlignment	获取或设置在父元素中组合此元素时所应用的水平对齐特征
VerticalAlignment	获取或设置在父元素中组合此元素时所应用的垂直对齐特征
Margin	获取或设置元素的外边距
Opacity	透明度
LastChildFill	该值指示 DockPanel 中的最后一个子元素是否拉伸以填充剩余的可用空间，默认填充

代码如下（示例）：

    <Grid>
        <DockPanel LastChildFill="True" Opacity="50">
            <Button DockPanel.Dock="Top" Content="Button Top"/>
            <Button DockPanel.Dock="Left"  Content="ButtonLeft"/>
            <Button DockPanel.Dock="Right" Content="Button Right"/>
            <Button DockPanel.Dock="Bottom" Content="Button Bottom"/>
            <Button DockPanel.Dock="Right" Content="Button Center "/>
            <Button Content="Button Last "/> <!--最后一个填充剩余空间-->
        </DockPanel>
    </Grid>

效果图： 

 4.Canvas

Canvas设置其子控件相对于它的Top, Left, Bottom., Right值来进行定位其子控件 如果坐标区域重合，会产生重叠。

常用属性：

属性	含义
Background	背景
Opacity	透明度
Margin	获取或设置元素的外边距
RenderTransform	获取或设置影响此元素的呈现位置的转换信息
RenderTransformOrigin	获取或设置由 RenderTransform 声明的任何可能呈现转换的中心点，相对于元素的边界

代码如下（示例）：

    <Canvas Height="400" Width="400">
        <Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>
        <Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>
        <Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>
    </Canvas>

效果图： 

5.Grid

Grid常用属性：

属性	含义
Background	Brush对象，背景颜色的设置和获取
Clip	获取或设置用于定义元素内容轮廓的几何图形
IsHitTestVisible	该值声明是否可以返回此元素作为其呈现内容的某些部分的点击测试结果，是否穿透控件
Margin	获取或设置元素的外边距
Opacity	透明度
Style	获取或设置此元素呈现时所使用的样式

关于行列表格设置属性：

属性	含义
RowDefinitionCollection	一个或多个 RowDefinition 元素。每个此类 RowDefinition 都成为表示最终网格布局中的行的占位符。
ColumnDefinitionCollection	一个或多个 ColumnDefinition 元素。每个此类 ColumnDefinition 都将成为表示最终网格布局中的列的占位符。
Grid.RowDefinitions	属性值为RowDefinition标签，每一个RowDefinition标签将该Grid对象分为一行
Grid.ColumnDefinitions	属性值为ColumnDefinition标签，每一个ColumnDefinition标签将该Grid对象分为一列
Grid.ColumnSpan	该控件占几列，或者说是跨多少列
Grid.RowSpan	该控件占几行，或者说是跨几行

代码如下（示例）：

<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="2*" />
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="2*" />
			<RowDefinition Height="1*" />
			<RowDefinition Height="1*" />
		</Grid.RowDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
		<Button Grid.Column="2">Button 3</Button>
		<Button Grid.Row="1">Button 4</Button>
		<Button Grid.Column="1" Grid.Row="1">Button 5</Button>
		<Button Grid.Column="2" Grid.Row="1">Button 6</Button>
		<Button Grid.Row="2">Button 7</Button>
		<Button Grid.Column="1" Grid.Row="2">Button 8</Button>
		<Button Grid.Column="2" Grid.Row="2">Button 9</Button>
	</Grid>

效果图：

 

6.VirtualizingStackPanel

VirtualizingStackPanel是StackPanel的变体，该控件支持对数据绑定的虚拟化，在承载许多子项时，这将大幅提高性能。

代码如下（示例）：

使用 VirtualizingStackPanel来代替ComboBox默认的项目面板StackPanel。

    <Grid>
        <ComboBox x:Name="comboboxFontList1" VerticalAlignment="Top">
            <ComboBox x:Name="comboboxFontList2" VerticalAlignment="Top">
                <ComboBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ComboBox.ItemsPanel>
            </ComboBox>
        </ComboBox>
    </Grid>

效果图：

---