Язык программирования C#9 и платформа .NET5

Троелсен Эндрю

<Button x:Name="btnOK" Width="80" Content="OK"/>

</WrapPanel>

Когда эта разметка загружена, при изменении ширины окна содержимое выглядит не особо привлекательно, т.к. оно перетекает слева направо внутри окна (рис. 25.2).

По умолчанию содержимое

WrapPanel

перетекает слева направо. Тем не менее, если изменить значение свойства

Orientation

на

Vertical

, то можно заставить содержимое перетекать сверху вниз:

<WrapPanel Background="LightSteelBlue" Orientation ="Vertical">

Панель

WrapPanel

(как и ряд других типов панелей) может быть объявлена с указанием значений

ItemWidth

и

ItemHeight

, которые управляют стандартным размером каждого элемента. Если подэлемент предоставляет собственные значения

Height

и/или

Width

, то он будет позиционироваться относительно размера, установленного для него панелью. Взгляните на следующую разметку:

<Page

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

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

Title="Fun with Panels!" Height="100" Width="650">

<WrapPanel Background="LightSteelBlue" Orientation ="Horizontal"

ItemWidth ="200"

ItemHeight ="30">

<Label x:Name="lblInstruction" FontSize="15" Content="Enter Car Information"/>

<Label x:Name="lblMake" Content="Make"/>

<TextBox x:Name="txtMake"/>

<Label x:Name="lblColor" Content="Color"/>

<TextBox x:Name="txtColor"/>

<Label x:Name="lblPetName" Content="Pet Name"/>

<TextBox x:Name="txtPetName"/>

<Button x:Name="btnOK" Width ="80" Content="OK"/>

</WrapPanel>

</Page>

В результате визуализации получается окно, показанное на рис. 25.3 (обратите внимание на размер и позицию элемента управления

Button

, для которого было задано уникальное значение

Width

).

После просмотра рис. 25.3 вы наверняка согласитесь с тем, что панель

WrapPanel

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

WrapPanel

будет подэлементом панели другого типа, позволяя небольшой области окна переносить свое содержимое при изменении размера (как, например, элемент управления

ToolBar

).

Позиционирование содержимого внутри панелей StackPanel

Подобно

WrapPanel

элемент управления

StackPanel

организует содержимое внутри одиночной строки, которая может быть ориентирована горизонтально или вертикально (по умолчанию) в зависимости от значения, присвоенного свойству

Orientation

. Однако отличие между ними заключается в том, что

StackPanel

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

StackPanel

просто растягиваются (согласно выбранной ориентации), приспосабливаясь к размеру самой панели

StackPanel

. Например, в файле

SimpleStackPanel.xaml

содержится разметка, которая в результате дает вывод, показанный на рис. 25.4:

<Page

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

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

Title="Fun with Panels!" Height="200" Width="400">

<StackPanel Background="LightSteelBlue" Orientation ="Vertical">

<Label Name="lblInstruction"

FontSize="15" Content="Enter Car Information"/>

<Label Name="lblMake" Content="Make"/>

<TextBox Name="txtMake"/>

<Label Name="lblColor" Content="Color"/>

<TextBox Name="txtColor"/>

<Label Name="lblPetName" Content="Pet Name"/>

<TextBox Name="txtPetName"/>

<Button Name="btnOK" Width ="80" Content="OK"/>

</StackPanel>

</Page>

Если присвоить свойству

Orientation

значение

Horizontal

, тогда визуализированный вывод станет таким, как на рис. 25.5:

<StackPanel Background="LightSteelBlue" Orientation="Horizontal">

Подобно

WrapPanel

панель

StackPanel

тоже редко применяется для организации содержимого прямо внутри окна. Панель

StackPanel

должна использоваться как вложенная панель в какой-нибудь главной панели.

Позиционирование содержимого внутри панелей Grid

Из всех панелей, предоставляемых API-интерфейсами WPF, панель

Grid

является, несомненно, самой гибкой. Аналогично таблице HTML панель

Grid

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

Grid

выполняются перечисленные ниже шаги.

1. Определение и конфигурирование каждой колонки.

2. Определение и конфигурирование каждой строки.