Контейнерные элементы управления, например Grid, Canvas или StackPanel, позволяют быстро разрабатывать изменяющиеся и функциональные пользовательские интерфейсы, предоставляя встроенную функциональность макета. Каждый контейнерный элемент управления обрабатывает макет и размещение расположенных на нем элементов и может предоставлять свойства содержащихся в нем элементов управления, которые удобно использовать при размещении. В этом разделе приводятся общие сведения о различных типах контейнерных элементах управления, и разъясняется, как они влияют на макет содержащихся в них элементов управления.
Canvas
Элемент управления Canvas поддерживает абсолютное позиционирование и предоставляет минимум встроенных возможностей макета для содержащихся в нем элементов управления. Элемент управления Canvas позволяет размещать содержащиеся в нем элементы управления со сдвигом относительно любого угла панели. Canvas предоставляет четыре свойства для содержащихся в нем элементов управления: Top, Bottom, Right и Left. Элементы управления, содержащиеся в элементе управления Canvas, должны определять одно свойство по горизонтали и одно свойство по вертикали, тем самым назначая угол, от которого будет задаваться смещение. Например, если элемент управления определяет значения для свойств Top и Right, он будет поддерживать постоянное расстояние от правого верхнего угла. Если указаны значения для более чем одного свойства по горизонтали или по вертикали, то одно из значений не будет обрабатываться.
Canvas является единственным элементом панели, который не имеет собственных характеристик размещения. Canvas имеет нулевые свойства по умолчанию Height и Width, если не является дочерним объектом элемента, который автоматически изменяет размер дочерних элементов. Размер дочерних элементов Canvas никогда не изменяется, они размещаются по назначенным координатам. Это обеспечивает гибкость в ситуациях, когда собственные ограничения изменения размера или выравнивания не требуются или нежелательны. В случаях, когда для дочернего содержимого необходимо автоматически изменять размер и выполнять выравнивание, обычно лучше использовать элемент Grid.
Свойство ZIndex определяет порядок, в котором отображаются дочерние элементы, совместно использующие одно координатное пространство. Большее значение ZIndex одного дочернего элемента указывает, что данный элемент отобразится над дочерним элементом с меньшим значением.
Дочерние элементы Canvas всегда обладают полным требуемым размером. В результате вертикальное и горизонтальное выравнивания не оказывают воздействия внутри Canvas.
Canvas является элементом управления размещением верхнего уровня, который можно использовать для абсолютного позиционирования дочернего содержимого. Для окрашивания и рисования можно использовать Кисти и не требуется использовать Canvas. Дополнительные сведения см. в разделе Общие сведения о закраске сплошным цветом и градиентом.
По умолчанию элементы панели не получают фокус. Для принудительного получения элементом панели фокуса установите для свойства Focusable значение true.
В этом примере демонстрируется создание и использование экземпляра Canvas.
<Window x:Class="LayoutDemo.CanvasWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="CanvasWindow" Height="300" Width="300">
<Canvas Background="LightBlue">
<Label Canvas.Top="30" Canvas.Left="20">Enter here:</Label>
<TextBox Canvas.Top="30" Canvas.Left="120" Width="100" />
<Button Canvas.Top="70" Canvas.Left="130" Content="Click Me!" Padding="5" />
</Canvas>
</Window>
|
Элемент управления DockPanel обеспечивает поддержку закрепления для упрощения расположения панелей инструментов и других элементов управления, которые требуется закрепить вдоль одной из границ панели. Элемент управления DockPanel предоставляет свойство с именем DockStyle для содержащихся в нем элементов управления, которое определяет, как они будут расположены. Например, элемент управления со свойством DockStyle, имеющим значение DockStyle.Top, будет закреплен по верхней границе панели DockPanel. Элемент управления DockPanel также предоставляет свойство с именем LastChildFill. Если это свойство имеет значение "true", последний дочерний элемент управления, автоматически добавленный на панель DockPanel, имеет значение свойства DockStyle равным true.
Давайте попробуем создать элемент DockPanel.
1. Если у вас в интерфейсе еще отсутствует контейнер DockPanel, перетащите DockPanel с Панели элементов в конструктор WPF (конструктор).
2. Перетащите элемент управления, который требуется закрепить, в контейнер DockPanel.
3. В окне Свойства установите для свойства DockPanel.Dock элемента управления значение стороны контейнера DockPanel, вдоль которой его требуется закрепить. Например, если элемент управления требуется закрепить по верхней границе контейнера DockPanel, задайте этому свойству значение «Top».
4. Если для свойства DockStyle.Dock установлено значение «Top» или «Bottom», задайте свойству Width элемента управления значение «Auto». Аналогичным образом, если для свойства DockStyle.Dock установлено значение «Left» или «Right», задайте свойству Height элемента управления значение «Auto».
Обратите внимание, что для свойства LastChildFill контейнера DockPanel установлено значение по умолчанию. Это означает, что свойство DockPanel.Dock последнего дочернего элемента управления, добавленного в контейнер DockPanel, будет иметь значение «Fill». Чтобы изменить это поведение, установите другое значение для свойства LastChildFill контейнера «DockPanel».
В следующем примере создается простая структура пользовательский интерфейс с помощью элемента DockPanel. Элемент DockPanel доступное пространство между его дочерними элементами.
<Window x:Class="LayoutDemo.DockPanelWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DockPanelWindow" Height="300" Width="300">
<DockPanel>
<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 Height="80" Background="Azure" DockPanel.Dock="Left">
<TextBlock>Left Side</TextBlock>
</Border>
<Border Background="HotPink">
<TextBlock>Remaining Part</TextBlock>
</Border>
</DockPanel>
</Window>
|
Grid
Наиболее знакомым контейнерным элементом управления является элемент управления Grid. По умолчанию каждое новое окно Window, открытое в Windows Presentation Foundation (WPF) для Visual Studio (конструктор), включает элемент управления Grid. Элемент управления Grid позволяет позиционировать элементы управления внутри ячеек, задаваемых пользователем. Элементы управления, помещенные в ячейки, поддерживают фиксированное поле между двумя или более краями элемента управления и краями ячеек при изменении размера окна Window. Дополнительные сведения об установке полей см. в разделе Практическое руководство. Установка полей для элемента управления в конструкторе WPF.
При добавлении в окно Window элемент управления Grid состоит из одной ячейки. Дополнительные строки и столбцы могут быть добавлены в коде или с помощью WPF (конструктор). Дополнительные сведения см. в разделе Практическое руководство. Добавление строк и столбцов в таблицу.
В следующем примере демонстрируется создание элемента управления Grid. В данном случае элемент управления Grid определяет три элемента ColumnDefinition и четыре RowDefinition, в которых размещается дочернее содержимое.
<Window x:Class="LayoutDemo.GridWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GridWindow" Height="300" Width="300">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Content="Title" />
<Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Content="Firstname:" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="1" Width="100" Height="30" />
<Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" Content="Lastname:" Margin="10" />
<TextBox Grid.Column="1" Grid.Row="2" Width="100" Height="30" />
</Grid>
</Window>
|
StackPanel
Элемент управления StackPanel располагает содержащиеся в нем элементы управления либо в вертикальном столбце, либо в горизонтальной строке, в зависимости от значения свойства Orientation. Если в элемент управления StackPanel добавлено больше элементов управления, чем может быть отображено по ширине StackPanel, лишние элементы обрезаются и не отображаются.
Значение по умолчанию является растягиванием и для HorizontalAlignment, и для VerticalAlignment содержимого, содержащегося в StackPanel.
Элементы панели не получают фокус по умолчанию. Чтобы заставить элемент панели получать фокус, установите для свойства Focusable значение true.
StackPanel реализует интерфейс IScrollInfo для поддержки логической прокрутки. Логическая прокрутка используется для прокрутки к следующему элементу в логическом дереве. Это отличается от физической прокрутки, при которой содержимое прокручивается с определенным физическим шагом в заданном направлении. Если вместо логической прокрутки требуется физическая, включите элемент хоста StackPanel в ScrollViewer и установите его свойство CanContentScroll в значение false.
В этом примере демонстрируется создание StackPanel.
<Window x:Class="LayoutDemo.StackPanelWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackPanelWindow" Height="300" Width="300">
<StackPanel Orientation="Vertical">
<Label>Label</Label>
<TextBox>TextBox</TextBox>
<CheckBox>CheckBox</CheckBox>
<CheckBox>CheckBox</CheckBox>
<ListBox>
<ListBoxItem>ListBoxItem One</ListBoxItem>
<ListBoxItem>ListBoxItem Two</ListBoxItem>
</ListBox>
<Button>Button</Button>
</StackPanel>
</Window>
|
WrapPanel
Элемент управления WrapPanel аналогичен элементу управления StackPanel в том, что в нем элементы управления располагаются в столбце или в строке в зависимости от свойства Orientation. В дополнение к подобному расположению, элемент управления WrapPanel поддерживает возможность переноса в следующий столбец или строку для содержащихся в нем элементов управления. Таким образом, если в элемент управления WrapPanel добавлено больше элементов, чем может быть отображено по ширине WrapPanel, они переносятся в дополнительный столбец или строку.
В следующем примере показано, как создать WrapPane.l
<Window x:Class="LayoutDemo.WrapPanelWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WrapPanelWindow" Height="300" Width="300">
<WrapPanel>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
<Button Width="100" Margin="5">Button</Button>
</WrapPanel>
</Window>
|
И напоследок приведём код главного окна, который по нажатию кноаки запускает, созданные выше окна, демонстрирующие различные контейнеры компоновки в WPF.
<Window x:Class="LayoutDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="240" Width="500">
<StackPanel>
<Button Content="Stack Panel" Click="ShowStackPanel" Margin="5" />
<Button Content="Wrap Panel" Click="ShowWrapPanel" Margin="5" />
<Button Content="Canvas" Click="ShowCanvas" Margin="5" />
<Button Content="Dock Panel" Click="ShowDockPanel" Margin="5" />
<Button Content="Grid" Click="ShowGrid" Margin="5" />
</StackPanel>
</Window>
|
Комментариев нет:
Отправить комментарий