Опубликован: 15.06.2011 | Доступ: свободный | Студентов: 704 / 58 | Оценка: 4.25 / 4.00 | Длительность: 14:09:00
Лекция 11:

Silverlight. Элементы управления

Аннотация: Описание основных элементов управления, использующиеся в Silverlight проекте. Элементы позиционирования, группировки (Canvas, Stackpanel, Grid и т.д), элементы формы (TextBox, Button и т.д), элементы работы с данными ( ListBox, DataGrid, Data Pager и т.д), функциональные элементы управления (Poupup, Border, Image, MediaElement).

Элементы позиционирования, группировки

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

К данным элементам относятся:

  • Canvas
  • StackPanel
  • Grid
  • DockPanel
  • WrapPanel
  • TabControl

Canvas

Canvas – наиболее часто используемый контейнер (Рис 22.1), представляет из себя прямоугольную форму. Имеет задаваемую высоту (Height) и ширину (Width). Может располагаться как на форме UserControl – а, так и в других контейнерах или на Canvas. Canvas – наиболее простой контейнер, который позволяет абсолютно располагать дочерние элементы.

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

Рис. 22.1. Пример элемента управления Canvas

XAML код элемента Canvas представленного на Рис. 22.1:

<UserControl x:Class="chapter3.CanvasDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc= <ref src="http://schemas.openxmlformats.org/markupcompatibility/2006" type="url"/> mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot">
<Button Canvas.Left="10" Canvas.Top="20"
Content="Button at (10,20)"/>
<TextBlock Text="Outer Canvas at (180,10)"
Canvas.Left="180" Canvas.Top="10" FontSize="26"/>
<Canvas Canvas.Top="60" Canvas.Left="10"
Background="LightSkyBlue" Width="300" Height="100">
<TextBlock Text="Nested Canvas starts at (10,60)"
Canvas.Left="0" Canvas.Top="0"/>
<Button Canvas.Left="10" Canvas.Top="50"
Content="Nested Canvas Button at (10,50)"/>
</Canvas>
</Canvas>
</UserControl>

StackPanel

StackPanel – контейнер, который используется в случае, когда необходимо, чтобы дочерние элементы шли один за другим, например в виде списка или каких либо последовательно используемых элементов (Рис 22.2).

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

Рис. 22.2. Пример элемента управления StackPanel

XAML код элемента StackPanel представленного на Рис. 22.2:

<UserControl x:Class="chapter3.StackPanelDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/
2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel x:Name="LayoutRoot" Background="White"
Orientation="Vertical">
<TextBlock Margin="0,10" Text="Vertical and Horizontal
(nested) oriented StackPanels Example"/>
<StackPanel Background="LightSkyBlue" Orientation="Horizontal">
<TextBlock Text="Enter user id: "/>
<TextBox Width="200" Height="20" VerticalAlignment="Top"/>
</StackPanel>
</StackPanel>
</UserControl>

Grid

Grid – табличная форма представления контейнера. Можно разметить на форме определенное количество столбцов и рядов, и располагать элементы управления в определенных ячейках. Четыре свойства отвечают за расположение содержимого в элементе управления Grid ( таблица 22.1).

Таблица 22.1. Свойства класса System.Windows.ControlsGrid
Свойство Тип Описание
Grid.Row Int 32 Возвращает или задает значение, указывающее, дочернее содержимое какой строки элемента управления Grid должно отобразиться. У первой строки индекс равен 0. Значение по умолчанию 0.
Grid.Column Int 32 Возвращает или задает значение, указывающее столбец, в котором должно появиться дочернее содержимое объекта Grid У первого столбца индекс равен 0. Значение по умолчанию 0.
Grid.RowSpan Int 32 Возвращает или задает значение, определяющее общее количество строк, которые заполняет дочернее содержимое в элементе управления Grid. Значение по умолчанию 1.
Grid.ColumnSpan Int 32 Возвращает или задает значение, определяющее общее количество столбцов, которые заполняет дочернее содержимое в элементе управления Grid. Значение по умолчанию 1.

На рис 11.3. наглядно показано как заполнятся содержание элемента управления Grid.

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

Рис. 22.3. Пример элемента управления Grid

XAML код элемента Grid представленного на Рис. 22.3:

<UserControl x:Class="chapter3.GridDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markupcompatibility/
2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Height="300" Width="400">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Background="Beige">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center" Text="Row = 0, Column = 0"/>
</Border>
<Border Grid.Row="0" Grid.Column="1" Background="BurlyWood">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center" Text="Row = 0, Column = 1"/>
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
Background="DarkKhaki">
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center" >
<TextBlock Text="Row = 0, Column = 1"/>
<TextBlock HorizontalAlignment="Center"
Text="ColumnSpan = 2"/>
</StackPanel>
</Border>
</Grid>
</UserControl>