2.6 布局的几个重要属性

面板作为一种容器可以放置子元素，并以一定的顺序排列子元素。但是，子元素的大小与实际位置，还与子元素自身的属性设置有关。这些属性有很多种，大致可以分成为以下几种：设置元素大小的属性，如Height、MinHeight、MaxHeight、Width、MinWidth、MaxWidth；设置间距的属性，如Margin与Padding；设置对齐方式的属性，如HorizontalAlignment与VerticalAlignment；设置可视状态的属性，如Visibility与Opacity。

2.6.1 尺寸属性

Height、MinHeight、MaxHeight、Width、MinWidth、MaxWidth这些属性通过设置元素的高度与宽度，确定元素的大小。

• Height。用于设置元素的高度值。
• MinHeight。用于设置元素最小允许的高度值。
• MaxHeight。用于设置元素最大允许的高度值。
• Width。用于设置元素的宽度值。
• MinWidth。用于设置元素最小允许的宽度值。
• MaxWidth。用于设置元素最大允许的宽度值。

元素Height与Width的默认取值为Auto（即不明确设置数值），表示元素内容多大，元素的Height与Width就有多大值（另外，还受面板的影响）。例如，以下代码运行结果如图2-14所示。

XAML代码：ImportantPorperties.xaml

<Grid x：Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Button Content="But" HorizontalAlignment="Left" Margin="57,80,0,0" Name="Button1" VerticalAlignment="Top" />
      <Button Content="Button" HorizontalAlignment="Left" Margin="153,80,0,0" Name="Button2" VerticalAlignment="Top" />
      <TextBlock Height="30" HorizontalAlignment="Left" Margin="153,171,0,0" Name="TextBlock1" Text="A" VerticalAlignment="Top" />
      <Button Content="But" HorizontalAlignment="Left" Margin="315,80,0,0" Name="Button3" VerticalAlignment="Top" MinWidth="120" />
      <Button Content="Button" HorizontalAlignment="Left" Margin="426,80,0,0" Name="Button4" VerticalAlignment="Top" MaxWidth="100"/>
      <TextBlock Height="30" HorizontalAlignment="Left" Margin="421,171,0,0" Name="TextBlock5" Text="B" VerticalAlignment="Top" />
</Grid>

A组中的两个按钮都未显式设置Height与Width的值，因此，按钮的高度与宽度是显示其内容所需的大小值。在B组中，两按钮也未显式设置Height与Width的值，但第一个按钮设置了MinWidth的值，因此，虽然按钮内容实际需要空间并没有那么大，还是按MinWidth的值显示宽度；第二个按钮由于设置了MaxWidth的值，虽然内容所需宽度大于MaxWidth值，但还是限制在MaxWidth值内。如果显式设置了元素Height与Width属性的值，那么Height与Width属性比MinHeight、MaxHeight和MinWidth、MaxWidth具有更高的优先级，且元素大小会以Height与Width值来显示。

2.6.2 Margin与Padding

Margin与Padding是设置元素间距的属性，不同的是Margin用于设置元素外部的间距，即元素与元素之间（或元素与面板之间）的间距；Padding用于设置元素内部的间距，即元素内容与元素边界之间的间距。

一般，使用Margin="20"或Padding="20"等方式，即可以将Margin与Padding属性设置为某一具体的浮点数。但是事实上，Margin与Padding属性的值是一个System.Windows.Thickness类的值，此类表示距离左、上、右、下边界的值。因此，Thickness可以有由1个浮点数、2个浮点数、4个浮点数3种构造方式。如：

• Thickness（10）。表示距离左、上、右、下四边界都为10。
• Thickness（10，20）。表示距离左、右边界为10，距离上、下边界为20。
• Thickness（10，20，5，30）。表示距离左边界为10，上边界为20、右边界为5，下边界为30。

请看以下代码。

XAML代码：MarginAndPadding.xaml

<Grid x：Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
             <Grid.RowDefinitions>
             <RowDefinition Height="*" />
             <RowDefinition Height="*" />
          </Grid.RowDefinitions>
          <Button Name="button1" Grid.Row="0" Grid.Column="1" Background="Blue" Margin="20">Button1</Button>
          <Button Name="button2" Margin="0" Grid.Row="1" Grid.Column="1" Background="Blue" Padding="120,0,10,0">Button2</Button>
</Grid>

在Grid面板中放置了两个Button，其中button1设置Margin="20"，表示与Grid面板4个边界的间距都为20；button2设置Margin="0"和Padding="120,0,0,0"，表示与Grid面板4个边界的间距都为0，在button2内部，内容文字“Button2”距离左边界为120，右边界为10，上、下边界都为0。

代码执行结果，如图2-15所示。

2.6.3 对齐属性

面板给元素提供了存放的空间与放置的方式，但是子元素还可以决定自己在面板空间中的对齐方式。如同Windows Form或Asp.NET网页设计中一样，控件在Form窗口或网页表单中可以设置对齐方式，Silverlight for Windows Phone中的子元素也可以通过设置属性HorizontalAlign ment与VerticalAlignment的值来确定在面板中的对齐方式，还可以通过HorizontalContentAlign ment和VerticalContentAlignment来设置子元素中内容的对齐方式。

HorizontalAlignment表示子元素的水平对齐方式，可以取的值包括Left、Center、Right和Stretch，分别表示在水平方向子元素左对齐、中间对齐、右对齐和两端对齐。

VerticalAlignment表示子元素的垂直对齐方式，可以取的值包括Top、Center、Bottom和Stretch，分别对应顶端对齐、居中对齐、底边对齐和上下两端对齐。

在默认情况下，HorizontalAlignment和VerticalAlignment的值都是Stretch，这使子元素可以使用面板提供的全部空间。如图2-16左图表示的是默认情况，即没有对HorizontalAlignment和VerticalAlignment属性设置值时的状态，右图是对HorizontalAlignment和VerticalAlignment属性设置相应值时的状态。

实现图2-16中右图效果的代码如下。

XAML代码：ImportantPorperties.xaml

<StackPanel Orientation="Vertical" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="20" >
        <Button Name="Button1" HorizontalAlignment="Left">GridPanel</Button>
        <Button Name="Button2" HorizontalAlignment="Center">Stackpanel</Button>
        <Button Name="Button3" HorizontalAlignment="Right">WrapPanel</Button>
        <Button Name="Button4" HorizontalAlignment="Stretch">Canvas</Button>
          <Button Name="Button41">Canvas2</Button>
          <Button Name="Button5">GridNest</Button>
          <Button Name="Button6">ImportantProperties</Button>
</StackPanel>

HorizontalContentAlignment和VerticalContentAlignment的取值与HorizontalAlignment和VerticalAlignment的取值是相同的，对应的含义也相同。

如图2-17所示为对子元素的HorizontalContentAlignment属性设置不同值时呈现的效果。代码如下：

XAML代码：ImportantPorperties.xaml

<StackPanel Orientation="Vertical" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="20" >
        <Button Name="Button1" HorizontalContentAlignment="Left">GridPanel</Button>
        <Button Name="Button2" HorizontalContentAlignment="Center">Stackpanel</Button>
        <Button Name="Button3" HorizontalContentAlignment="Right">WrapPanel</Button>
        <Button Name="Button4" HorizontalContentAlignment="Stretch">Canvas</Button>
          <Button Name="Button41">Canvas2</Button>
          <Button Name="Button5">GridNest</Button>
          <Button Name="Button6">ImportantProperties</Button>
</StackPanel>

从执行结果来看，似乎存在不少问题，例如，按钮Button4将HorizontalContentAlignment设置为Stretch与Button1设置为Left的效果相同。这主要因为在Button中用于呈现文字内容的是TextBlock控件，TextBlock控件本身已被拉伸，但文字内容不会被拉伸。

在程序代码中，使用对齐属性的方法如下：

Me.Button1.HorizontalAlignment=Windows.HorizontalAlignment.Center
Me.Button2.HorizontalContentAlignment=Windows.HorizontalAlignment.Stretch
Me.Button3.VerticalAlignment=Windows.VerticalAlignment.Top
Me.Button4.VerticalContentAlignment=Windows.VerticalAlignment.Bottom

即HorizontalAlignment和HorizontalContentAlignment的取值都是Windows.Horizontal Alignment的枚举值，VerticalAlignment和VerticalContentAlignment的取值都是VerticalAlignment的枚举值。

2.6.4 可视状态属性

可视状态在严格意义上，并不能归到布局中。但是，子元素的显示与否确实在一定程度上可以影响整体页面的效果，如处于中间位置的元素被隐藏时，其他元素可能会占用这些多出来的空间。因此，设置可视状态属性也是页面布局中的内容之一。

子元素的属性中，与可视状态有关的属性包括Visibility与Opacity。

（1）Visibility。用于设置元素是否可视。设置Visibility=Visible或0时，表示元素处于显示状态，设置Visibility=Collapsed或1时，表示元素处于隐藏状态。Visibility的上述取值是Windows.Visi bility类的枚举值。因此，在程序代码中也可以像下面一样使用：

If Me.Button4.Visibility=Windows.Visibility.Collapsed Then
        Me.Button4.Visibility=Windows.Visibility.Visible
Else
        Me.Button4.Visibility=Windows.Visibility.Collapsed
End If

（2）Opacity。用于设置元素的透明度，取值范围为0～1。取值为1时，表示不透明，背景被覆盖，取值为0时，表示透明，元素占据空间但未显示出内容。因此，可以将取值设置在0～1之间，如0.5，实现一种半透明效果，如Windows phoneMango中的系统状态栏和程序栏通常呈半透明状态，一般是通过设置Opacity值实现。

如图2-18所示，由上至下4个按钮的Opacity属性分别被设置为0.3、0.5、0.7和1，按钮逐步从半透明向不透明过渡。