WPF主要的6个布局分别是什么

WPF主要的6个布局分别是什么

---

开发工具与关键技术：PLSQL Developer + DML
作者：琉敏
撰写时间：2019年5月1日

---

什么是WPF？

WPF（Windows Presentation Foundation）是微软推出的基于Windows 的用户界面框架，属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。

WPF的6个布局分别是哪6个？

WPF中主要的6个布局分别是： StackPanel(栈式面板)、WrapPanel（环绕面板）。DockPanel（停靠面板）、Canvas（画布）、Grid（网格面板）和UniformGrid(均布网格)。
1、 StackPanel：栈式面板
栈式面板的特点是：每一个元素都是占满一行或一列，占满一行或一列主要是由属性（Orientation）决定的，当属性（Orientation）是Vertical时，它是垂直占满一行的（图a）；当属性（Orientation）是Horizontal时，它是水平占满一列的（图b）。
（1）使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
		Title="StackPanel面板" Height="220" Width="400" WindowStartupLocation="CenterScreen">    
	//<!--stackpanel面板：栈式面板-->        
	<StackPanel x:Name="stackpanel" Orientation="Vertical">
		<Button Content="第一个栈式面板"></Button>
		<Button Content="第二个栈式面板"></Button>
		<Button Content="第三个栈式面板"></Button>
	</StackPanel>
</Window>

（2）垂直方向排列界面运行效果:

2、 WrapPanel：环绕面板
环绕面板的特点是：将各个控件从左至右按照行或列的顺序罗列，当剩余空间不够时会自动换行或换列。主要是由属性（Orientation）决定的，当属性（Orientation）是Vertical时，它是垂直方向从左到右排列的（图c）；当属性（Orientation）是Horizontal时，它是水平方向从左到右排列的（图d）。
（1） 使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="WrapPanel面板" Height="220" Width="430" WindowStartupLocation="CenterScreen">
        //<!--wrappanel：环绕面板-->
    <WrapPanel x:Name="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>
            <Button Width="100">按钮7</Button>
            <Button Width="100">按钮8</Button>
            <Button Width="100">按钮9</Button>
            <Button Width="100">按钮10</Button>
    </WrapPanel>
</Window>

（2） 垂直方向排列界面运行效果:

3、 DockPanel:停靠面板
DockPanel定义一个区域，在此区域中，可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。停靠面板会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。默认情况下，最后一个子元素不管是设置了什么停靠值，都会填满剩余的空间；如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。
（1）使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="DockPanel面板" Height="220" Width="430" WindowStartupLocation="CenterScreen">
        //<!--dockpanel:停靠面板-->
    <DockPanel LastChildFill="False">
        <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
        <Button DockPanel.Dock="Bottom" Content="BottonBottom"></Button>
        <Button DockPanel.Dock="Left" Content="BottonLeft"></Button>
        <Button DockPanel.Dock="Right" Content="BottonRight"></Button>
        <Button DockPanel.Dock="Top" Content="最后一个bottom不填充剩空间"></Button>
    </DockPanel>
</Window>

（2）界面运行效果：

4、Canvas：画布面板
画布面板，用于完全控制每个元素的精确位置，是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。使用Canvas，要指定一个子元素的位置（用Left、Right、Top和Bottom相对于画布调整位置），否则所有元素都会出现在画布的左上角。Canvas面板不会对超出的部分不会进行裁剪（图1），如果要裁剪超出部分（图2），将ClipToBounds属性设为true即可。
（1）使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="Canvas面板" Height="220" Width="450" WindowStartupLocation="CenterScreen">    
    //<!--canvas：画布面板-->
    <Canvas ClipToBounds="True">
        <TextBox Canvas.Left="20" Canvas.Top="10" Width="180" BorderBrush="Black"></TextBox>
        <TextBox Canvas.Left="300" Canvas.Top="60" Width="120" BorderBrush="Red"></TextBox>
        <Button Height="80" Canvas.Right="70" Canvas.Bottom="-25" Content="按钮1"></Button>
        <Button Height="20" Canvas.Right="20" Canvas.Bottom="50" Content="按钮2"></Button>
    </Canvas>
</Window>

（2）界面运行效果：

5、Grid:网格面板
Grid面板是以表格形式布局元素，和其他各个Panel比较起来，功能最多也最为复杂。如果要使用Grid面板，就先要向属性RowDefinitions和属性ColumnDefinitions添加一定数量的RowDefinition和ColumnDefinition元素来定义行数和列数。Grid面板可以往定义好的单元格中添加Botton等其他控件内容。在往Grid中添加内容时要设置其放置的位置，否则就会叠加起来。设置其列宽和行高，分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。
注意：尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。
（1）使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="Grid网格面板" Height="250" Width="480" WindowStartupLocation="CenterScreen">
    <Grid ShowGridLines="True">
        //<!--定义行，3行-->
        <Grid.RowDefinitions>
            //<!--自动行高-->
            <RowDefinition Height="Auto"></RowDefinition>
            //<!--按比例行高-->
            <RowDefinition Height="*"></RowDefinition>
            //<!--固定行高-->
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        //<!--定义列，2行-->
        <Grid.ColumnDefinitions>
            //<!--按比例列宽-->
            <ColumnDefinition Width="*"></ColumnDefinition>
            //<!--固定列宽-->
            <ColumnDefinition Width="220"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        //<!--指定元素并指定单元格-->
        <TextBlock Grid.Row="0" Grid.Column="1">第一行第一列</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1">第二行第一列</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">第三行第一列</TextBlock>
        <Button Grid.Row="0" Grid.Column="0">第一行第二列</Button>
        <Button Grid.Row="1" Grid.Column="0">第二行第二列</Button>
        <Button Grid.Row="2" Grid.Column="0">第三行第二列</Button>
    </Grid>
</Window>

（2）界面运行效果: