XAML之四布局元素
开发工具:Visual Studio
关键技术:XAML
作者:陈华周
撰写时间:2019年5月28日
DockPanel泊靠式面板
DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。
停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。
在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。
默认情况下,后添加的元素只能使用剩余空间,无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域,可以将DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向。
使用场合:
DockPanel停靠容器,专门负责自适应窗口的布局。
DockPanel泊靠式面板代码:
<!--LastChildFill 最后元素不填充-->
<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Left" Content="按钮左"/>
<Button DockPanel.Dock="Top" Content="按钮上"/>
<Button DockPanel.Dock="Right" Content="按钮右"/>
<Button DockPanel.Dock="Bottom" Content="按钮下"/>
<Button DockPanel.Dock="Left" Content="按钮左"/>
<Button DockPanel.Dock="Top" Content="按钮上"/>
<Button DockPanel.Dock="Right" Content="按钮右"/>
<Button DockPanel.Dock="Bottom" Content="按钮下"/>
StackPanel栈式面板
StackPanel就是将控件按照行或列来顺序排列,但不会换行。
通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。
默认情况下,水平排列时,每个元素都与面板一样高;垂直排列时,每个元素都与面板一样宽。如果包含的元素超过了面板空间,它只会截断多出的内容。
元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性。
特点:
每个元素各占一行或者一列。
使用场合:
同类元素需要紧凑排列(如制作菜单和列表)。
移除其中的元素后能够自动补缺的布局或者动画。
StackPanel栈式面板代码:
<!--Orientation:Horizontal(横排)/Vertical(竖排)-->
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<GroupBox Header="技术分类" Height="Auto">
<StackPanel>
<Button Content=".net技术(16)"/>
<Button Content="编程技术(13)" />
<Button Content="软件设计(3)"/>
<Button Content="Web前端(16)"/>
<Button Content="软件工程(26)"/>
</StackPanel>
</GroupBox>
<GroupBox Header="链接" VerticalAlignment="Stretch">
<StackPanel Orientation="Vertical">
<Button Content="反馈和建议"/>
<Button Content="官方博客"/>
<Button Content="电子期刊"/>
<Button Content="人才服务"/>
<Button Content="博客模板"/>
</StackPanel>
</GroupBox>
<!--HorizontalAlignment水平对齐-->
<!--FlowDirection流向-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" FlowDirection="LeftToRight">
<Button Content="陈华周" Margin="5,0,0,0"/>
<Button Content="我的博客" Margin="5,0,0,0"/>
<Button Content="短消息" Margin="5,0,0,0"/>
<Button Content="设置" Margin="5,0,0,0"/>
<Button Content="退出" Margin="5,0,0,0"/>
</StackPanel>
</StackPanel>
WrapPanel自动折行面板(环绕面板)
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。
Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。
ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。
ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。
WrapPanel自动折行面板(环绕面板)代码:
<!--Orientation:Horizontal(横排)/Vertical(竖排)-->
<WrapPanel Orientation="Vertical">
<Button Width="100" Content="按钮1"/>
<Button Width="100" Content="按钮1"/>
<Button Width="100" Content="按钮1"/>
<Button Width="100" Content="按钮1"/>
<Button Width="100" Content="按钮1"/>
<Button Width="100" Content="按钮1"/>
</WrapPanel>
Canvas画布面板
画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。
使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top和Bottom四个附加属性。
如果Canvas是窗口主元素(即最外层的布局面板是Canvas),用户改变窗口大小时,Canvas也会随之变化,子元素的位置也会随之移动,以保证相对于Canvas的位置属性不变。
Canvas允许子元素的部分或全部超过其边界,默认不会裁剪子元素,同时可以使用负坐标,即溢出的内容会显示在Canvas外面,这是因为默认 ClipToBounds=”False”,因此画布不需要指定大小。如果想复制画布内容,将ClipToBounds设为true即可。
Canvas画布面板代码:
<Canvas ClipToBounds="True">
<TextBox Width="100" BorderBrush="Blue"/>
<TextBox Width="200" BorderBrush="Green" Canvas.Left="100" Canvas.Top="120"/>
<Button Height="30" Width="100" Content="按钮" Canvas.Right="0" Canvas.Bottom="-10"/>
</Canvas>
注意:要说明一点Canvas内的子控件不能使用两个以上的Canvas附加属性,如果同时设置Canvas.Left和Canvas.Right属性,那么后者将会被忽略。
推荐阅读
-
XAML之四布局元素
-
XAML四大原则及五种常见布局
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
高品质的网页设计与技巧之四(元素的组织)
-
Ement常用语法、元素四类属性、布局标签、div+class与 html5语义化标签的优缺点
-
1. 实例演示Ement常用语法 2. 实例演示元素四类属性 3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点
-
Ement常用语法、元素的四类属性、一些常用的布局标签
-
弹性盒子 Flex 布局 之 父元素上的属性
-
flex弹性布局的应用四 之flex属性
-
Ement常用语法、元素四类属性、布局标签实例演示