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)界面运行效果: