布局和Panel类
一.WPF布局
WPF的Window只能布置一个元素。想放置更多的元素,需要添加一个容器(如Panel类的容器)。
注:
造成这一限制的原因是Window类继承至ContentControl类。
1)原则:
1.不要显式的设定元素的尺寸。元素应该根据内容适当改变尺寸。(例)
2.不要使用屏幕坐标制定元素位置。元素应该根据尺寸,所在的容器信息来调整位置。这使得增加元素的时候具有弹性。
3.相似,相近元素嵌套布局。
4.布局容器的子元素共享可用的空间。
例子(TODO)
2)布局过程
1.测量
询问子元素的尺寸。
2.排列
排列和裁剪。
二.布局容器
所有的布局容器继承至System.WIndows.Controls.Panel抽象类。
1)面板容器分类
2)面板属性
3)布局属性
布局属性是所有空间和面板都有的属性。
注:某些布局容器可以给子元素提供属性。如grid分区后,子元素有Row和Column属性。
三.杂项
1)HorizontalAlignment和VerticalAlignment
他们都有四个值:
Center:居中
Left:居左
Right:居右
Stretch:将此方向铺满。
HorizontalAlignment="Stretch"//水平方向是占满的。下图的Button3和4
注:
这里的StackPanel默认HorizontalAlignment和VerticalAlignment都是Stretch。
Margin
两种用法:
Margin = "5"//所有方向都是5
Margin = "1,2,3,4"//依次设置 左 上 右 下 的边距值。
Border
Border通常用于添加背景和边框,设置圆角,用于装饰。
注:BOrder属于装饰性元素(decorator),继承至System.Windows.COntrols.Decorator类。大多数的装饰元素用于特定的类,如Button的ButtonChrome元素;ListBoxChrome元素。
四.StackPanel
用于紧密的排列元素。不会换行。如下:
其中一些属性简介
五.WrapPanel
用于一行一行的设置元素,一行元素满了就开始新行继续。效果如下:
其中一些属性简介
六.DockPanel(港口面板)
如题,这个面板会让元素贴满某个边。
DockPanel会给予直接子元素DockPanel.Dock属性,来设置停靠的“港口”。
<DockPanel LastChildFill="True">//此属性如名
<Button DockPanel.Dock="Bottom" Content="btn_1"/>
<Button DockPanel.Dock="Left" Content="btn_2"/>
<Button DockPanel.Dock="Top" Content="btn_3"/>
<Button DockPanel.Dock="Right" Content="btn_4"/>
<Button Content="btn_5"/>
</DockPanel>
其中一些属性简介
七.Grid
Grid是属性十分强大的面板。
Grid属性
使用以下代码将Grid分为4个区。每个区都可以当做容器来使用。子元素可以使用索引选择放置的分区。
配合多种Panel使用可以进行复杂的区块构造。
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
//定义完行和列后,就可以像矩阵一样使用元素
<Button Grid.Column="0" Grid.Row="0" Content="btn"/>//使用索引
<Button Grid.Column="1" Grid.Row="0" Content="btn_1"/>
<Button Grid.Column="0" Grid.Row="1" Content="btn_2"/>
<Button Grid.Column="1" Grid.Row="1" Content="btn_3"/>
</Grid>
赋予子元素的属性
定义完行和列后,就可以像矩阵一样使用grid分区了。
Grid.Column="0" Grid.Row="0"//区块索引
//跨行或列的值,最小为1。
Grid.ColumnSpan="1" //在某行里,蔓延多个列
Grid.RowSpan="1"//在某列,蔓延多个行
分隔条
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="100"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition MinWidth="50"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
<Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
<Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
<GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center" ShowsPreview="False"/>
</Grid>
注:分割条在上例中是被放在了一个列中。当然也可以和其他放在控件放在一起,也有分割作用。
尺寸模式
grid的行和列宽有3种尺寸模式:
绝对尺寸:
<ColumnDefinition MinWidth="100"></ColumnDefinition>
自动设置尺寸:使得每行和每列的尺寸刚好够需要。
<ColumnDefinition MinWidth="auto"></ColumnDefinition>
比例设置尺寸:按照比例设置
<ColumnDefinition MinWidth="1*"></ColumnDefinition>
<ColumnDefinition MinWidth="2*"></ColumnDefinition>
其中一些属性简介
<Grid UseLayoutRounding="True"/>//开启舍入,在元素出现反锯齿混合模糊时使用。
<Grid ShowGridLines="True"/>//展示分割线
共享尺寸组
使用如下。
在一个父grid中,放置2个小grid。
父grid设置 属性 IsShareSizeScope = “true”,指以下的grid可以共享尺寸;
第一个grid设置Row时,设置属性ShareSizeGroup = “Row”。
第二个以及后面的可以共享。列的共享也是一样的。
八.Canvas面板
用于在制定的地方放置元素。通常用于制作图表。
通过Canvas.Left,Right,Top,Buttom来设置其具体位置。
z顺序
当元素重叠时,设置z顺序来显示某个想要在前面显示的元素。
设置Canvas.ZIndex为正数,负数,0来排序。数值越大排在越前面。
InkCanvas
InkCanvas具有Top,Left,Buttom,Right等属性,可以用于子元素。但是InkCanvas不是派生至Canvas类,甚至不是派生至Panel,而是FrameworkElement类。
主要目的是用于手写输入。
<InkCanvas x:Name = "inkCanvas" Background="LightYellow" EditingMode="Ink">
<Image x:Name-"Img" Source="office.jpg" InkCanvas.Top="10" InkCanvas.Left="10" Width="400" Height="300"/>
</InkCanvas>