Главная » Silverlight » Контейнеры пакета Silverlight Toolkit

0

С помощью только контейнера StackPanel тяжело создать реалистичный пользова­тельский интерфейс. Для этого StackPanel должен работать совместно с более мощны­ми контейнерами. Только тогда вы можете сверстать настоящее окно.

Наиболее сложный контейнер — Grid — рассматривается далее. Но сначала рас­смотрим два более простых контейнера WrapPanel и DockPanel, доступных только в Silverlight Toolkit. Оба они дополняют StackPanel, определяя разные алгоритмы раз­мещения элементов.

Чтобы можно было применить WrapPanel или DockPanel, добавьте ссылку на сборку System.Windows.Controls.Toolkit.dll, в которой они определены. Чтобы обратиться к этой сборке, нужно установить пакет инструментов разработки Silverlight Tbolkit, до­ступный на сайте www.codeplex.com/Silverlight.

Добавив ссылку на сборку, отобразите пространство имен, чтобы класс был досту­пен в разметке.

<UserControl x:Class="Layout.WrapAndDock" … xmlns:toolkit=

"clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Toolkit">

После этого можно определить контейнеры WrapPanel и DockPanel с помощью пре­фикса пространства имен toolkit.

<toolkit:WrapPanel x/toolkit:WrapPanel>

Ряд этапов можно пропустить, добавив WrapPanel или DockPanel путем перетаски­вания из окна инструментов. Тогда Visual Studio автоматически добавит ссылку на сборку, отобразит пространство имен и вставит разметку XAML, создающую элемент управления.

Контейнер WrapPanel

Примечание. Контейнер WrapPanel — единственный из пяти контейнеров Silverlight, поведение которого невозможно воспроизвести с помощью решетки Grid, даже если очень постараться.

Контейнер WrapPanel располагает элементы в доступном пространстве по одному вдоль строки или столбца, в зависимости от значения свойства WrapPanel .Orientation. По умолчанию оно имеет значение Horizontal, и элементы размещаются слева направо до конца строки, а затем — в следующей строке. При значении Vertical элементы раз­мещаются сверху вниз до конца столбца, а затем — в следующем столбце.

Совет. Обычно WrapPanel, как и StackPanel, используется для верстки небольшой части пользовательского интерфейса, а не всего окна. Например, контейнер WrapPanel можно применить для размещения кнопок на панели инструментов.

Приведенная ниже разметка определяет ряд кнопок с разными параметрами вырав­нивания в контейнере WrapPanel.

ctoolkit:WrapPanel Margin="3"> <Button VerticalAlignment="Top" Content="Bepxняя кнопка"> </Button>

<Button MinHeight="60" Content="Bысокая кнопка "></Button> <Button MinHeight="60" Content="Bысокая кнопка 2">

</Button> <Button VerticalAlignment="Bottom" Content="Нижняя кнопка"> </Button> ?

<Button Content="Paстянутая кнопка"x/Button> <Button VerticalAlignment="Center"

Content="центрированная кнопка"> </Button> </toolkit:WrapPanel>

На рис. 3.9 показано, как кнопки переносятся построчно, чтобы разместить их в до­ступном пространстве WrapPanel, определенном размерами родительского элемента управления. Из рисунка видно, что в режиме Horizontal контейнер WrapPanel создает ряд воображаемых строк, каждая из которых приобретает высоту наиболее высокого элемента, попавшего в строку. Другие элементы могут быть растянуты или выровне­ны в соответствии со значением свойства VerticalAlignment. На рис. 3.9, слева все кнопки размещены в одной высокой строке. Некоторые из них растянуты, а некоторые выровнены. На рис. 3.9, справа несколько кнопок не поместились в первой строке и были перенесены на следующую. Вторая строка не содержит высоких кнопок, поэтому ей присвоена минимальная высота, достаточная для размещения кнопок. В результате для этой строки значение параметра VerticalAlignment ни на что не влияет.

Рис. 3.9. Перенос кнопок на следующие строки

Контейнер DockPanel

Этот контейнер растягивает элементы управления вдоль одной из своих границ. Чтобы лучше понять его работу, представьте себе панели инструментов, используемые во многих приложениях Windows. Обычно они пристыкованы к верхней границе окна. Как и в StackPanel, пристыкованные элементы, определенные в DockPanel, имеют воз­можность самостоятельно выбрать один параметр своего размещения. Например, если пристыковать кнопку к верхней границе DockPanel, она растянется по всей ширине DockPanel, но получит необходимую высоту на основе другого содержимого и значе­ния свойства MinHeight. С другой стороны, если пристыковать кнопку к левой границе DockPanel, она растянется по высоте от нижней до верхней границ контейнера, но ее ширина может увеличиваться, насколько необходимо.

Как дочерний элемент выбирает сторону, к которой нужно пристыковать себя? Выбор определяется подключенным свойством Dock, которое может принимать значе­ния Left (Слева), Right (Справа), Тор (Сверху) и Bottom (Снизу). Каждый элемент, раз­мещенный в DockPanel, автоматически приобретает это свойство.

Приведенная ниже разметка размещает по одной кнопке на каждой стороне контей­нера DockPanel.

ctoolkit:DockPanel LastChildFill="True"> <Button toolkit:DockPanel.Dock="Top"

Content="BepxHfls KH0nKa"X/Butt0n> <Button toolkit:DockPanel.Dock="Bottom"

Content="HracHHH KHoriKa"></Button> <Button toolkit:DockPanel.Dock="Left"

Content="Левая KHonka"x/Button> <Button toolkit: DockPanel. Dock=?"Right"

Content="npaBaH KHornca"x/Button> <Button Content="Oставшееся пространство"></Вutton>

</toolkit:DockPanel>

Значение True свойства LastChildFill приказывает контейнеру присвоить остав­шееся пространство последнему элементу. Результат показан на рис. 3.10.

Рис. 3.10. Пристыковка кнопок к границам контейнера DockPanel

В процессе пристыковки важна последовательность расположения элементов управ­ления в разметке. В данном примере верхняя и нижняя кнопки растянуты по всей ши­рине контейнера потому, что они расположены в разметке первыми. Левая и правая кнопки вынуждены удовлетвориться оставшимся пространством. Если поменять места­ми дескрипторы кнопок в разметке, левая и правая кнопки займут по высоте весь кон­тейнер, а верхняя и нижняя будут сжаты, потому что им останется только пространство между двумя боковыми кнопками.

К одной стороне можно пристыковать несколько элементов. В этом случае элемен­ты размещаются соответственно последовательности их определения в разметке. Если захотите изменить размеры явно или определить автоматическое растягивание, отре­дактируйте свойства Margin, HorizontalAlignment и VerticalAlignment, как и в случае контейнера StackPanel. Ниже приведена измененная версия предыдущего примера, де­монстрирующая результат установки этих свойств.

<toolkit:DockPanel LastChildFill="True"> <Button toolkit:DockPanel.Dock="Top"

Content="растянутая верхняя кнопка"></Button> <Button toolkit:DockPanel.Dock="Top" HorizontalAlignment="Center"

Content="центрированная верхняя кнопка"></Button> <Button toolkit:DockPanel.Dock="Top" HorizontalAlignment="Left"

Content="Bepxняя кнопка, выровненная влево">

</Button>

<Button toolkit:DockPanel.Dock="Bottom"

Content="Нижняя кнопка"></Button> <Button toolkit:DockPanel.Dock="Left" Content="Левая кнопка"></Button> <Button toolkit:DockPanel.Dock="Right" Content="правая кнопка"></Button> <Button Content="оставшееся пространство "></Button> </toolkit:DockPanel>

Последовательность пристыковки осталась прежней. Сначала устанавливаются верхние кнопки, затем нижняя, после этого оставшееся пространство предоставляется боковым кнопкам, и наконец, последняя кнопка получает все пространство, не понадо­бившееся боковым кнопкам. Результат показан на рис. 3.11.

Рис. 3.11. Пристыковка нескольких элементов к верхней границе

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии