Silverlight学习笔记(3)：Silverlight的界面布局

在上一篇中讲述了使用VS2010开发Silverlight的一些基础知识，并且讲述了Silverlight的部署和代码安全知识，这一篇主要是讲述如何在Silverlight中摆放界面元素。
记得早年前我还在学习Java的时候，当时有两种开发Java SE的方法，一种是使用JCreator或者JBuilder之类的IDE开发（现在这二者都几乎没人用了，流行的是Eclipse或者NetBeans）；一种是使用Visual J++开发。使用前一种方法开发的Java程序可以多种操作系统平台上运行，不过界面布局比较麻烦，什么CardLayout、FlowLayout、BorderLayout、GridBagLayout、GridLayout等等，开发一个复杂的界面需要开发人员对各种布局类都有所了解；使用Visual J++开发的话可以使用XY坐标来定位元素，相对来说容易多了，不过这种开发的Java软件并不是严格意义上的Java软件，它只能在Windows平台上运行。Java从出现到现在，在Java EE和Java ME上都相对比较成功，而唯独在Java SE上表现不佳，不知道跟它难以使用的界面布局有关系。
布局概述
在上一篇提到了XAML语言，它适用于在WPF和Silverlight中进行界面布局的标记语言，它是一种有特定要求的XML语言，从某种意义上来说，我觉得它和XHTML走得更近一些：首先它们都是有特定格式的XML语言，其次它们都是用于界面布局。除此之外，在XAML语言中还有一个特点，那就是每一个元素都代表着一个Silverlight中的类，并且在XAML中只能有一个顶级元素。因此在进行WPF和Silverlight开发时不能绕开的一个问题就是界面布局，在Silverlight中常见的界面布局类有Canvas、Grid和StackPanel。
Canvas、Grid和StackPanel其实都是继承自System.Windows.Controls.Panel的类，它们的继承层次关系如下图：
 
Panel类有如下比较常见的属性：
Background：用于填充 Panel 的边框之间的区域的 Brush。
Children：此 Panel 的子元素的 UIElementCollection。
Height：元素的建议高度。
HorizontalAlignment：在父元素（如面板或项控件）中构成此元素时应用于此元素的水平对齐特征。
MaxHeight：元素的最大高度约束，MaxHeight的默认值是PositiveInfinity（正无穷大）。 
MaxWidth：元素的最大宽度约束，MaxWidth的默认值是PositiveInfinity（正无穷大）。 
MinHeight：元素的最小高度约束，MinHeight的默认值分别是Auto(自动调整）。
MinWidth：元素的最小宽度约束，MinWidth的默认值分别是Auto(自动调整）。
VerticalAlignment：在父元素（如面板或项控件）中组合此元素时应用于此元素的垂直对齐特征。
Width：元素的宽度。
可以看出在这里存在着Height、MaxHeigh、MinHeight及Width、MaxWidth、MinWidth这么两组与高度和宽度相关的属性，这的确让初学的人有些模糊。这些值之间存在着什么样的关系呢？拿Width、MaxWidth、MinWidth来说，它们存在的关系如下：如果这三个值之间存在冲突，则应用程序确定宽度的实际顺序是：首先必须采用 MinWidth；然后采用 MaxWidth；最后，如果这些值中的每个值都在限制之内，则采用 Width。为什么对于Width或者Height会出现这么三个属性呢？这是跟编程有一定的关系，假如我们在一个布局容器中水平放置了三个按钮，每个按钮的宽度是60像素，即使不考虑这三个按钮之间的间隙显示这三个按钮的宽度至少需要180像素，在默认情况下Width、MaxWidth、MinWidth的默认值分别是Auto(自动调整）、PositiveInfinity（正无穷大）、0.0，这样一来按照上面的规则会采取自动调整的方式。
StackPanel布局用法
StackPane是上面提到的几种布局中最简单的一种布局方式，它在一行或者一列中显示所有的子控件，默认情况下它是在一列中显示所有元素的，不过可以通过设置它的Orientation 属性为Horizontal以指示在一行中显示所有元素。
下面是一个使用StackPanel的简单例子：

<navigation:Page x:Class="SilverlightDemo1.StackPanelDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="StackPanelDemo Page"> <StackPanel Height="100" Name="stackPanel1" Width="200" Background="Yellow"> <Button Content="按钮一" Height="23" Name="button1" Width="100" /> <Button Content="按钮二" Height="23" Name="button2" Width="200" /> <Button Content="按钮三" Height="23" Name="button3" Width="400" /> </StackPanel> </navigation:Page>

这个Page的显示效果如下：
 
在上面的代码中我们设置StackPanel的Width为200，没有设置MaxWidth、MinWidth的值，最终实际显示宽度为200，因为此时MaxWidth和MinWidth都采用了默认值，因为这这三个值有冲突但是都在限制（没有找到具体对限制的定义，周公推测为MinWidth≤Width≤MaxWidth，如果您觉得周公的推测不正确，请告知以免误导大家，谢谢）之内，所以最终实际宽度为200。
如果设置StackPanel的Width、MaxWidth、MinWidth分别为200、400、100，最终实际显示宽度仍为200，原因同上，如下图所示：
 
如果设置StackPanel的Width、MaxWidth、MinWidth分别为200、100、100，最终实际显示宽度为100，这里MaxWidth和MinWidth都是100，而Width却是200不在限制之内，所以最终显示宽度为MinWidth设置的宽度，如下图所示：
 
如果设置StackPanel的Width、MaxWidth、MinWidth分别为200、400、500，最终实际显示宽度为500，这里MaxWidth和MinWidth分别是400和500，而Width却是200不在限制之内，所以最终显示宽度也为MinWidth设置的宽度，如下图所示：
 
Grid布局用法
Grid布局是Silverlight一种比较复杂的布局，它有点像我们HTML中的Table元素，将空间划分为行和列组成的单元格，在每个单元格中可以放置其它元素，下面是一个使用Grid的例子：

<navigation:Page x:Class="SilverlightDemo1.GridDemo1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="400" d:DesignHeight="300" Title="GridDemo1 Page"> <Grid x:Name="LayoutRoot" Background="Pink"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="200" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Content="按钮一" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Center" Width="75" Grid.Column="0" Grid.Row="0" /> <Button Content="按钮二" Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Center" Name="button2" VerticalAlignment="Top" Width="75" /> <TextBox Grid.Column="1" Grid.Row="1" Height="23" HorizontalAlignment="Center" Name="textBox1" VerticalAlignment="Center" Width="80" Text="文本框" /> </Grid> </navigation:Page>

它的显示效果如下：
 
当然Grid也可以像HTML中的Table一样跨行或者跨列，这需要通过设置控件的RowSpan或者ColumnSpan属性，下面就是一个例子：

<navigation:Page x:Class="SilverlightDemo1.GridDemo1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="400" d:DesignHeight="300" Title="GridDemo1 Page"> <Grid x:Name="LayoutRoot" Background="Pink"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="200" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Content="按钮一" Height="220" HorizontalAlignment="Left" Name="button1" Width="75" Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" /> <Button Content="按钮二" Grid.Column="1" Grid.Row="0" Height="23" HorizontalAlignment="Center" Name="button2" VerticalAlignment="Top" Width="75" /> <TextBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Height="23" Name="textBox1" VerticalAlignment="Center" Width="80" Text="文本框" /> <Button Content="按钮三" Grid.Column="2" Height="23" HorizontalAlignment="Left" Name="button3" VerticalAlignment="Top" Width="75" /> <Button Content="按钮四" Grid.Column="3" Grid.Row="1" Height="23" HorizontalAlignment="Left" Name="button4" VerticalAlignment="Top" Width="75" /> </Grid> </navigation:Page>

它的显示效果如下：
 
Canvas布局用法
相比Grid和Grid的布局方式来说，Canvas提供了另外一种途径来布置我们的控件，它采用了我们比较熟悉的利用坐标的方式的，在使用Canvas布局时可以设置每个控件Top和Left属性，也就是设置控件距离它所在的容器的距离，下面就是一个例子：

<navigation:Page x:Class="SilverlightDemo1.CanvasDemo1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="CanvasDemo1 Page"> <Canvas Height="240" Name="canvas1" Width="300" Background="Teal"> <Button Canvas.Left="40" Canvas.Top="161" Content="登录" Height="23" Name="button1" Width="75" /> <TextBlock Canvas.Left="40" Canvas.Top="56" Height="23" Name="textBlock1" Text="用户名" /> <TextBlock Canvas.Left="40" Canvas.Top="102" Height="23" Name="textBlock2" Text="密码" /> <Button Canvas.Left="183" Canvas.Top="161" Content="取消" Height="23" Name="button2" Width="75" /> <TextBox Canvas.Left="138" Canvas.Top="56" Height="23" Name="textBox1" Width="120" /> <PasswordBox Canvas.Left="138" Canvas.Top="102" Height="23" Name="passwordBox1" Width="120" /> </Canvas> </navigation:Page>

它的显示效果如下：
 
在代码中我们对用户名所对应的文本框的设置是：
<TextBox Canvas.Left="138" Canvas.Top="56" Height="23" Name="textBox1" Width="120" />
于是就会在距离Canvas顶部56、左边138处显示一个高度为23、宽度为120的文本框。
布局的综合使用
虽然在XAML中只能有一个顶级元素，但是这并不意味着在一个界面中只使用一种界面布局，我们完全可以在外层布局中嵌套内层布局，就像我们在HTML的Table中再次嵌套Table一样，下面是一个简单的例子：

<navigation:Page x:Class="SilverlightDemo1.Graphics" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="800" d:DesignHeight="600" Title="Chapter10 Page"> <StackPanel Width="800" Height="600" Orientation="Vertical"> <Canvas Width="800" Height="200" Background="White"> <Canvas.Resources> <Storyboard x:Name="myStroryboard"> <DoubleAnimation Storyboard.TargetName="myTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever"/> </Storyboard> </Canvas.Resources> <Image Canvas.Left="50" Canvas.Top="50" Height="100" Name="image01" Stretch="Fill" Width="100" Source="image/15.jpg" MouseEnter="Image_MouseEnter" MouseLeave="Image_MouseLeave"> <Image.RenderTransform> <RotateTransform x:Name="myTransform" Angle="15" CenterX="50" CenterY="50"></RotateTransform> </Image.RenderTransform> </Image> <Image Canvas.Left="350" Canvas.Top="0" Height="100" Name="image02" Stretch="Fill" Width="100" Source="image/15.jpg"> </Image> <Image Canvas.Left="350" Canvas.Top="0" Height="100" Name="image03" Stretch="Fill" Width="100" Source="image/15.jpg" Opacity="0.8"> <Image.RenderTransform> <TransformGroup> <ScaleTransform ScaleY="-0.75"></ScaleTransform> <TranslateTransform Y="180" X="30"></TranslateTransform> <SkewTransform AngleX="-15"></SkewTransform> </TransformGroup> </Image.RenderTransform> <Image.OpacityMask> <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0"> <GradientStop Offset="0.0" Color="#00000000"></GradientStop> <GradientStop Offset="1.0" Color="#FF000000"></GradientStop> </LinearGradientBrush> </Image.OpacityMask> </Image> </Canvas> <Canvas Width="800" Height="200"> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image31" Stretch="Fill" Width="200" Source="image/14.jpg" /> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image32" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="15" CenterX="0" CenterY="0"></RotateTransform> </Image.RenderTransform> </Image> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image33" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="30" CenterX="50" CenterY="300"></RotateTransform> </Image.RenderTransform> </Image> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image34" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="45" CenterX="0" CenterY="50"></RotateTransform> </Image.RenderTransform> </Image> </Canvas> <Canvas Width="800" Height="200"> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image1" Stretch="Fill" Width="200" Source="image/14.jpg" /> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image2" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="15"></RotateTransform> </Image.RenderTransform> </Image> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image3" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="30"></RotateTransform> </Image.RenderTransform> </Image> <Image Canvas.Left="100" Canvas.Top="10" Height="100" Name="image4" Stretch="Fill" Width="200" Source="image/14.jpg"> <Image.RenderTransform> <RotateTransform Angle="40"></RotateTransform> </Image.RenderTransform> </Image> </Canvas> </StackPanel> </navigation:Page>

它的显示效果如下：
 
总结：本篇主要讲述了Silverlight中几种常见的布局：StackPanel可以将控件按行或者按列布局，这是一种比较简单的布局方式；Grid可以采用类似于HTML中Table的方式布局，并且可以设置控件跨行或者跨列摆放；Canvas控件采用类似于坐标定位的方式对控件进行布局。还有一些布局在本篇中没有讲述，读者朋友可以在学习时借鉴这些知识来学习，其实利用这些布局已经足够实现复杂的界面了。
下一篇将讲述常用控件的学习。
周公(zhoufoxcn)
2010-10-11