教程10：布局和面板教程

2020-03-14 本文已影响0人 YottaYuan

布局和面板教程

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

元素定位

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

对准

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

水平对齐

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

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

LayoutPanelTutorialImg1.png

垂直对齐

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

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

LayoutPanelTutorialImg2.png

余量

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

LayoutPanelTutorialImg3.png

填充

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

LayoutPanelTutorialImg4.png

货柜

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

内容容器

内容控件

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

LayoutPanelTutorialImg5.png

HeaderedContentControl

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

LayoutPanelTutorialImg6.png

物品容器

ItemsControl

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

LayoutPanelTutorialImg7.png

HeaderedItemsControl

可以容纳许多任意元素作为特定Header内容的容器。示例：MenuItem，ToolBar和TreeViewItem。

LayoutPanelTutorialImg8.png

装饰工

装饰器将效果应用于单个Child元素上或周围。示例：Border，BulletDecorator和Viewbox。

LayoutPanelTutorialImg9.png

视图框

Viewbox提供了一种简单的机制来缩放给定空间内的任意内容。默认情况下，Viewbox会在两个维度上拉伸以填充为其赋予的形状（就像大多数控件一样）。但它也具有Stretch属性，可以控制其单个子对象如何在其范围内缩放。的第二个特性Viewbox控件，StretchDirection，控制您是否只是想用它来缩小内容或扩大的内容（而不是做要么）。

注意

Viewbox是使应用程序独立于分辨率的理想容器

<Viewbox  Grid.Column = “ 0”  Grid.Row = “ 0”  Stretch = “统一” > 
  <Grid> 
    <矩形 填充= “绿色”  /> 
    <Label  Content = “左上”  /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = “ 0”  Grid.Row = “ 2”  Stretch = “ Uniform” > 
  <网格 背景= “黄色” > 
    <标签 内容= “左下” /> 
  </ Grid> 
</ Viewbox>
<Viewbox  Grid.Column = “ 2”  Grid.Row = “ 0”  Stretch =“统一” > 
  <网格 背景= “红色” > 
    <标签 内容= “右上” /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = “ 2”  Grid.Row = “ 2”  Stretch = “统一“ > 
  <网格 背景= ”蓝色“ > 
    <标签 内容= ”右下“ /> 
  </ Grid> 
</ Viewbox> 
<Viewbox  Grid.Column = ” 1“  Grid.Row = ” 1“  Stretch = ” Uniform“> 
  <网格 背景= “白色” > 
    <标签 Content = “ Center” /> 
  </ Grid> 
</ Viewbox>

</ Grid>
</ Page>
</pre>

LayoutPanelTutorialImg15.png

面板

NoesisGUI包含六个主要的内置面板，按复杂性和实用性的升序排列：Canvas，StackPanel，UniformGrid，WrapPanel，DockPanel和Grid。

帆布

画布是一种特殊的布局面板，它使用绝对坐标（即使用x和y坐标）分布元素。在画布中使用时，元素不限于任何元素，它可以与其他控件重叠。呈现顺序取决于XAML中元素的声明方式。可以使用Panel.ZIndex属性更改此序列。

画布不对其元素施加任何限制。因此，必须指定单个元素的宽度和高度。您可以使用附加的属性Canvas.Left或Canvas.Right和Canvas.Top或Canvas.Bottom来指定到父级所选边的距离。

<Grid.Resources>
<LinearGradientBrush x：Key = “ BgBrush” StartPoint = “ 0,0” EndPoint = “ 1,1” >
<GradientStop Offset = “ 0” Color = “＃FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”＃FF69B5FF“ />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition />
</Grid.RowDefinitions>

LayoutPanelTutorialImg10.png

StackPanel

StackPanel是一个容器，其中子元素排列在水平或垂直方向上的一行中。方向由属性Orientation定义，该属性可以采用两个有效值：

垂直：这是默认方向。子项从上到下垂直垂直放置。
水平：在这里，项目从左到右一个接一个地放置。

<Grid.Resources>
<LinearGradientBrush x：Key = “ HorBrush” StartPoint = “ 0,0” EndPoint = “ 1,0” >
<GradientStop Offset = “ 0” Color = “＃FF9BDEFF” />
<GradientStop Offset = “ 1 “ Color = ”＃FF69B5FF“ />
</ LinearGradientBrush>
<LinearGradientBrush x：Key = ” VerBrush“ StartPoint = ” 0,0“ EndPoint = ” 0,1“ >
<GradientStop Offset = ” 0“ Color = ”＃FF9BDEFF“ />
<GradientStop Offset = ” 1“ 颜色=“＃FF69B5FF” />
</ LinearGradientBrush>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ *” />
<ColumnDefinition Width = “ 4” />
<ColumnDefinition Width = “ Auto” />
<ColumnDefinition Width = “ 200” />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition 高度= “自动” />
<RowDefinition 高度= “自动” />
<RowDefinition 高度= “*” />
</Grid.RowDefinitions>
<TextBlock的文本= “水平StackPanels” 的HorizontalAlignment = “中心“ Grid.ColumnSpan = ” 2“ 保证金= ” 0,8,0,0“ />
<StackPanel x：Name = ”“ StackPanel1” Background = “”白色“ 保证金= ” 8,8,8,0“ Grid.Row = “ 1” 方向= “水平” 水平对齐= “中心” d：LayoutOverrides = “ Height” >
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” Background = “” {DynamicResource HorBrush}“ Margin = ” 4“ Padding = ” 0“ Width = ” 40“ Height = “ 80” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 利润= “ 4” 填充= “ 0” 宽度= “ 40” 高度= “ 25” VerticalAlignment = “顶部”/>
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 裕度= “ 4” 填充= “ 0” 宽度= “ 40” 高度= “ 25” />
<边框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 边距= “ 4” 填充= “ 0” 宽度= “ 40” 高度= “ 25” 垂直对齐= “底部” />
<边框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” 利润= “ 4” 填充= “ 0” 宽度= “ 80” />
</ StackPanel>
<StackPanel x：Name = “ StackPanel2” 背景= “白色” 边距= “ 8” Grid.Row = “ 2” 方向= “ Horizontal” HorizontalAlignment = “ Center” >
<Border BorderBrush = “黑色 BorderThickness = “ 1” CornerRadius = “ 8” Background =“ {DynamicResource HorBrush}” 保证金= “ 4” 填充= “ 0” 宽度= “ 40” 高度= “ 80” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}“ 边距= ” 4“ 填充= ” 0“ 宽度= ” 40“ 高度= ” 25“ VerticalAlignment = ”顶部“ />
<Border BorderBrush = ”黑色“ BorderThickness = ”1“ CornerRadius = ” 8“ 背景= ” {DynamicResource HorBrush}“ 保证金= “ 4” 填充= “ 0” 宽度= “ 40” 高度= “ 25” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource HorBrush}” Margin = “ 4“ 填充= ” 0“ 宽度= ” 40“ 高度= ” 25“ VerticalAlignment = ”底部“ />
<Border BorderBrush = ”黑色“ BorderThickness = ” 1“ CornerRadius = ”8“ 背景= ” {DynamicResource HorBrush}“ 利润= ” 4“ 填充= “ 0” 宽度= “ 80” />
</ StackPanel>
<矩形填充= “＃80808080” Grid.RowSpan = “ 3” StrokeThickness = “ 0” Grid.Column = “ 1” />
<TextBlock Text = “垂直StackPanels“ HorizontalAlignment = ” Center“ Grid.ColumnSpan = ” 2“ d：LayoutOverrides = ” GridBox“ Grid.Column = ” 2“页边距= ” 0,8,0,0“ />
<StackPanel x：Name = ”“ StackPanel3 ” 背景= “白色” 边距= “ 8” Grid.Row = “ 1” HorizontalAlignment = “居中” VerticalAlignment = “居中” Grid.Column = “ 2” Grid.RowSpan = “ 2” >
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 边距= “ 4” 填充= “ 0” 宽度= “ 80” 高度= “ 40” />
<Border BorderBrush = “ Black” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 保证金= “ 4” 填充=“ 0” HorizontalAlignment = “左” 宽度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 利润= “ 4” 填充= “ 0” HorizontalAlignment = “ Center” 宽度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “8“ 背景= ” {DynamicResource VerBrush}“ 保证金= ” 4“ 填充= “ 0” HorizontalAlignment = “右” 宽度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” Margin = “ 4“ 填充= ” 0“ 高度= ” 80“ />
</ StackPanel>
<StackPanel x：Name = ” StackPanel4“ 背景= ”白色“ 边距= ” 0,8,8,8“ Grid.Row = ” 1 VerticalAlignment = “居中” Grid.Column = “ 3” d：LayoutOverrides = “ GridBox” Grid.RowSpan = “ 2” >
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 利润= “ 4” 宽度= “ 80” 高度= “ 40” />
<边框 BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 边距= “ 4” HorizontalAlignment = “左“ 宽度= ” 25“ 高度= ” 40“ />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 边距= “ 4” HorizontalAlignment = “ Center” 宽度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 边距= “ 4” HorizontalAlignment = “右” 宽度= “ 25” 高度= “ 40” />
<Border BorderBrush = “黑色” BorderThickness = “ 1” CornerRadius = “ 8” 背景= “ {DynamicResource VerBrush}” 边距= “ 4” 高度= “ 80” />
</ StackPanel>
</ Grid>
</pre>

LayoutPanelTutorialImg11.png

统一网格

UniformGrid控件提供的布局与Grid布局控件提供的布局相似。它的子控件组织成行和列的表格结构。与Grid控件不同，您没有对布局的细粒度控制。列宽和行高不能修改。这些大小会自动设置，以确保所有列具有相同的宽度，所有行具有相同的高度。此外，在Grid控件允许您为每个子项指定单元格位置的情况下，UniformGrid则不允许。

</ Grid>
</pre>

LayoutPanelTutorialImg110.png

包装面板

WrapPanel几乎类似于StackPanel，但是当它到达面板的边缘时会产生新的一行。因此，如果您调整WrapPanel的大小，内容将自动换行到新行。因此，WrapPanel具有额外的灵活性，可以在空间很重要时包装元素。

另一个区别是WrapPanel根据内容的大小确定大小，而不是像StackPanel那样将其视为无穷大。您还可以使用属性ItemWidth和ItemHeight指定WrapPanel为每个子元素保留的布局分区的大小。这些属性优先于元素自身的宽度和高度。

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “ 250” />
<ColumnDefinition Width = “ 4” />
<ColumnDefinition Width = “ Auto” />
<ColumnDefinition Width = “ 170” />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition Height = “ 75” />
<RowDefinition Height = “ 170” />
<RowDefinition Height = “ Auto” />
</Grid.RowDefinitions>

LayoutPanelTutorialImg12.png

码头面板

DockPanel是用于确定应用程序布局的最广泛使用的控件。它使用附加的属性DockPanel.Dock来确定每个包含的元素的位置。有效值为Top，Bottom，Left和Right。

如果未指定包含元素的高度或宽度，它将占用整个可用区域。

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition />
<RowDefinition Height = “ Auto” />
</Grid.RowDefinitions>

LayoutPanelTutorialImg13.png

如图所示，需要在每个单独的元素上明确提及Dock属性。声明顺序也起着至关重要的作用。如果将连续两个元素的停靠设置为“顶部”，则意味着这些元素将垂直堆叠。

名为LastChildFill的属性可将剩余空间填充到最后一个元素中。如果不需要，可以将其设置为false。

格网

网格是功能最强大的面板之一。它可以用来形成一个填充可用空间的表。您可以使用属性RowDefinitions和ColumnDefinitions定义网格的行和列。大小的小区的属性高度和宽度的RowDefinition和ColumnDefinition分别被使用。有效值为：

自动：大小由放置在表格单元格中的元素确定。
星号：使用星号时，表示将使用比率进行测量。“ 2 *”表示“ 1 *”的两倍。因此，如果要以2：1的比例制作两列，则将宽度分别设置为“ 2 *”和“ 1 *”。默认值为“ 1 *”。
绝对：您还可以指定像素的高度和宽度的绝对值。

可以使用行的MinHeight / MaxHeight和列的MinWidth / MaxWidth来限制像元大小。这些属性仅允许使用绝对值。

要将元素放在表格单元格中，请使用附加的属性Grid.Row和Grid.Column。元素还可以分别使用附加的属性Grid.RowSpan和Grid.ColSpan跨越行和列的总数。

<Grid.ColumnDefinitions>
<ColumnDefinition Width = “自动” />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
<RowDefinition Height = “ Auto” />
<RowDefinition Height = “ Auto” />
<RowDefinition />
</Grid.RowDefinitions>

LayoutPanelTutorialImg14.png