Главная » C#, Windows Runtime, XAML, Разработка для Windows 8 » Элементы компоновки Metro

0

Начнем  обзор  элементов  управления  со  специального  набора   элементов, позволяющих компоновать интерфейс страницы, которая состоит из множества элементов. Возможно, Вы обратили внимание на то, что родительским элементов в  любой странице является элемент  Page.  Класс  Page,  на  основе которого в XAML формируется  соответствующий элемент, является наследником класса UserControl, который обладает замечательным свойством Content. Это свойство может  принимать  любой  UIElement,  имеющий  графическое  представление, и  наполняет  этим  элементом  объект  типа   UserControl.  Проблема  состоит в том, что свойство Content представлено в единственном экземпляре и может содержать ссылку только на один элемент. Вот почему первое, что необходимо создать внутри любого из элементов Page, — это контейнер, который способен содержать  любое  количество  визуальных  элементов  и  отображать   их  по определенному правилу (компоновать элементы).

Естественно, выбирая тот или иной контейнер, нужно быть готовым к тому, что он не удовлетворит все нужды разработчика. Поэтому основной контейнер часто включает контейнеры другого типа, а те, в свою очередь, — другие контейнеры. Поэтому, чтобы спроектировать  интерфейс, необходимо точно знать, что Вы хотите получить в конечном итоге, а также знать возможности всех существующих контейнеров. Рассмотрим основные из них.

Перед  описанием первого элемента компоновки  (контейнера)  отметим, что все эти элементы находятся в пространстве имен  Windows.UI.Xaml.Controls и  наследуются  от  класса  Panel.  Именно  этот  класс  определяет  коллекцию Children, которая может содержать любое количество объектов типа UIElement.

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

Самый «плохой» элемент компоновки — это Canvas. Он позволяет размещать элементы управления с привязкой к  абсолютным, явно  заданным позициям относительно   контейнера.   И   именно   в    абсолютных   позициях   состоит его   недостаток.   Несомненно,   разрабатывая   приложения   Windows   Forms, разработчики привыкли именно к абсолютным позициям элементов управления, но  в  стиле   Metro  подобное  размещение  элементов  управления  считается недопустимым, так как одним из требований стиля Metro является возможность работы приложения на любых устройствах с любым разрешением и ориентацией экрана.

Это означает, что разработчик не может полагаться на размер окна.  Тем не менее, существуют ситуации, когда использование элемента  Canvas наиболее оптимально.

Рассмотрим пример использования элемента Canvas:

<Canvas Background="{StaticResource ApplicationPageBackgroundBrush}">

<Button Content="Hello" Canvas.Top="100" Canvas.Left="100"></Button>

</Canvas>

В этом примере мы создаем кнопку, которая привязана к координатам экрана (100,100). Обратите внимание, что позиция элемента относительно канвы была задана с помощью зависимых свойств Top и Left.

Обычно, если используется элемент управления Canvas, элементами управления устанавливаются  еще  два  «плохих»  свойства  —  Width  и  Height,  которые позволяют задать длину и ширину элемента управления.

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

Один  из  простейших  элементов  компоновки  —  StackPanel.  Этот   элемент располагает все дочерние элементы в одну строку или колонку.

Рассмотрим пример, отображающий несколько кнопок внутри StackPanel:

<StackPanel x:Name="LayoutRoot">

<Button Content="Button 1"></Button>

<Button Content="Button 2"></Button>

<Button Content="Button 3"></Button>

<Button Content="Button 4"></Button>

</StackPanel>

Как видно, по умолчанию StackPanel располагает элементы по вертикали. При этом в Silverlight кнопкам  устанавливалась длина  таким образом, чтобы они могли заполнить все пространство  StackPanel. В Windows Runtime это не так. Кнопки занимают лишь  столько места, сколько  необходимо. Но если нужно растянуть  кнопку  на  всю длину  StackPanel, то  ей  устанавливается свойство HorizontalAligment в Stretch:

<StackPanel x:Name="LayoutRoot"

Background="{StaticResource ApplicationPageBackgroundBrush}">

<Button Content="Button 1" HorizontalAlignment="Stretch"></Button>

<Button Content="Button 2" HorizontalAlignment="Stretch"></Button>

<Button Content="Button 3" HorizontalAlignment="Stretch"></Button>

<Button Content="Button 4" HorizontalAlignment="Stretch"></Button>

</StackPanel>

Чтобы изменить расположение элементов с вертикального на горизонтальное,

элемент StackPanel обладает свойством Orientation:

<StackPanel x:Name="LayoutRoot" Background="White"

Orientation="Horizontal">

<Button Content="Button 1"></Button>

<Button Content="Button 2"></Button>

<Button Content="Button 3"></Button>

<Button Content="Button 4"></Button>

</StackPanel>

Естественно, описанное выше поведение элемента компоновки StackPanel может показаться не очень удобным. Поэтому чтобы получить все его преимущества, необходимо комбинировать его  базовые возможности с  установкой набора свойств StackPanel и внутренних элементов.

Вот некоторые из полезных свойств:

·                   HorizontalAlignment    —    определяет   позиционирование    дочерних элементов контейнера, когда доступно дополнительное пространство по горизонтали. Может принимать одно из следующих значений: Left, Right, Center или Stretch (по умолчанию);

·                   VerticalAlignment — определяет позиционирование дочерних элементов контейнера, когда доступно дополнительное пространство по вертикали. Может принимать одно из четырех  значений: Top, Bottom, Center или Stretch (по умолчанию);

·                   Margin  —  позволяет  задать  дополнительное  место  вокруг  элемента управления. Этот  параметр  способен  принимать  значения, задающие расстояние от каждой из границ элемента;

·                   MinWidth — устанавливает минимальные размеры элемента (длину);

·                   MinHeight — устанавливает минимальные размеры элемента (ширину);

·                   MaxWidth — устанавливает максимальные размеры элемента (длину);

·                   MaxHeight — устанавливает максимальные размеры элемента (ширину);

·                   Padding  —  задает отступы  внутри  элемента управления,  отделяя его содержимое от границ. Это свойство можно использовать для внутренних элементов StackPanel.

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

Элемент  управления  Grid  является  одним  из  наиболее  мощных  элементов компоновки. Фактически он позволяет разбить все доступное пространство на набор ячеек, задавая определенное  количество столбцов и строк. При этом для отображения элемента в  той или иной ячейке разработчик должен явно указать ее номер.  Ниже показан небольшой пример использования элемента компоновки Grid. Тут мы специально задали свойство  ShowGridLines,  чтобы видеть размер ячеек:

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

<Grid.RowDefinitions>

<RowDefinition></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

<ColumnDefinition></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Content="Button 1" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>

<Button Content="Button 2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>

<Button Content="Button 3" Grid.Row="1" Grid.Column="2"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Button>

</Grid>

Ниже показан результат использования элемента компоновки Grid:

Рис. 2.6.

Естественно, использование элемента Grid так, как показано выше,  не очень эффективно. Поэтому для приведения интерфейса к более  привычному виду разработчик  может   воспользоваться  свойствами,   описанными  в   разделе, посвященном  StackPanel.  Кроме  этого,  разработчик  может  задать  размеры колонок и строк одним из трех способов:

·                   Абсолютные  размеры  —  этот  способ  наименее  интересен,  так  как позволяет задавать длину и ширину колонок явно, что не подходит для Silverlight;

·                   Автоматические размеры — для установки автоматических  размеров используется  специальное  значение  Auto,  которое  выделяет  столько места, сколько необходимо для отображения содержимого. Ниже показан пример с использованием данного способа:

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Content="Button 1" Grid.Row="0" Grid.Column="0"></Button>

<Button Content="Button 2" Grid.Row="0" Grid.Column="1"></Button>

<Button Content="Button 3" Grid.Row="1" Grid.Column="2"></Button>

</Grid>

·                   Пропорциональные  размеры  —  этот  способ  установки   размеров позволяет  установить  пропорции,  в  соответствии  с   которыми  будут определяться размеры. Так, пример ниже демонстрирует разбиение места для строк в соотношении 1 к 2, а место для столбцов — в соотношении 1 к 2 для второго и третьего столбцов по отношению к первому:

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

<Grid.RowDefinitions>

<RowDefinition Height="*"></RowDefinition>

<RowDefinition Height="2*"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

<ColumnDefinition Width="2*"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Button Content="Button 1" Grid.Row="0" Grid.Column="0"></Button>

<Button Content="Button 2" Grid.Row="0" Grid.Column="1"></Button>

<Button Content="Button 3" Grid.Row="1" Grid.Column="2"></Button>

</Grid>

Следующая интересная функция  Grid  —  возможность слияния  колонок  или строк. Рассмотрим следующий пример:

<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

</Grid.ColumnDefinitions>

<TextBlock Text="Employee" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" FontSize="16" FontWeight="Bold" Margin="5">

</TextBlock>

<TextBlock Text="First Name:" Grid.Row="1" Grid.Column="0" Margin="5"></TextBlock>

<TextBox Grid.Column="1" Grid.Row="1" MinWidth="100" Margin="5"></TextBox>

<TextBlock Text="Last Name:" Grid.Row="2" Grid.Column="0" Margin="5"></TextBlock>

<TextBox Grid.Column="1" Grid.Row="2" MinWidth="100" Margin="5"></TextBox>

<TextBlock Text="EMail:" Grid.Row="3" Grid.Column="0" Margin="5"></TextBlock>

<TextBox Grid.Column="1" Grid.Row="3" MinWidth="100" Margin="5"></TextBox>

<Button Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Content="Send" Margin="5" HorizontalAlignment="Center" Padding="5">

</Button>

</Grid>

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

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

В отличие от Silverlight, в WindowsRuntime элемент WrapGrid разработан таким образом,  чтобы  использоваться  в  элементах   типа   ItemsControl  (ListView, GridView и т.д.). Использование этого элемента мы рассмотрим дальше.

Сергей Лутай, Сергей Байдачный, Windows 8 для C# разработчиков

По теме:

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