布局通用属性
所有布局面板都由System.Windows.Controls.Panel抽象类派生。
panel就是所有布局元素的基类,这个抽象类包含三个公共属性:Background、Children、IsItemHost(IsItemHost标志着控件是不是类似TreeView、ListView这样的控件)。
其中:
Background:如果想接收鼠标事件,就必须将属性设置为非空值,(如果想接收鼠标事件,又不希望显示固定颜色的背景,那么只需要将背景色设置为透明即可),一般设置鼠标事件时,系统会自动设置Background的属性值。
IsItemHost:该属性是一个布尔值,如果面板用于显示与ItemsControl控件关联的项(例如,TreeView控件中的节点或列表项),该属性值为true.在大多数情况下,甚至不需要知道列表控件使用后台面板管理它所包含的条目的布局。但如果希望创建自定义的列表,以不同放置子元素(例如,以平铺方式显示图像的ListBox控件),该细节就变得很重要了。
布局容器内的子元素对自身的对齐方式(HorizontalAlignment(水平方向)、VerticalAlignment(垂直方向))、宽度(Width)、高度(Height)、四周间隙(Margin)等有一定的决定权。
布局面板
1 Canvas
画布。通过Top、Left、Right、Bottom四个属性将子元素定位。
实质上,在选择每个控件的停靠角时,附加属性的值是作为外边距使用的。也就是说,如果你将下面的示例中的Canvas的HorizontalAlignment="Left" VerticalAlignment="Top"
语句改成HorizontalAlignment="Right" VerticalAlignment="Bottom"
,TextBox就会在右下角显示(是在窗体外),如图。
代码示例:
<Canvas HorizontalAlignment="Left" VerticalAlignment="Top" >
<TextBox Text="1" />
</Canvas>
运行效果:
实际应用
【例1】设计要求:将5个Button按钮分别放在画布的左上角、右上角、左下角、右下角和中心位置。
代码:
<Canvas>
<Button Content="左上" Canvas.Left="10" Canvas.Top="10"/>
<Button Content="左下" Canvas.Bottom="0" Canvas.Left="0"/>
<Button Content="右上" Canvas.Right="0" Canvas.Top="0"/>
<Button Content="右下" Canvas.Bottom="0" Canvas.Right="0"/>
</Canvas>
运行结果:
由此可以看出:Canvas上的元素附加属性Canvas.Left、Canvas.Top、Canvas.Rightt和Canvas.Bottom来完成内部子元素(此处是Button)的定位。
【例2】设计要求:分别将黄色、粉红色、蓝紫色3个Rectangle放到画布上。(注:使用的是Canvas.ZIndex附加属性)
代码示例:
<Canvas>
<Rectangle Fill="Yellow" Height="60" Width="60" Canvas.Top="10" Canvas.Left="10" Canvas.ZIndex="3"/>
<Rectangle Fill="Pink" Height="60" Width="60" Canvas.Top="40" Canvas.ZIndex="2"/>
<Rectangle Fill="Blue" Height="60" Width="60" Canvas.ZIndex="1"/>
</Canvas>
运行结果:
从运行结果来看,可以得出:Canvas.ZIndex这个属性的本质是谁先显示,Canvas.ZIndex=“1”,那么这个元素会先显示。
专业术语是:Canvas.ZIndex设置重叠深度。
2 DockPanel
停靠面板。让子元素停靠在整个面板的某一条边上,然后拉伸元素以填满全部宽度或高度。
如果将属性LastChileFill设置为默认值(true),则DockPanel中的最后一个元素会填充剩余空间(注意是DockPanel中的元素,而不是DockPanel中的子控件的元素!!!)。
代码示例:
<DockPanel LastChildFill="True" Height="20" VerticalAlignment="Top" >
<TextBlock Text="hello" Height="20" Width="40" />
<TextBlock Text="world" Height="20" Width="40"/>
<TextBlock Text="!" Height="20" Width="40"/>
</DockPanel>
运行结果:
而且需要注意的是:如果设置为true,那么你将不能更改最后一个元素的位置。即他始终都是填充最后剩余的空间。
举例说明:
还是上面的代码,我们只更改DockPanel的子元素(TextBlock)的位置,即DockPanel.Dock的属性值。
<DockPanel LastChildFill="True" Height="20" VerticalAlignment="Top" >
<TextBlock Text="hello" Height="20" Width="40" DockPanel.Dock="Right"/>
<TextBlock Text="world" Height="20" Width="40" DockPanel.Dock="Right"/>
<TextBlock Text="!" Height="20" Width="40" DockPanel.Dock="Right"/>
</DockPanel>
运行效果: