StackPanel представляет собой простой элемент-контейнер, который просто отображает содержащиеся в нем элементы один за другим. Ориентация StackPanel может быть горизонтальной или вертикальной. Класс ToolBarPanel унаследован от

StackPanel.

<Window x:Class= LayoutSamples.Window1

xmlns= http: schemas.microsoft.com/winfx/2 00 6/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/2 006/xaml Title= Layout Samples Height= 300 Width= 283 >

<StackPanel>

<Label>Label</Label> <TextBlock>TextBlock</TextBlock> <TextBox>TextBox</TextBox> <Button>Button</Button> <CheckBox>Checkbox</CheckBox> <ListBox>

<ListBoxItem>ListBoxItem One</ListBoxItem> <ListBoxItem>ListBoxItem Two</ListBoxItem> </ListBox>

<Button>Button</Button> </StackPanel> </Window>

На рис. 34.13 вы можете видеть дочерние элементы управления StackPanel, организованные вертикально.

В случае привязываемых к данным элементов StackPanel, если недостаточно пространства

для отображения их всех, то вы можете использовать вместо нее VirtualizingStackPanel.

В этой панели генерируются только отображаемые элементы.

WrapPanel

WrapPanel позиционирует дочерние элементы слева направо, друг за другом, до тех пор, пока они умещаются в одну строку, а затем продолжает со следующей строки. Ориентация панели может быть как горизонтальной, так и вертикальной.

<Window x:Class= LayoutSamples.WrapPanelDemo

xmlns= http: schemas.microsoft.com/winfx/2006/xaml/presentation

xmlns:x= http: schemas.microsoft.com/winfx/2006/xaml

Title= Layout Samples Height= 160 Width= 250 > <WrapPanel>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button>

<Button Width= 100 >Button</Button> </WrapPanel> </Window>

На рис. 34.14 показан вывод панели WrapPanel. Если вы измените размер окна приложения, кнопки будут заново упорядочены так, чтобы умещаться в строке.

Рис. 34.13. Дочерние элементы управления панели StackPanel

Canvas

Рис. 34.14. Дочерние элементы управления панели WrapPanel

Canvas - это панель, которая позволяет явно позиционировать элементы управления. Canvas определяет присоединенные свойства Left, Right, Top и Bottom, которые могут использоваться дочерними элементами для позиционирования внутри панели.

<Window x:Class= LayoutSamples.CanvasDemo

xmlns= http: schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/2006/xaml Title= Layout Samples Height= 300 Width= 300 >

<Canvas Background= LightBlue >

<Label Canvas.Top= 30 Canvas.Left= 20 >Enter here:</Label> <TextBox Canvas.Top= 30 Canvas.Left= 130 Width= 100 ></TextBox>

<Button Canvas.Top= 70 Canvas.Left= 13 0 >Click Me!</Button> </Canvas> </Window>

На рис. 34.15 показан вывод панели Canvas с позиционированными дочерними элементами Label, TextBox и Button.

DockPanel

DockPanel очень похожа на функциональность ст1ковки Windows Forms. Здесь вы можете специфицировать область, где должны быть организованы дочерние элементы управления. DockPanel определяет присоединенное свойство Dock, которое вы можете установить для дочерних элементов в значения Left, Right, Top и Bottom. На рис. 34.16 показан результат размещения текстовых блоков в панели DockPanel.

Рис. 34.15. Дочерние элементы управления панели Canvas

Рис. 34.16. Дочерние элементы управления панели DockPanel

Для облегчения восприятия различий разные области выделены разными цветами.

<Window x:Class= LayoutSamples.DockPanelDemo

xmlns= http: schemas.microsoft.com/winfx/20 06/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/200 6/xaml Title= Layout Samples Height= 300 Width= 300 > <DockPanel Background= LightBlue > <Border Height= 25 Background= AliceBlue DockPanel.Dock= Top >

<TextBlock>Menu</TextBlock> </Border>

<Border Height= 25 Background= Aqua DockPanel.Dock= Top >

<TextBlock>Toolbar</TextBlock> </Border>

<Border Height= 30 Background= LightSteelBlue DockPanel.Dock= Bottom >

<TextBlock>Status</TextBlock> </Border>

<Border Width= 80 Background= Azure DockPanel.Dock= Left >

<TextBlock>Left Side</TextBlock> </Border>

<Border Background= HotPink >

<TextBlock>Remaining Part</TextBlock> </Border> </DockPanel> </Window>

Grid

Используя Grid, вы можете упорядочить элементы управления по строкам и столбцам. Для каждого столбца вы можете специфицировать ColumnDefinition, а для каждой строки - RowDefinition. В примере кода отображаются два столбца и три строки. Для каждой строки и столбца вы можете специфицировать ширину и высоту. ColumnDefinition имеет свойство Width, а RowDefinition - свойство Height. Высоту и ширину можно определять в пикселях, сантиметрах, дюймах или точках, либо установить Auto для определения размеров в зависимости от содержимого. Grid также позволяет звездное изменение размера (star sizing), когда пространство для строк и столбцов вычисляется в соответствии с доступным пространством и относительно других строк и столбцов. При выделении доступного пространства для столбца вы можете установить свойство Width в значение *, а чтобы получить удвоенное значение для другого столбца, указывайте 2*. Пример кода, определяющего два столбца и три строки, не задает дополнительных установок в определениях столбца и строки; по умолчанию работает звездная настройка.

Grid содержит несколько элементов Label и TextBox. Поскольку родителем этих элементов является Grid, вы можете установить присоединенные свойства Column, ColumnSpan, Row и RowSpan.

<Window x:Class= LayoutSamples.GridDemo

xmlns= http: schemas.microsoft.com/winfx/20 06/xaml/presentation xmlns:x= http: schemas.microsoft.com/winfx/200 6/xaml Title= Layout Samples Height= 300 Width= 283 > <Grid ShowGridLines= True > <Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition /> </Grid.ColumnDefinitions> <Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition /> </Grid.RowDefinitions>