2.3 WrapPanel面板布局

WrapPanel是一个比较特殊的面板，并且没有包含在Silverlight for Windows Phone默认安装中。要使用WrapPanel面板，首先需要到http：//silverlight.codeplex.com/releases/view/60291下载并安装Silverlight for Windows phoneToolkit，本书编写时最新版本是August 2011（7.1 SDK）。下载安装后，可以将WrapPanel面板及其他众多有用的控件集成到开发工具中。

WrapPanel与StackPanel非常接近，可以将面板内的子元素按顺序排列，不同之处是，如果遇到空间不足时，WrapPanel会将多余的元素放在另外一行或者列。这对于子元素数目不确定，又需要分行或列排列在面板中时，是非常有用的。

在Visual Studio Express for Windows Phone中使用WrapPanel的过程如下：

（1）首先根据前述地址下载并安装Silverlight for Windows phoneToolkit。

（2）在Visual Studio Express for Windows phone的解决方案管理窗口（Solution Explorer）中，用鼠标右键单击References文件夹，在弹出的快捷菜单中选择“Add Reference…”命令，在“Add Reference”对话框中选择“Browser”选项卡，并按如下路径找到“C：\Program Files（x86）\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Feb11\Bin\Microsoft.Phone.Controls.Toolkit.dll”，将Windows phoneToolkit添加引用到本项目中（具体路径与安装时选择的安装路径有关）。

（3）在页面设计状态中，展开左侧的“ToolBox”对话框。在对话框中的空白区域单击鼠标右键，在弹出的快捷菜单中选择“Choose Items…”命令，在如图2-11所示的“Choose Toolbox Items”对话框中，找到并选中“WrapPanel”复选框。

（4）在页面的XAML代码编辑窗口中，添加<toolkit：WrapPanel></toolkit：WrapPanel>即可使用WrapPanel。

WrapPanel如下属性与StackPanel类似：

• Orientation。与StackPanel面板的Orientation属性类似，用于确定子元素的排列方向，不同之处是默认值为Horizontal。如果Orientation值为Horizontal，WrapPanel面板中的子元素会先按水平方向排列，排不下时，剩余的元素会另起一行，重新排列。
• ItemWidth。用于指定WrapPanel面板内子元素的宽度。如果子元素的实际宽度大于ItemWidth时，会被裁剪；小于ItemWidth时保持原有宽度。ItemWidth的默认值为Auto，表示ItemWidth值取子元素的实际宽度。
• ItemHeight。与ItemWidth类似，指定的是子元素的高度，默认值也为Auto。

例如，以下代码包含两个WrapPanel，第一个WrapPanel水平放置子元素，ItemWidth="120"，按钮1的Width=140，大于ItemWidth，被裁剪了，按钮3的Width小于ItemWidth，保持原值，其余按钮的Width未做设置，默认设置为Auto，取ItemWidth值作为按钮的Width值。

第二个WrapPanel垂直放置子元素，ItemHeight="120"，Height值大于ItemHeight的子元素被裁剪，小于ItemHeight保持原持，Height值为Auto的，取ItemHeight。

程序运行效果，如图2-12所示。

XAML代码：WrapPanel1.xaml

<toolkit：WrapPanel Grid.Row="1" Grid.RowSpan="3" ItemWidth="120">
           <Button Content="1" BorderBrush="Aqua" Width="140"/>
           <Button Content="2" BorderBrush="CadetBlue"/>
           <Button Content="3" BorderBrush="DarkMagenta" Width="80"/>
           <Button Content="4" BorderBrush="Fuchsia"/>
           <Button Content="5" BorderBrush="LightBlue" />
           <Button Content="6" BorderBrush="Orange"/>
        </toolkit：WrapPanel>
        <TextBlock Name="textblock" Text="垂直放置子元件" Margin="9" Style="{StaticResource PhoneTextTitle1Style}" FontSize="36" Grid.Row="2"/>
        <toolkit：WrapPanel Grid.Row="3" ItemHeight="120" Orientation="Vertical">
           <Button Content="1" BorderBrush="Aqua" Height="140"/>
           <Button Content="2" BorderBrush="CadetBlue" Height="80"/><Button Content="3" BorderBrush="DarkMagenta" />
           <Button Content="4" BorderBrush="Fuchsia" />
           <Button Content="5" BorderBrush="LightBlue" />
           <Button Content="6" BorderBrush="Orange" />
        </toolkit：WrapPanel>