YottaYuan
YottaYuan

教程10：布局和面板教程

布局和面板教程

教程数据

本教程致力于显示GUI元素如何相对于其容器定位和调整大小。布局是各种设备上应用程序可用性的关键组成部分。我们还将发现NoesisGUI中可用的各种容器。

元素定位

在FrameworkElement的类公开了用于精确定位子元素的几个属性。本主题讨论四个最重要的属性：Horizo​​ntalAlignment，Margin，Padding和VerticalAlignment。了解这些属性的影响很重要，因为它们为控制元素在NoesisGUI中的位置提供了基础。

对准

对齐方式确定子元素如何放置在父元素的分配空间内。换句话说，它确定了提供给元素的空间上的位置。有两种类型的对齐方式：Horizo​​ntalAlignment和VerticalAlignment。

水平对齐

该的Horizo​​ntalAlignment属性声明的水平对齐特征应用到子元素。下表显示了Horizo​​ntalAlignment属性的每个可能值。

会员 描述
剩下 子元素对齐到父元素分配的布局空间的左侧。
中央 子元素与父元素分配的布局空间的中心对齐。
对 子元素与父元素分配的布局空间的中心对齐。
拉伸（默认） 子元素被拉伸以填充父元素分配的布局空间。显式的Width和Height值优先。 

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
 
 <按钮 内容= ”左“ Horizo​​ntalAlignment = ”左“ VerticalAlignment = ”“居中” />
 
 <边框 宽度= “ 100” 高度= “ 100” 边距= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
 <按钮 内容= “居中” Horizo​​ntalAlignment = “居中” VerticalAlignment = “”居中“ />
 
 <边框 宽度= ” 100“ 高度= ” 100“页 边距= ” 5 “ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
 <按钮 内容= ”右“ Horizo​​ntalAlignment = ”右“ VerticalAlignment = ”“居中” />

LayoutPanelTutorialImg1.png

垂直对齐

该VerticalAlignment属性描述适用于子元素的垂直对齐特征。下表显示了VerticalAlignment属性的每个可能值。

会员 描述
最佳 子元素与父元素分配的布局空间的顶部对齐。
中央 子元素与父元素分配的布局空间的中心对齐。
底部 子元素与父元素分配的布局空间的底部对齐。
拉伸（默认） 子元素被拉伸以填充父元素分配的布局空间。显式的Width和Height值优先。 

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
 
 <按钮 内容= ”顶部“ Horizo​​ntalAlignment = ”居中“ VerticalAlignment = ”“顶部” />
 
 <边框 宽度= “ 100” 高度= “ 100” 边距= “ 5” BorderBrush = “黑色” BorderThickness = “ 1” >
 <按钮 内容= “居中” Horizo​​ntalAlignment = “居中” VerticalAlignment = “”居中“ />
 
 <边框 宽度= ” 100“ 高度= ” 100“页 边距= ” 5 “ BorderBrush = ”黑色“ BorderThickness = ” 1“ >
 <按钮 内容= ”底部“ Horizo​​ntalAlignment = ”居中“ VerticalAlignment = ”“底部” />
 
 
 <按钮 内容= “拉伸” Horizo​​ntalAlignment = “中心” VerticalAlignment = “”拉伸“ />

LayoutPanelTutorialImg2.png

余量

边距确定一个控件到放置该控件的单元格边界之间的距离。它可以是统一的，也可以指定其所有边的值。例如，Margin =“ 20”意味着将属性left，top，right和bottom都设置为20。Margin =“ 20,10,0,10”分配左边界为20，顶部边界为10，a右边距为0，底边为10。

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >

LayoutPanelTutorialImg3.png

填充

填充是控件的边框与其内部内容之间的空间。使用此属性，您可以更改任何控件的默认填充。

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
 
 <按钮 内容= ”填充=“ 0,0,0,0＆”;“ 填充= “ 0” />
 
 <边框 宽度= “ 150” BorderThickness = “ 1” >

LayoutPanelTutorialImg4.png

货柜

在NoesisGUI中，内置了将容器和控件组合在一起的界面，这些控件和控件构成了层次结构的可视树。容器有四种：内容容器，项目容器，装饰器和面板。

内容容器

内容控件

保留单个子Content的控件。内容可以是字符串，对象甚至其他UIElement。示例：Button，Label和ToolTip。

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
 
 <按钮 内容= ”按我“ />
 
 <边界 宽度= ” 150“ 高度= ” 50“ 保证金= ” 5“ >
 <按钮 Horizo​​ntalContentAlignment = ”拉伸“ VerticalContentAlignment = ”拉伸“ 填充= ” 15“>
 <矩形 填充= “红色” />
 
 
 <边框 宽度= “ 150” 高度= “ 50”页 边距= “ 5” >
 <标签 内容= “ A标签控件” Horizo​​ntalAlignment = “”居中“ VerticalAlignment = “ Center” />

LayoutPanelTutorialImg5.png

HeaderedContentControl

甲HeaderedContentControl基本相同的ContentControl中但具有报头，其用于呈现所述内容的报头部分。示例：GroupBox，Expander和TabItem。

 方向= “ Horizo​​ntal” Horizo​​ntalAlignment = “ Center” VerticalAlignment = “” Center“ >
 
 
 <矩形 填充= ”红色“ 保证金= ” 10“ />
 
 
 
 
 <矩形 填充= “红色” Width = “ 100” 高度= “ 35” />
 
 
 <边框 宽度= “ 150” 高度= “ 90” 边距= “ 5” >
 
 
 <矩形 填充= “红色” 边距=“ 10” />

LayoutPanelTutorialImg6.png

物品容器

ItemsControl

包含多个Item的控件。示例：ListBox，ListView和TreeView。

 xmlns = “ http://schemas.microsoft.com/winfx/2006/xaml/presentation”
 xmlns：x = “ http://schemas.microsoft.com/winfx/2006/xaml”
 Orientation = “水平” Horizo​​ntalAlignment = “居中” VerticalAlignment = “居中” >