WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析

Canvas、StackPanel、WrapPanel、DockPanel和Grid是WPF中主要的5种内建面板，这些面板类都位于System.Windows.Controls命名空间下。
主要布局特点简述

Grid 按行列排列内容，如果没有特别说明行列则内容充满容器，多个内容则重叠充满内容
StackPanel 水平或垂直的放置内容元素
WrapPanel 自动换行的方式放置内容元素
DockPanel 按照Top、left、right等方式布局内容元素，最后一个元素充满可利用的容器空间
Canvas 在内容元素中设置附加属性Top、Left，根据Top、Left布局内容元素

WPF内建面板之——Grid
Grid是最通用的面板，它可以让你在一个多行、多列的表中排列子元素，而不依靠包装，提供了许多特性来有效地可能告知行和列。用Grid实现类似于Visual Studio的启动界面：<Grid Background=“LightBlue”
要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和ColumnDefinitions元素，从而定义行数和列数。可以在Grid中使用Row和Column附加属性定位子元素，它们都是以0为基准的整型值。如果没有显式设置任何行或列，Grid将会隐式地加入一个单元格。而如果没有在子元素上显式地设置Grid.Row或者Grid.Column，它们的值将为0. Grid的单元格可以是空的，一个单元格中可以有多个元素，而在单元格中元素是根据它们的Z顺序一个接着一个呈现的。
与Canvas一样，同一个单元格中的子元素不会与其他元素交互布局，信息——它们仅仅是重叠而已。可以使用Grid的两个附加属性来解决这个问题，它们是RowSpan和ColumnSpan。属性默认设置为1，且可以被设置为任何比1大的数字，这样可以让元素跨多行或多列。通过设置某个RowDefinition的Height和某个ColumnDefinition的Width为字符串Auto（区分大小写），就可以实现自动尺寸监控。
Grid的特点
Grid的便利之处在于：
1）Grid本身并不占用任何空间，可以看作是用单元格对父控件空间的划分；
2）各个行定义的高度（或列定义的宽度）可以是成比例的（/n）、按需的（Auto）、固定的，自动响应父控件的Resize；
3）可以合并单元格（Grid.RowSpan / Grid.ColumnSpan）但是，如果整个页面的布局都用Grid的话，可读性会降低。

<Grid Width="200" Height="100" >
<!--定义了两列-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions><!--定义了四行-->
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions><TextBlock Grid.Row="0" Grid.Column="0" TextAlignment="Right" Text="用户名：" Name="UserName"/>
<!--第一行第一列--><TextBlock Grid.Row="1" Grid.Column="0" TextAlignment="Right" Text="密码：" Name="pass"/>
<TextBlock Grid.Row="2" Grid.Column="0" TextAlignment="Right" Text="确认密码：" Name="repass"/>
<Button Grid.Row="3" Grid.ColumnSpan="2" Height="23" Width="100" Content="确认" Click="Button_Click" Name="btn"/>
<!--Grid.ColumnSpan="2":合并单元格-->
<TextBox Name="TxtBoxName" Grid.Row="0" Grid.Column="1" Text="" />
<!--第一行第二列-->
<PasswordBox Name="pass1" Grid.Row="1" Grid.Column="1"/>
<!--密码框-->
<PasswordBox Name="pass2" Grid.Row="2" Grid.Column="1" />
</Grid>

WPF内建面板之——DockPanel
DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。

DockPanel的特点
DockPanel利用在子控件中设定DockPanel.Dock=“Left”/“Top”/“Right”/"Bottom"来指定该子控件的泊靠位置，其布局效果与子控件书写顺序是相关的。例如，三个子控件的书写顺序是1)-DockPanel.Dock=“Left”，2)-DockPanel.Dock=“Right” 3)，布局效果是从左到右1、3、2，1泊靠在左边，3泊靠在右边，而2在中间填满。DockPanel有一个叫做的LastChildFill属性，默认值为真，在该情况下，左右一个书写的子控件的DockPanel.Dock设定是无效的，自动人为是DockPanel.Dock＝“Fill”。

 <DockPanel >2:     <Button Content="ButtonA" Width="70" DockPanel.Dock="Top" />3:     <Button Content="ButtonB" Width="70" HorizontalAlignment="Right" DockPanel.Dock="Top" />4:     <Button Content="ButtonC" Margin="10" DockPanel.Dock="Top" />5:     <Button Content="ButtonD" DockPanel.Dock="Left" />6:     <Button Content="ButtonE" DockPanel.Dock="Right" />7:     <Button Content="ButtonF" DockPanel.Dock="Bottom" />8:     <Button Content="ButtonG" />9: </DockPanel>
DockPanel

WPF内建面板之——WrapPanel
WrapPanel与StackPanel类似，但是除了会对子元素作栈处理外，当没有足够空间来放一个栈时，它还会把子元素封装在行和列中。这对于显示Item的过渡数目十分有用，会产生一个比普通列表更加有趣的布局，很像Windows资源管理器。与StackPanel医院，WrapPanel没有附加属性来控制元素的位置。它定义了3个控制其行为的属性： Orientation——这就像StackPanel中的Ori。
WrapPanel是一个非常简单的面板，
从左至右按顺序位置定位子元素，如果排满断开至下一行。
后续排序按照从上至下或从右至左的顺序进行。
WrapPanel面板也提供了Orientation属性设置排列方式，这跟StatickPanel基本相似。不同的是WrapPanel会根据内容自动换行。

<Window x:Class="WpfTutorialSamples.Panels.WrapPanel"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="WrapPanel" Height="300" Width="300"><WrapPanel><Button>Test button 1</Button><Button>Test button 2</Button><Button>Test button 3</Button><Button Height="40">Test button 4</Button><Button>Test button 5</Button><Button>Test button 6</Button></WrapPanel>
</Window>

WPF内建面板之——StackPanel
StackPanel是一个受欢迎的面板，因为它方便好用，它会顺序对它的子元素进行排列。它是少数几个没有定义任何附加属性的面板之一。由于没有附加属性来排列子元素
StackPanel的功能最简单，只支持将子控件按书写顺序竖排（Orientation=“Vertical” 默认）或者横排（Orientation=“Horizontal”）。

<Window x:Class="WPF.LayoutContainer.Controls.StackPanelLayoutWindow"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  Title="StackPanelLayoutWindow" Height="300" Width="300" Background="LightCyan" >  <StackPanel Margin="10" Background="Yellow">  <StackPanel Margin="5" Background="Pink" Orientation="Horizontal">  <TextBlock Text="text1" Background="White" Margin="5"/>  <TextBlock Text="text2" Background="LightGray" Margin="5"/>  </StackPanel>  <StackPanel Margin="5" Background="Pink" >  <TextBlock Text="text3" Background="White" Margin="5"/>  <TextBlock Text="text4" Background="LightGray" Margin="5"/>  </StackPanel>  </StackPanel>
</Window>

WPF中的5种内建面板之一——Canvas
Canvas是最基本的面板，它仅支持用显式坐标定位元素，它也允许指定相对任何角的坐标，而不仅仅是左上角。可以使用Left、Top、Right、Bottom附加属性在Canvas中定位元素。通过设置Left和Right属性的值表示元素最靠近的那条边，应该与Canvas左边缘或右边缘保持一个固定的距离，设置Top和Bottom的值也是类似的意思。实质上，你在选择每个元素停靠的角时，附加属性的值是作为外边距使用的.

    <Canvas><Button Canvas.Left="152" Canvas.Top="209" Content="Button" Height="23" Name="button1" Width="75" /></Canvas>

WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析相关推荐

python的内建数据结构包括_Python中3种内建数据结构：列表、元组和字典
Python中有3种内建的数据结构:列表.元组和字典.参考简明Python教程 1. 列表 list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目.假想你有一个购物列表,上面 ...
WPF内建面板之——DockPanel详细
WPF内建面板之--DockPanel Canvas.StackPanel.WrapPanel.DockPanel和Grid是WPF中主要的5种内建面板,这些面板类都位于System.Windows. ...
python生成递增序列_Python的6种内建序列之通用操作
数据结构式通过某种方式(例如对元素进行编号)组织在一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在Python中,最基本的数据结构是序列(sequence).序列中的每 ...
全面解析布局(Grid Canvas StackPanel Wrappanel) 转
https://www.cnblogs.com/meimao5211/p/3368207.html 写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高.拿grid和ca ...
运行wpf_在WPF中一种较好的绑定Enums数据方法
引言在你使用wpf应用程序开发的时候,是否需要进行数据绑定到Enum数据呢?在这篇文章中,我将向你展示在WPF中处理Enum数据绑定的方法. 假设存在一个这样的Enum数据的定义,具体内容如下文代码 ...
DevOps中的质量内建实践
点击观看大咖分享什么是质量内建随着时间的推移,我们项目的开发效率会逐渐降低,直到几年之后整个项目可能就无法维护,只能推倒重来.具体的表现首先就是随着时间推移,我们会发现整个需求列表里面能做的需求越 ...
python有几种容器_Python中几种内置的容器（Containers）类型：列表、字典、集合和元组的比较和该注意的点...
之所以称他们为容器类型是因为他们不像基本类型那样只有一种简单类型的数据,而是可以包含其他类型的数据,numpy的计算速度比原生Python快的一个很重要的原因就是numpy中的数组(类似于Python ...
eclipse中在包内建包
Package Explorer下有一个点击View Menu 点击Package Presentation 选中Hierarchical,将视图从平铺模式变成按等级划分右键包,新建包,子包名为父包 ...
了解 WPF 中的路由事件和命令
目录路由事件概述 WPF 元素树事件路由路由事件和组合附加事件路由命令概述操作中的路由命令命令路由定义命令命令插入路由命令的局限避免命令出错超越路由命令路由处理程序示例要想 ...

WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析

WPF中5种内建面板Canvas、StackPanel、WrapPanel、DockPanel、Grid分析相关推荐

最新文章

热门文章