пятница, 25 марта 2011, Александр Краковецкий

Продолжаем серию статей на тему "Windows Phone 7 в подлиннике". Сегодня поговорим об элементе управления WrapPanel, который поставляется вместе с Silverlight for Windows Phone 7 Toolkit.

Элемент управления WrapPanel позволяет размещать последовательность элементов справа налево или сверху вниз. Если какой-то элемент не помещается в строку, то он автоматически будет перемещен на новую строку.

Для начала работы необходимо добавить в проект ссылку на сборку Microsoft.Phone.Controls.Toolkit.dll, которая находится по такому пути:

%ProgramFiles%Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll

Также вам необходимо добавить объявление пространства имен toolkit так, как это показано ниже:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

WrapPanel содержит коллекцию элементов типа UIElement, которые доступны в помощью свойства Children.

Основные свойства и методы

ItemHeight - зависимое свойство типа double. Устанавливает или возвращает высоту области для каждого элемента, который размещен внутри WrapPanel. Значение по умолчанию - Double.NaN.

ItemWidth - зависимое свойство типа double. Устанавливает или возвращает ширину области каждого элемента, который размещен внутри WrapPanel. Значение по умолчанию - Double.NaN.

Orientation - зависимое свойство типа Orientation. Устанавливает или возвращает положение, в котором будут отображаться элементы. Значение по умолчанию - System.Windows.Controls.Orientation.Horizontal.

Пример использования

Ниже показан пример использования WrapPanel в вертикальном положении. В WrapPanel добавлено 5 элементов.

<TextBlock Text="Horizontal Panel"/>
<toolkit:WrapPanel ItemHeight="100" ItemWidth="100"  Height="300">
    <Rectangle Fill="Aqua" Height="80" Width="80"/>
    <Rectangle Fill="Pink" Height="80" Width="80"/>
    <Rectangle Fill="Green" Height="80" Width="80"/>
    <Rectangle Fill="YellowGreen" Height="80" Width="80"/>
    <Rectangle Fill="Red" Height="80" Width="80"/>
</toolkit:WrapPanel>
<TextBlock Text="Vertical Panel"/>
<toolkit:WrapPanel ItemHeight="100" ItemWidth="100" Orientation="Vertical" Height="300">
    <Rectangle Fill="WhiteSmoke" Height="80" Width="80"/>
    <Rectangle Fill="White" Height="80" Width="80"/>
    <Rectangle Fill="Beige" Height="80" Width="80"/>
    <Rectangle Fill="Bisque" Height="80" Width="80"/>
    <Rectangle Fill="Wheat" Height="80" Width="80"/>
</toolkit:WrapPanel>

Результат будет следующим:

WrapPanel в качестве ItemsPanel

Несмотря на то, что WrapPanel – простой элемент управления, он может быть использован в сложных сценариях, например, вместе с LongListSelector, ListPicker, ListBox и другими ItemsControls для размещения элементов в удобном виде:

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel ItemWidth="100" ItemHeight="50"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBoxItem Content="Item1"/>
    <ListBoxItem Content="Item2"/>
    <ListBoxItem Content="Item3"/>
    <ListBoxItem Content="Item4"/>
    <ListBoxItem Content="Item5"/>
    <ListBoxItem Content="Item6"/>
</ListBox>

Вы можете найти исходный код примера в Silverlight for Windows Phone 7 Toolkit.

Исходный код примера к статьи можно загрузить по ссылке WrapPanelDemo.zip.

---