WrapPanel組件作用是從左至右或從上至下依次安排位于其中的元素的位置，當元素超過該組件邊緣時，它們將會被自動安排至下一行或列。該組件一般用于文本布局、拾色器、圖片選擇等。本文將為大家介紹該組件的基本特性以及應(yīng)用實例。

　　組件所在命名空間：

　　System.Windows.Controls

　　組件常用屬性：

　　ItemHeight：獲取或設(shè)置包含在WrapPanel組件中的每一個項目布局區(qū)域的高度。

　　ItemWidth：獲取或設(shè)置包含在WrapPanel組件中的每一個項目布局區(qū)域的寬度。

　　Orientation：獲取或設(shè)置子元素被安排布局的方向。

　　實例：

　　說明：WrapPanel組件還可以作為item組件面板模板使用，常作為ListBox等組件的item組件面板模板。具體可以參考園友Nasa的一篇文章：巧用WrapPanel為ItemsControl綁定數(shù)據(jù)

詳細的說明在代碼注釋中給出。

　　MainPage.xaml文件代碼：

<UserControl

   &nbsp;xmlns="//schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="//schemas.microsoft.com/winfx/2006/xaml&quot;

    xmlns:d="//schemas.microsoft.com/expression/blend/2008" xmlns:mc="//schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" x:Class="SilverlightClient.MainPage"

    d:DesignWidth="320&quot; d:DesignHeight="480">

    <Grid x:Name="LayoutRoot" Width="320" Height="480" Background="White">

        <Slider x:Name="HSlider" Height="23" Margin="8,202,8,0" VerticalAlignment="Top" Maximum="100" Value="100"/>

        <Border x:Name="theContainer" Margin="8,8,8,0" BorderBrush="Black" BorderThickness="1" Height="190" VerticalAlignment="Top">

         &nbsp;&nbsp; <controlsToolkit:WrapPanel x:Name="wp" Margin="-1"/>

        </Border>

        <Border Margin="8,234,8,52" BorderBrush="Black" BorderThickness="1">

    &nbsp;       <controlsToolkit:WrapPanel x:Name="wp2" Margin="-1"/>

        </Border>

        <CheckBox x:Name="chkHorizontal" Height="22" HorizontalAlignment="Left" Margin="7,0,0,24" VerticalAlignment="Bottom" Width="95" Content="是否水平" FontSize="16"/>

    </Grid>

</UserControl>

　　MainPage.xaml.cs文件代碼：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightClient

{

&nbsp;   public partial class MainPage : UserControl

    {

    &nbsp;   public MainPage()

        {

&nbsp;           InitializeComponent();

  &nbsp;       ;  //注冊事件觸發(fā)

            this.Loaded += new RoutedEventHandler(MainPage_Loaded);

  &nbsp;         this.HSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(HSlider_ValueChanged);

            this.chkHorizontal.Click += new RoutedEventHandler(chkHorizontal_Click);

        }

        //設(shè)置WrapPanel的布局方向

        void chkHorizontal_Click(object sender, RoutedEventArgs e)

        {

            if (chkHorizontal.IsChecked == true)

          &nbsp; {

 &nbsp;&nbsp;             wp2.Orientation = Orientation.Horizontal;

 &nbsp;          }

  &nbsp;         else

         &nbsp;  {

        &nbsp;       wp2.Orientation = Orientation.Vertical;

         ;   }

        }

        void HSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

  &nbsp;        

   &nbsp;        wp.Width = theContainer.ActualWidth * HSlider.Value / 100.0;

        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)

        {

            //wp的內(nèi)容添加

            for (int i = 0; i < 20; i++)

    &nbsp;       {

              ;  wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Black) });

                wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Blue) });

                wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Brown) });

                wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Cyan) });

            &nbsp;   wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.DarkGray) });

                wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Green) });

             &nbsp;  wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Magenta) });

          &nbsp;     wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Purple) });

      &nbsp;         wp.Children.Add(new Rectangle() { Height = 20, Width = 20, Fill = new SolidColorBrush(Colors.Yellow) });

          ;  }

       &nbsp; &nbsp;  //wp2的內(nèi)容添加

            for(int i=0;i&lt;20;i++)

         ; &nbsp; {

         &nbsp;      string s = "測試文字！";

     &nbsp;          TextBlock tb = new TextBlock();

     &nbsp;          tb.Text = s;

         &nbsp;      tb.FontSize = 14;

       &nbsp;        wp2.Children.Add(tb);

            }

         &nbsp;  chkHorizontal.IsChecked = true;

        }

    }

}

　　最終效果圖：