Silverlight. Элементы управления
DockPanel
Элемент DockPanel - один из новых элементов-контейнеров который входит в Silverlight Toolkit и определяет область, в которой можно упорядочить дочерние элементы горизонтально или вертикально относительно друг друга. Для того что бы использовать этот элемент необходимо добавить ссылку (reference) Systems.Windows.Controls.dll, и добавить в XAML код строчку:
<UserControl x:Class="chapter3.DockPanelDemo" 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/markupcompatibility/ 2006" xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" mc:Ignorable="d" d:DesignHeight="600" d:DesignWidth="500">
На Рис. 22.4продемонстрировано два различных примера заполнения элемента DockPanel со свойством LastChildFill ( Свойство LastChildFill получает или задает значение, указывающее растягивается ли последний дочерний элемент в DockPanel с целью заполнения оставшегося доступного пространства) и значение true (значение по умолчанию true ).
XAML код DockPanel - "1" (Рис 22.4.):
<c:DockPanel Height="200" Width="200" Grid.Column="0" Grid.Row="1"> <Button c:DockPanel.Dock="Left" Content="Left"/> <Button c:DockPanel.Dock="Top" Content="Top"/> <Button c:DockPanel.Dock="Right" Content="Right"/> <Button c:DockPanel.Dock="Bottom" Content="Bottom"/> <Button c:DockPanel.Dock="Bottom" Content="Last Child"/> </c:DockPanel>
XAML код DockPanel - "2" (Рис 22.4.):
<c:DockPanel Height="200" Width="200" Grid.Column="1" Grid.Row="1"> <Button c:DockPanel.Dock="Top" Content="Top"/> <Button c:DockPanel.Dock="Bottom" Content="Bottom"/> <Button c:DockPanel.Dock="Left" Content="Left"/> <Button c:DockPanel.Dock="Right" Content="Right"/> <Button Content="Last Child"/> </c:DockPanel>
Для закрепления дочернего элемента в другом направлении необходимо установить для свойства LastChildFill значение false, а также указать явное направление закрепления для последнего дочернего элемента (рис 22.5.).
XAML код элемента DockPanel представленного на Рис. 22.5:
<c:DockPanel Height="200" Width="200" Grid.Column="2" Grid.Row="1" LastChildFill="False"> <Button c:DockPanel.Dock="Top" Content="Top"/> <Button c:DockPanel.Dock="Bottom" Content="Bottom"/> <Button c:DockPanel.Dock="Left" Content="Left"/> <Button c:DockPanel.Dock="Right" Content="Right"/> <Button c:DockPanel.Dock="Top" Content="Inner Top"/> <Button c:DockPanel.Dock="Bottom" Content="Inner Bottom"/> </c:DockPanel>
WrapPanel
Элемент WrapPanel - один из новых элементов-контейнеров который входит в Silverlight Toolkit. Размещает дочерние элементы последовательно слева направо, разбивая содержимое до следующей строки. Последующее размещение происходит последовательно сверху вниз или справа налево, в зависимости от значения свойства Orientation. Для того что бы использовать этот элемент необходимо добавить ссылку (reference) Systems.Windows.Controls.dll, и добавить в XAML код строчку:
xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
| Свойство | Тип | Описание |
|---|---|---|
| ItemHeight | Double | Получает или задает значение, указывающее высоту всех элементов, содержащихся внутри WrapPanel. |
| ItemWidth | Double | Получает или задает значение, указывающее ширину всех элементов, содержащихся внутри WrapPanel. |
| Orientation | Orientation | Получает или задает значение, указывающее размерность, с которой располагается дочернее содержимое (Принимает значения Horizontal или Vertical ) . |
XAML код элемента WrapPanel представленного на Рис. 22.6:
<StackPanel> <TextBlock Text="Horizontally Oriented WrapPanel Example" Margin="5" FontWeight="Bold"/> <c:WrapPanel Width="500" Height="250" Orientation="Horizontal"> <Image Width="150" Height="100" Margin="2" Source="res/1.jpg"/> <Image Width="150" Height="100" Margin="2" Source="res/2.jpg"/> <Image Width="150" Height="100" Margin="2" Source="res/3.jpg"/> <Image Width="150" Height="100" Margin="2" Source="res/4.jpg"/> <Image Width="150" Height="100" Margin="2" Source="res/5.jpg"/> </c:WrapPanel> </StackPanel>
