昭通昭阳区城乡建设管理局网站,山东省住房和城乡建设厅网站定额站,网站qq在线状态,图库网站cms布局原则 1、不显式设置元素大小。
2、不使用绝对定位。
元素应该根据容器的内容来进行排列。绝对定位在开发前期会带来一些便捷#xff0c;但扩展性比较差。一旦显示器尺寸或分辨率发生改变#xff0c;界面的显示效果可能会达不到预期的效果。
3、布局容器可以嵌套使用 常…布局原则 1、不显式设置元素大小。
2、不使用绝对定位。
元素应该根据容器的内容来进行排列。绝对定位在开发前期会带来一些便捷但扩展性比较差。一旦显示器尺寸或分辨率发生改变界面的显示效果可能会达不到预期的效果。
3、布局容器可以嵌套使用 常用布局容器 WPF中的布局控件继承自System.Windows.Controls.Panel抽象类。
常用的布局容器如下
Grid网格容器。可以创建不可见的行和列然后通过设置行、列来进行元素排列。这是最灵活也是最常用的容器之一。StackPanel堆栈式面板。 在水平或垂直的堆栈中放置元素。当移除一个元素后后面的元素会自动向前移动以填充空缺WrapPanel 自动换行面板DockPanel 停靠式面板。这个面板可以设置控件停靠的方式类似Winform中的Dock属性Canvas画布。Canvas使用绝对定位来控制元素的位置。动画时会经常用到这个容器 Grid
Grid容器是WPF中最常用的布局容器。创建一个WPF工程后系统会自动添加Grid标签作为顶级容器。
Grid容器通过定义行和列来设置控件的位置 1 !--ShowGridLines属性可以开启行列显示--2 Grid ShowGridLinesTrue3 !--添加行列--4 Grid.RowDefinitions5 RowDefinition/6 RowDefinition/7 /Grid.RowDefinitions8 9 Grid.ColumnDefinitions
10 ColumnDefinition/
11 ColumnDefinition/
12 /Grid.ColumnDefinitions
13
14 Label ContentRow0,Column0/
15 Label ContentRow1,Column1/
16 /Grid 说明
如果没有指定行和列元素会默认放置在Grid的0行0列。 在Grid容器中行和列的尺寸支持三种模式
1、指定尺寸 1 !--指定尺寸--2 Grid Grid.Column1 ShowGridLinesTrue3 Grid.ColumnDefinitions4 ColumnDefinition Width120/5 ColumnDefinition/6 /Grid.ColumnDefinitions7 8 Label Content宽度120/9 Label Content宽度为Grid容器大小 - 120 Grid.Column1/
10 /Grid 这种模式可以指定行和列的高度或宽度。 说明
1、WPF中默认宽高单位是像素(Pixel)完整的写法应该是Width120px但是这个px可以省略。
2、WPF还支持英寸(in)、厘米(cm)、点(pt)等单位这里不做详细介绍。可参阅推荐阅读。
3、这种模式不建议使用因为这种方式是使用设备无关单位准确的设置尺寸。 2、指定比例 1 Grid Grid.Column2 ShowGridLinesTrue3 Grid.RowDefinitions4 RowDefinition Height*/5 RowDefinition Height3*/6 /Grid.RowDefinitions7 8 !--不指定比例会等比拆分行列--9 Grid.ColumnDefinitions
10 ColumnDefinition/
11 ColumnDefinition/
12 /Grid.ColumnDefinitions
13 /Grid 可通过(*)来指定行列所占比例。未使用(*)指定比例的按等比划分。
上面的示例代码中定义了两行两列。
第一行占Grid容器高度的1/4第二行占Grid容器高度的3/4。
在定义列的时候未指定比例所以两列各占Grid容器宽度的1/2 3、自动设置
自动设置就是在指定宽高时使用Auto使用了Auto的行列宽高是根据内部所放置元素来决定。 1 Grid ShowGridLinesTrue
2 Grid.RowDefinitions
3 RowDefinition/
4 RowDefinition/
5 RowDefinition HeightAuto/
6 /Grid.RowDefinitions
7
8 Label Content高度 50 Grid.Row2/
9 /Grid 上面的示例代码中在Grid中定义了三行。
第三行的高度使用了Auto。
如果不在第三行放置任何元素第一行和第二行会各占Grid元素的1/2即 Grid.Height /2
当在第三行放置一个高度为50的元素后第三行有了50的高度。
这个时候前面两行的高度就会发生变化变成 (Grid.Height - 50 ) / 2 说明
1、指定为Auto时可以通过MinHeight来指定最小高度MinHeight来指定最小宽度。
2、在布局时通常会混合使用以上各种模式。
3、可以使用 Grid.UseLayoutRoundingTrue来启用抗锯齿功能。启用后会将容器内所有内容对齐到最近的像素边界。 跨越行和列
在定义行和列以后有时候会需要跨越行来列来进行布局。这个时候可以使用Grid.RowSpan和Grid.ColumnSpan这两个附加属性来进行设置。 1 Grid2 Grid.RowDefinitions3 RowDefinition/4 RowDefinition/5 /Grid.RowDefinitions6 7 Grid.ColumnDefinitions8 ColumnDefinition/9 ColumnDefinition/
10 /Grid.ColumnDefinitions
11
12 Label Namelabel1 Content不跨越列 Grid.Row0 Grid.Column0 HorizontalAlignmentCenter/
13 Label Namelabel2 Content跨越两列 Grid.Row0 Grid.Column0 Grid.ColumnSpan2 HorizontalAlignmentCenter/
14
15 Label Namelabel3 Content不跨越行 Grid.Row0 Grid.Column0 VerticalAlignmentCenter/
16 Label Namelabel4 Content跨越两行 Grid.Row0 Grid.Column0 Grid.RowSpan2 VerticalAlignmentCenter/
17 /Grid 说明
Grid布局技巧
1、根据需要动态变化的内容设置行列宽高来进行布局。 2、针对长度或宽度不固定的区域可以设置宽度为Auto
3、WPF提供了一个GridSplitter类可以动态的调整Grid的行高和列宽 1 Grid2 Grid.RowDefinitions3 RowDefinition/4 RowDefinition Heightauto/5 RowDefinition/6 /Grid.RowDefinitions7 8 Grid.ColumnDefinitions9 ColumnDefinition/
10 ColumnDefinition Widthauto/
11 ColumnDefinition/
12 /Grid.ColumnDefinitions
13
14 Grid Grid.Row0 Grid.Column0 BackgroundGreen/Grid
15 Grid Grid.Row0 Grid.Column2 BackgroundSilver/Grid
16 Grid Grid.Row2 Grid.Column0 BackgroundPink/Grid
17 Grid Grid.Row2 Grid.Column2 BackgroundLightSkyBlue/Grid
18
19 GridSplitter HorizontalAlignmentStretch VerticalAlignmentCenter Grid.Row1 Grid.Column0 Grid.ColumnSpan3 Height2/GridSplitter
20 GridSplitter VerticalAlignmentStretch HorizontalAlignmentCenter Grid.Column1 Grid.Row0 Grid.RowSpan3 Width2/GridSplitter
21 /Grid StackPanel
StackPanel容器的使用比较简单它可以在单行或单列中以堆栈形式放置元素。
使用方法如下 1 !--垂直堆放元素(默认)--
2 StackPanel Grid.Column0
3 Button ContentButton1 Margin10/
4 Button ContentButton2 HorizontalAlignmentLeft/
5 Button ContentButton3 HorizontalAlignmentRight/
6 /StackPanel 1 !--水平堆放元素 --
2 !--需要指定属性 OrientationHorizontal--
3 StackPanel Grid.Column1 OrientationHorizontal
4 Button ContentButton1 Margin10/
5 Button ContentButton2 VerticalAlignmentTop/
6 Button ContentButton3 VerticalAlignmentBottom/
7 /StackPanel 通过FlowDirection属性可以指定元素的浮动方向 1 !--FlowDirection可以指定元素的浮动方向--2 !--LeftToRight是默认值表示元素从左向右浮动--3 StackPanel FlowDirectionLeftToRight4 Button ContentButton1 Width120 Height28 HorizontalAlignmentLeft/5 /StackPanel6 7 !--RightToLeft表示元素从右向左浮动--8 StackPanel FlowDirectionRightToLeft Grid.Row19 Button ContentButton1 Width120 Height28 HorizontalAlignmentLeft/
10 /StackPanel WrapPanel
WrapPanel和StackPanel差不多它采用了流式 布局控件也是一次一行或一列的方式布置。但它与StackPanel又有区别WrapPanel的 控件从左向右或从上往下进行排列排列满了以后再在下一行或下一列排列。
WrapPanel可用于工具栏类似的场景因为控件可以依次排列下去。 1 !--默认水平排列--2 WrapPanel Grid.Row0 Grid.Column03 Button Contentabc/4 Button Contentabc/5 Button Contentabc/6 Button Contentabc/7 Button Contentabc/8 Button Contentabc/9 !--当水平方向排列不下时自动排列到下一行--
10 Button Contentabc/
11 /WrapPanel 1 !--设置为垂直排列--
2 WrapPanel Grid.Row0 Grid.Column1 OrientationVertical
3 Button Contentabc/
4 Button Contentabc/
5 Button Contentabc/
6 !--当垂直方向排列不下时自动排列到下一列--
7 Button Contentabc/
8 /WrapPanel DockPanel
DockPanel是一种停靠式布局容器。通过附加属性DockPanel.Dock设置元素的停靠方向。 当元素被指定为停靠在顶部时元素会占据布局容器的整个宽度高度会根据内容和MinHeight属性而定。当元素被停靠在左边时元素会占据整个布局容器的高度而宽度会根据内容和MinWidth属性而定。 1 DockPanel Grid.Row0 Margin10
2 Button Content左停靠 DockPanel.DockLeft MinWidth80/
3 Button Content右停靠 DockPanel.DockRight/
4 Button Content上停靠 DockPanel.DockTop/
5 Button Content下停靠 DockPanel.DockBottom/
6 /DockPanel 默认情况下DockPanel.LastChildFill属性值为true该属性会设置最后一个元素否占满整个布局容器。如果设置LastChildFill为false可以看到 使用DockPanel容器进行布局时元素的先后顺序影响会很大。在上面的示例中最先放置向左停靠的元素所以【上停靠】这个按钮会占据整个面板的高度其它的元素会放置在它的右边。
如果最先放置向上停靠的元素那这个向上停靠的元素会占据整个面板的宽度其它的元素会放置在它的下面 1 !--可以看到元素的先后顺序对布局会产生很大的影响--
2 DockPanel Grid.Row2 Margin10
3 Button Content左停靠 DockPanel.DockTop MinWidth80/
4 Button Content右停靠 DockPanel.DockRight/
5 Button Content上停靠 DockPanel.DockLeft/
6 Button Content下停靠 DockPanel.DockBottom/
7 /DockPanel 重复上面的过程可以更清楚的看到元素的先后对布局的影响以及DockPanel元素排列的规则 1 DockPanel Grid.Row3 Margin102 Button Content左停靠 DockPanel.DockLeft MinWidth80/3 Button Content右停靠 DockPanel.DockRight/4 Button Content上停靠 DockPanel.DockTop/5 Button Content下停靠 DockPanel.DockBottom/6 Button Content上停靠 DockPanel.DockTop MinWidth80/7 Button Content右停靠 DockPanel.DockRight/8 Button Content左停靠 DockPanel.DockLeft/9 Button Content下停靠 DockPanel.DockBottom/
10 /DockPanel Canvas
Canvas面板画布面板它可以通过使用精确的坐标来放置元素。大多数情况下我们不需要绝对定位来放置元素因为显示器的大小和分辨率有可能会改变。但是如果需要设计绘图相关的界面或需要对元素进行动画时就要用到Canvas面板。
Canvas面板是最轻量级的布局容器因为它不包含任何复杂的布局逻辑。
通过Canvas.Left附加属性设置元素左边和Canvas面板左边的单位数。不指定单位时默认是px。通过Canvas.Top附加属性设置元素上边和Canvas面板上边的单位数。 也可以设置Canvas.Bottom和Canvas.Right附加属性来指定距离面板底部和右边的单位数设置无关单位当将系统DPI指定为96dpi时设置无关单位恰好等于通常使用的像素。 说明
1、不能同时指定Canvas.Left和Canvas.Right只能选择一种指定。
2、不能同时指定Canvas.Top和Canvas.Bottom只能选择一种指定。 在Canvas面板中需要指定元素的大小即指定Width和Height属性的值 。如果未指定元素宽高元素的大小就是刚好能展示其全部内容的大小 1 Canvas2 !--基本使用--3 !--未指定宽高--4 Button ContentCanvas Canvas.Left100 Canvas.Top200/5 Button ContentCanvas Canvas.Left200px Canvas.Top200px/6 Button ContentCanvas Canvas.Left2in Canvas.Top2.5in/7 Button ContentCanvas Canvas.Right100 Canvas.Bottom200/8 9 !--指定宽高 --
10 Button ContentCanvas Canvas.Left50 Canvas.Top100 Width150 Height28/
11 /Canvas 说明
当Canvas面板的大小改变时面板内放置的元素大小不会改变。 元素叠放的顺序Z-Order
如果Canvas面板中有重叠的元素可以通过设置Canvas.ZIndex附加属性来控制层叠方式。
默认每个元素会有默认的ZIndex值0具有更高ZIndex值的元素会始终显示在较低ZIndex值元素的上面。ZIndex值可以为负数 1 !--指定叠放顺序--
2 Button ContentZIndex0 Canvas.Left300 Canvas.Top190/
3 Button ContentZIndex1 Canvas.Left310 Canvas.Top200/
4 Button ContentZIndex2 Canvas.Left290 Canvas.Top200/
5
6 !--ZIndex值都为0的情况下后放置的元素会显示在上面--
7 Button ContentZIndex0-1 Canvas.Left380 Canvas.Top190/
8 Button ContentZIndex0-2 Canvas.Left380 Canvas.Top190/ 推荐阅读
宽高支持的单位
FrameworkElement.Width Property (System.Windows) | Microsoft Learn
WPF控件库示例
https://github.com/Microsoft/WPF-Samples/tree/master/Getting%20Started/ControlsAndLayout 本文示例代码
https://github.com/zhaotianff/DotNetCoreWPF/tree/master/五、WPF中的布局容器
