Основные элементы управления

Canvas

Элемент Canvas – предоставляет наиболее простой вариант разметки. Он может быть использован для абсолютного позиционирования элементов с использованием координат. Мы позиционируем элементы на Canvas, используя прикрепленные свойства (AttachedProperties). Прикрепленные свойства позволяют родительскому элементу расширять свойства размещенного на нем элемента управления (в нашем случае Button). Мы можем разместить несколько кнопок Button на Canvas, например, таким образом:

<Canvas>
<Button Canvas.Top="50" Canvas.Left="50"
Content="Кнопка 1" FontSize="18" Width="150" Height="75" />
<Button Canvas.Top="150" Canvas.Left="20"
Content="Кнопка 2" FontSize="18" Width="150" Height="75" />
<Button Canvas.Top="85" Canvas.Left="80"
Canvas.ZIndex="-1" Content="Кнопка 3" FontSize="18"
Width="150" Height="75" />
</Canvas>

При запуске приложения (F5) увидим:

Как видно, элементы позиционированы абсолютным образом. Обратите внимание, что для одной из нопок указано прикрепленное свойство ZIndex, которое указывает как один элемент перекрывает другой элемент. Элемент Canvas полезен, когда элементы внутри не должны перемещаться, окно приложения менять ориентацию, а также, когда вам необходимо по тем или иным причинам позиционировать элементы интерфейса приложения абсолютным образом. В противном случае, работать c Canvas может быть сложнее, чем с такими элементами, как StackPanel или Grid.

StackPanel

Элемент StackPanel – предоставляет вариант разметки, элементы, помещенный в который, располагаются в стек горизонтально или вертикально (по умолчанию – вертикально). Сделаем пример из трех кнопок Button:

<StackPanel>
<Button Margin="10" Content="Кнопка 1"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 2"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 3"
FontSize="18" Width="130" Height="75" />
</StackPanel>

При запуске приложения (F5) увидим:

Или, если изменить ориентацию на горизонтальную (отличие в коде – только атрибут Orientation элемента StackPanel):

<StackPanel Orientation="Horizontal" >
<Button Margin="10" Content="Кнопка 1"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 2"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 3"
FontSize="18" Width="130" Height="75" />
</StackPanel>

При запуске приложения (F5) увидим:

Элемент StackPanel предоставляет простой способ разместить элементы один за другим вертикально или горизонтально, без указания позиционирования элемента внутри контейнера.

Grid

Элемент Grid – позволят позиционировать элементы внутри себя максимально гибко. Элемент Grid предоставляет возможность размещать элементы, используя строки и столбцы. Использование XAML элемента Grid отличается от использования элемента

при веб-разработке, где контент располагается внутри тегов и

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

<Grid ShowGridLines="True" >
<Grid. RowDefinitions >
<RowDefinition Height="90" />
<RowDefinition Height="90" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>

<Grid. ColumnDefinitions >
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>

<Button Grid.Column="0" Grid.Row="0"
Content="Кнопка 1" FontSize="18"
Width="130" Height="75" />
<Button Grid.Column="2" Grid.Row="0"
Margin="10"
Content="Кнопка 2" FontSize="18" Width="130"
Height="75" />
<Button Grid.Column="1" Grid.Row="2"
Margin="10"
Content="Кнопка 3" FontSize="18" Width="130"
Height="75" />

</Grid>

Мы определили элемент Grid с 3 строками и 3 столбцами с определенной шириной и высотой. Далее, элементы кнопки Button позиционируются внутри элемента Grid с использованием присоединённых свойств. Результат запуска программы будет выглядеть следующим образом:

Обратите внимание, как присоединенные свойства кнопки Button (Grid.Column и Grid.Row) указывают, где кнопка располагается в контейнере.

В работе с дизайном интерфейса большую помощь может оказать визуальный редактор, встроенный в Visual Studio, и Expression Blend. Оба редактора позволяют визуально отредактировать определения столбцов и строк, генерируя XAML-код.

Варианты разметки и элементы управления Pivot и Panorama

Платформа Windows Phone имеет доступные только для неё варианты разметки, представленные следующими элементами управления:

• Pivot
• Panorama

Эти элементы управления представляют собой часть Metro-дизайна, о котором кратко упоминалось в первой части.
Это настолько важные варианты разметки, что в поставке средств разработки присутствует два специальных шаблона: Windows Phone Pivot Application и Windows Phone Panorama Application. Мы ещё к ним вернёмся, сейчас же попробуем добавить элементы управления Pivot и Panorama в уже существующее приложение ExploreBaseControls.

Pivot

Двойным щелчком по файлу MainPage.xaml перейдем к его редактированию. В редакторе XAML кода удалим всё содержимое основного элемента Grid c x:Name LayoutRoot:

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" >
<Grid. RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<!--TitlePanel contains the
name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0"
Margin="12,17,0,28" >
<TextBlock x:Name="ApplicationTitle"
Text="MY APPLICATION"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="page name" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel"
Grid.Row="1" Margin="12,0,12,0" >
</Grid>
</Grid>

Так, что XAML код станет выглядеть следующим образом:

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name="LayoutRoot" Background="Transparent">

 

</Grid>

Теперь нам надо добавить элемент управления Pivot. По умолчанию, он не включен в Toolbox с элементами управления в Visual Studio, также он не добавлен в доступное XAML пространство имен в используемом нами шаблоне.

Исправим это, одновременно, научившись добавлять новые пространства имен в XAML файл.

Чтобы добавлять элемент Pivot на страницу приложения, надо добавить в проект ссылку на библиотеку с этим элементом управления: Microsoft.Phone.Controls

Перейдите к заголовку XAML файла MainPage.xaml:

<phone:PhoneApplicationPage

x:Class="ExploreBaseControls.MainPage"

xmlns=

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

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

xmlns:phone="clr-namespace:Microsoft.Phone.

Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;

assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc=

"http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True" >

После строчки

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

нажмите Enter и в новой строке введите:

xmlns:controls=

система IntelliSense добавит кавычки и отобразит список доступных ссылок:

выберите Microsoft.Phone.Controls (Microsoft.Phone.Cotrols).

В результате строчка станет выглядеть следующим образом:

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

и корневой XAML элемент файла MainPage.xaml станет выглядеть следующим образом:

<phone:PhoneApplicationPage
x:Class="ExploreBaseControls.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True" >

Сохраните файл и соберите проект (Ctrl+Shift+B). Это нужно, чтобы новое пространство имён гарантировано добавилось в систему IntelliSense.

Теперь мы готовы добавлять элемент управления и разметки Pivot в наше приложение.

Двойным щелчком по файлу MainPage.xaml перейдем к его редактированию. В редакторе XAML кода перейдем к основному элементу Grid c x:Name LayoutRoot, который должен выглядеть следующим образом:

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" >

</Grid>

Внутри этого элемента напишем:

Система IntelliSense покажет нам, какие элементы доступны:

Мы видим, что в этом пространстве имён доступны элементы управления Pivot и Panorama и вспомогательные элементы PivotItem и PanoramaItem.

Добавим в XAML код элемент управления Pivot и внутрь его 3 элемента управления PivotItem, способом описаным выше, так, что XAML код будет выглядет следующим образом:

<controls:Pivot Title="МОЁ ПРИЛОЖЕНИЕ">
<controls:PivotItem Header="первая">

</controls:PivotItem>

<controls:PivotItem Header="вторая">

</controls:PivotItem>

<controls:PivotItem Header="третья">

</controls:PivotItem>
</controls:Pivot>

Запустите приложение (F5) и посмотрите, как работает элемент управления Pivot.

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

Добавим на каждую из трех страниц ранее уже использующийся нами XAML код с разметкой Canvas, StackPanel и Grid соответственно. Таким образом код XAML будет выглядеть следующим образом:

<controls:Pivot Title="МОЁ ПРИЛОЖЕНИЕ" >
<controls:PivotItem Header="первая" >
<Canvas>
<Button Canvas.Top="50" Canvas.Left="50"
Content="Кнопка 1" FontSize="18" Width="150" Height="75" />
<Button Canvas.Top="150" Canvas.Left="20"
Content="Кнопка 2" FontSize="18"
Width="150" Height="75" />
<Button Canvas.Top="85" Canvas.Left="80"
Canvas.ZIndex="-1" Content="Кнопка 3" FontSize="18"
Width="150" Height="75" />
</Canvas>
</controls:PivotItem>

<controls:PivotItem Header="вторая" >
<StackPanel>
<Button Margin="10" Content="Кнопка 1"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 2"
FontSize="18" Width="130" Height="75" />
<Button Margin="10" Content="Кнопка 3"
FontSize="18" Width="130" Height="75" />
</StackPanel>
</controls:PivotItem>

<controls:PivotItem Header="третья" >
<Grid ShowGridLines="True" >
<Grid. RowDefinitions >
<RowDefinition Height="90" />
<RowDefinition Height="90" />
<RowDefinition Height="90" />
</Grid.RowDefinitions>

<Grid. ColumnDefinitions >
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>

<Button Grid.Column="0" Grid.Row="0"
Content="Кнопка 1" FontSize="18" Width="130"
Height="75" />
<Button Grid.Column="2" Grid.Row="0"
Margin="10" Content="Кнопка 2" FontSize="18"
Width="130" Height="75" />
<Button Grid.Column="1" Grid.Row="2"
Margin="10"
Content="Кнопка 3" FontSize="18" Width="130"
Height="75" />

</Grid>
</controls:PivotItem>
</controls:Pivot>

Запустите приложение (F5) и посмотрите, как работает комбинация элемента управления/разметки Pivot с другими элементами управления/разметки.

 

Итак, мы научились добавлять элемент управления Pivot и протестировали комбинацию элемента управления/разметки Pivot с «классическими» элементами управления/разметки, одновременно, создав «классическое» Pivot-приложение, которое представляет одни и те же данные разными способами.

Panorama

Двойным щелчком по файлу MainPage.xaml перейдем к его редактированию. В редакторе XAML кода удалим всё содержимое основного элемента Grid c x:Name LayoutRoot, как в предыдущем случае, для элемента управления Pivot.

Поскольку мы уже добавили необходимое пространство имён в XAML файл, можно сразу добавить элемент управления Panorama и 3 элемента управления PanoramaItem внуть пустого теперь элемента Grid c x:Name LayoutRoot, который должен выглядеть перед добавлением кода, следующим образом:

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" >

</Grid>

После добавления элементов управления, то же место в XAML коде должно выглядеть следующим образом:

<!--LayoutRoot is the root grid where

all page content is placed-->

<Grid x:Name="LayoutRoot"

Background="Transparent">

<controls:Panorama

Title="моё приложение">

<controls:PanoramaItem

Header="первое">

</controls:PanoramaItem>

 

<controls:PanoramaItem

Header="второе">

 

</controls:PanoramaItem>

 

<controls:PanoramaItem

Header="третье">

 

</controls:PanoramaItem>

</controls:Panorama>

</Grid>

Запустите приложение (F5) и посмотрите, как работает элемент управления Panorama.

Чтобы завершить общий визуальный стиль приложения на базе элемента управления/разметки Panorama давайте добавим общее фоновое изображение.

Для этого, добавьте в проект графический файл с расширением PNG размером 1024x768 с названием PanoramaBackground.png, а затем добавьте в файл MainPage.xaml сразу же после

<controls:Panorama Title="моё приложение">

следующий XAML код, устанавливающий фоновым изображением панорамы файл PanoramaBackground.png:

<controls:Panorama.Background >
<ImageBrush ImageSource="PanoramaBackground.png" />
</controls:Panorama.Background>

Запустите приложение (F5) и посмотрите, как работает элемент управления Panorama с установленным фоновым изображением.

Чтобы сделать хороший пример приложения с использованием элемента управления/разметки Panorama правильным образом, удобно воспользоваться возможностями Expression Blend по созданию шаблонов представления и генерации примеров данных для режима дизайна, но эта тема выходит за рамки данного цикла статей. Курсы и пошаговые руководства по Expression доступны по ссылке: http://www.microsoft.com/design/toolbox/

Для простоты понимания мы просто добавим элементы управления в PanoramaItem, чтобы эмулировать пример приложения панорамы. Дизайн элементов возьмём из шаблона приложения панорамы и заполним текстом, исходя из концепции приложения-меню русского ресторана.

Можете сделать это самостоятельно или посмотреть на код, который идет вместе с этой статьёй. Если вы добавите дизайн творчески, то у вас при запуске приложения, получится что-то вроде:

Основные элементы управления

Итак, мы рассмотрели основные элементы управления, которые являются элементами разметки. Рассмотрим остальные основные элементы управления, доступные разработчику на Silverlight под Windows Phone. С некоторыми из них мы уже знакомы, так как активно использовали в наших примерах приложений.

Элемент управления	Краткое описание
Border	Предоставляет другому элементу управления рамку и/или фоновое изображение.
Button	Кнопка, при нажатии пользователем генерирует событие Click.
CheckBox	Представляет собой элемент управления – флажок. Может быть установлен или снят, опционально можно включить поддержку «неопределенного» состояния.
HyperlinkButton	Кнопка, отображающая ссылку. При нажатии переходи на ссылку, указанную в свойстве NavigateUri.
Image	Позволяет отобразить картинку.
ListBox	Отображает список элементов, которые могут выбираться пользователем. Контент может задаваться разнообразным количеством способов.
MediaElement	Позволяет проиграть аудио или видео.
PasswordBox	Специальный элемент для ввода пароля, скрывает ввод пользователя.
ProgressBar	Отображает текущий прогресс пользователю.
RadioButton	Позволяет пользователю выбрать только один вариант из нескольких. Сгруппированные элементы управления (один GroupName) позволяют выбрать только один вариант из группы.
ScrollViewer	Добавляет возможность прокручивания дочерним элементам.
Slider	Позволяет пользователю выбрать из нескольких последовательных вариантов. Позиция соотносится со значением свойства Value.
TextBlock	Позволяет отобразить простой текст, без возможности редактирования.
TextBox	Используется для ввода как короткого, так и многострочного текста.
Map	Отображает карту Bing
WebBrowser	Отображает отрендеренный HTML

Теперь посмотрим, как эти элементы выглядят, какие у них есть свойства. В нашем приложении ExploreBaseControls на странице MainPage.xaml удалите всё, что мы вставляли ранее внутрь элемента Grid:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" > </Grid>

После этого, воспользовавшись Toolbox перетяните элементы управления с него на дизайн-представление телефона, исследуйте их свойства в окне свойств, попробуйте собрать приложение и посмотреть, как они работают.

Для примера ниже приведён XAML код

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent" >
<ScrollViewer>
<StackPanel>
<Border Margin="10" Width="100" Height="100"
BorderThickness="2" CornerRadius="5"
BorderBrush="
{StaticResource PhoneAccentBrush}" />
<ProgressBar Name="MyProgressBar"
Maximum="10" ValueChanged=
"MyProgressBar_ValueChanged" />
<Slider Name="MySlider"
ValueChanged=
"MySlider_ValueChanged" />
<Button Margin="10" Width="150" Height="100"
Content="Button" Name=
"MyButton" Click="MyButton_Click" />
<CheckBox Margin="10"
Content="CheckBox"
Height="70" HorizontalAlignment="Center"
Name="MyCheckBox"
IsThreeState="True" />
<HyperlinkButton Margin="10"
Content="HyperlinkButton"
Height="30"
Name="MyHyperlinkButton" />
<Image Margin="10"
Height="150" Name="MyImage"
Stretch="Fill" Width="200"
Source="/ExploreBaseControls;component/
PanoramaBackground.png" />
<ListBox Name="MyListBox" >
<TextBlock Margin="10 0 0 0" > Строка 1</TextBlock>
<TextBlock Margin="20 0 0 0" > Строка 2</TextBlock>
<TextBlock Margin="40 0 0 0" > Строка 3</TextBlock>
<TextBlock Margin="10 0 0 0" > Строка 4</TextBlock>
<TextBox Height="70" Width="300" Name="MyTextBox"
Margin="0 10 0 0" />
</ListBox>
<PasswordBox Name="MyPasswordBox" />
<RadioButton GroupName="MyGroup"
Content="Опция 1" />
<RadioButton GroupName="MyGroup"
Content="Опция 2" />
<RadioButton GroupName="MyGroup"
Content="Опция 3" />
<RadioButton GroupName="MyGroup"
Content="Опция 4" />
</StackPanel>
</ScrollViewer>
</Grid>

И код, добавленный в файл MainPage.xaml.cs

private void MyButton_Click(object sender, RoutedEventArgs e)
{
MyProgressBar.Value += 1;
}

private void MySlider_ValueChanged
(object sender, RoutedPropertyChangedEventArgs< double > e)
{
MyProgressBar.Value = MySlider.Value;
}

private void MyProgressBar_ValueChanged
(object sender, RoutedPropertyChangedEventArgs< double > e)
{
MySlider.Value = MyProgressBar.Value;
}

Если установить Silverlight for Windows Phone Toolkit и добавить его в проект, то разработчик сможет использовать дополнительно следующие элементы управления:

Элемент управления	Краткое описание
AutoCompleteBox	Представляет собой TextBox с возможностью автоматического дополнения строки ввода по указанному списку.
ListPicker	Комбинация TextBoх, отображающего текущее значение с выпадающим списком из которого можно значение выбрать.
LongListSelector	Расширенная версия ListBox с групировкой и виртуализацией
ContextMenu	Контекстное меню.
DatePicker	Выбор даты.
TimePicker	Выбор времени.
ToggleSwitch	Текст с переключателем вкл/выкл
WrapPanel	Элемент разметки, реализующий перенос для дочерних элементов.