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

DockPanel

Элемент DockPanel - один из новых элементов-контейнеров который входит в Silverlight Toolkit и определяет область, в которой можно упорядочить дочерние элементы горизонтально или вертикально относительно друг друга. Для того что бы использовать этот элемент необходимо добавить ссылку (reference) Systems.Windows.Controls.dll, и добавить в XAML код строчку:

<UserControl x:Class="chapter3.DockPanelDemo"
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"
xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="500">

На Рис. 22.4продемонстрировано два различных примера заполнения элемента DockPanel со свойством LastChildFill ( Свойство LastChildFill получает или задает значение, указывающее растягивается ли последний дочерний элемент в DockPanel с целью заполнения оставшегося доступного пространства) и значение true (значение по умолчанию true ).

XAML код DockPanel - "1" (Рис 22.4.):

<c:DockPanel Height="200" Width="200" Grid.Column="0" Grid.Row="1">
<Button c:DockPanel.Dock="Left" Content="Left"/>
<Button c:DockPanel.Dock="Top" Content="Top"/>
<Button c:DockPanel.Dock="Right" Content="Right"/>
<Button c:DockPanel.Dock="Bottom" Content="Bottom"/>
<Button c:DockPanel.Dock="Bottom" Content="Last Child"/>
</c:DockPanel>

XAML код DockPanel - "2" (Рис 22.4.):

<c:DockPanel Height="200" Width="200" Grid.Column="1" Grid.Row="1">
<Button c:DockPanel.Dock="Top" Content="Top"/>
<Button c:DockPanel.Dock="Bottom" Content="Bottom"/>
<Button c:DockPanel.Dock="Left" Content="Left"/>
<Button c:DockPanel.Dock="Right" Content="Right"/>
<Button Content="Last Child"/>
</c:DockPanel>

Для закрепления дочернего элемента в другом направлении необходимо установить для свойства LastChildFill значение false, а также указать явное направление закрепления для последнего дочернего элемента (рис 22.5.).

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

<c:DockPanel Height="200" Width="200"
Grid.Column="2" Grid.Row="1"
LastChildFill="False">
<Button c:DockPanel.Dock="Top" Content="Top"/>
<Button c:DockPanel.Dock="Bottom" Content="Bottom"/>
<Button c:DockPanel.Dock="Left" Content="Left"/>
<Button c:DockPanel.Dock="Right" Content="Right"/>
<Button c:DockPanel.Dock="Top" Content="Inner Top"/>
<Button c:DockPanel.Dock="Bottom" Content="Inner Bottom"/>
</c:DockPanel>

WrapPanel

Элемент WrapPanel - один из новых элементов-контейнеров который входит в Silverlight Toolkit. Размещает дочерние элементы последовательно слева направо, разбивая содержимое до следующей строки. Последующее размещение происходит последовательно сверху вниз или справа налево, в зависимости от значения свойства Orientation. Для того что бы использовать этот элемент необходимо добавить ссылку (reference) Systems.Windows.Controls.dll, и добавить в XAML код строчку:

xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

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

<StackPanel>
<TextBlock Text="Horizontally Oriented WrapPanel Example"
Margin="5" FontWeight="Bold"/>
<c:WrapPanel Width="500" Height="250" Orientation="Horizontal">
<Image Width="150" Height="100" Margin="2" Source="res/1.jpg"/>
<Image Width="150" Height="100" Margin="2" Source="res/2.jpg"/>
<Image Width="150" Height="100" Margin="2" Source="res/3.jpg"/>
<Image Width="150" Height="100" Margin="2" Source="res/4.jpg"/>
<Image Width="150" Height="100" Margin="2" Source="res/5.jpg"/>
</c:WrapPanel>
</StackPanel>

TabControl

Элемент TabControl (Рис 22.7.) - представляет элемент управления, содержащий несколько элементов, которые совместно используют одно пространство на экране. Объект TabControl можно использовать, чтобы сократить использование пространства экрана и в то же время сделать так, чтобы приложение отображало большой объем данных. Объект TabControl состоит из нескольких объектов TabItem, которые совместно используют одно пространство на экране. Одновременно отображается только один элемент TabItem из TabControl. Когда пользователь выбирает TabItem, то содержимое данного объекта TabItem становится видимым, а содержимое других объектов TabItem скрывается. Для использования необходимо использовать пространство имен System.Windows.Controls и добавить XAML код к странице где собирается использоваться данный элемент:

xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

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

<UserControl x:Class="chapter3.TabControlDemo"
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"
xmlns:c="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Canvas x:Name="LayoutRoot" Background="White">
<c:TabControl Canvas.Left="20" Canvas.Top="40"
Width="300" Height="200">
<c:TabItem Header="Tab #1">
<Canvas Background="Red"></Canvas>
</c:TabItem>
<c:TabItem Header="Tab #2">
<Canvas Background="Green"></Canvas>
</c:TabItem>
<c:TabItem Header="Tab #3">
<Canvas Background="Blue"></Canvas>
</c:TabItem>
</c:TabControl>
</Canvas>
</UserControl>

Элементы формы

Пространство имен System.Windows включает ряд основных элементов управления, составляющих ядро каждого приложения Microsoft Silverlight.

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

Кнопочные элементы управления

Button

В Silverlight кнопка реализуется с помощью элемента управления Button (Рис 22.9-1). Кнопка реагирует на ввод пользователя с таких устройств ввода, как мышь, клавиатура или стилус, формируя событие Click. XAML код простой кнопки:

<Button Canvas.Left="74" Canvas.Top="20" Width="100"
Content="Press me!" x:Name="button"
Click="Button_Click" />

С# код события Button_Click:

private void Button_Click(object sender, RoutedEventArgs e)
{
//Put your custom code here
}

HyperLinkButton

HyperlinkButton (Рис 22.9 - 3) обеспечивает на странице элемент с возможностью щелчка по нему для перехода по URI, заданному свойством NavigateUri (Uri перехода). XAML код гиперссылки:

<HyperlinkButton x:Name="hyperlinkButton"
Canvas.Left="45" Canvas.Top="20" Width="200"
Content="Click to visit Silverlight website"
NavigateUri="http://www.silverlight.net"
TargetName="_blank"/>

Свойство TargetName определяет, где будет открываться содержимое, располагающееся по заданному URL. Для вывода на экран содержимого URL доступны следующие опции:

RepeatButton

Элемент управления RepeatButton (Рис 22.9 -2) генерирует событие Click периодически с момента его нажатия и до момента отпускания. XAML код RepeatButton:

<RepeatButton Canvas.Left="73" Canvas.Top="20" Width="110"
Content="Press and hold" Click="RepeatButton_Click"/>

С# код события RepeatButton_Click:

private int currentValue = 0;
private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
currentValue++;
repeatButtonValue.Text = currentValue.ToString();
}

CheckBox

Элемент управления CheckBox (Рис 22.9 - 4) предоставляет пользователю опцию для выбора. Обычно он представляется в виде прямоугольника, в котором пользователь может установить или убрать флажок. Он используется, когда имеется ряд опций на выбор и можно выбрать несколько из них.

<CheckBox x:Name="checkBox1" Canvas.Left="25" Canvas.Top="20"
IsChecked="True" Content="Checked"/>
<CheckBox x:Name="checkBox2" Canvas.Left="25" Canvas.Top="40"
IsChecked="False" Content="Unchecked"/>
<CheckBox x:Name="checkBox3" Canvas.Left="25" Canvas.Top="60"
IsChecked="" IsThreeState="True" Content="Indeterminate"/>

RadioButton

Элемент управления RadioButton (Рис 22.9 – 5), подобно CheckBox используется для фиксирования выбора пользователя. Однако отличается от CheckBox тем, что обычно применяется в ситуациях, когда пользователь должен выбрать единственный вариант из ряда предлагаемых опций.

<RadioButton x:Name="radioButton1" GroupName="group1"
Canvas.Left="40" Canvas.Top="20" Content="Red"/>
<RadioButton x:Name="radioButton2" GroupName="group1"
Canvas.Left="40" Canvas.Top="40" Content="Green"/>
<RadioButton x:Name="radioButton3" GroupName="group1"
Canvas.Left="40" Canvas.Top="60" Content="Blue"/>
<RadioButton x:Name="radioButton4" GroupName="group1"
Canvas.Left="40" Canvas.Top="80" Content="Cyan"/>

TextBox

Элемент управления TextBox (Рис 22.10) обеспечивает пользователям область для ввода текста. В самой простой форме TextBox предоставляет область, в которую пользователь может ввести одну строку текста. Ключевые свойства элемента управления TextBox представлены в таблице 11.5.

XAML код элемента управления TextBox представленного на Рис. 22.10:

<TextBox Canvas.Top="30" Canvas.Left="120" Width="200"/>
<TextBox Canvas.Top="60" Canvas.Left="120" Height="150" Width="200"
AcceptsReturn="True" HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"/>

PasswordBox

Элемент управления PasswordBox (Рис 22.11) похож на TextBox элемент управления . PasswordBox во многих отношениях практически идентичен TextBox.

XAML код элемента управления PasswordBox представленного на Рис 22.11:

<StackPanel x:Name="LayoutRoot" Background="White">
<TextBlock Margin="30,10,0,0" Text="Enter Password"
FontWeight="bold"/>
<PasswordBox x:Name="EnterPassword" Margin="30,10,0,0"
PasswordChanged="EnterPassword_PasswordChanged" MaxLength="11"
Height="25" Width="150" HorizontalAlignment="Left" />
<TextBlock Text="Display Entered Password" Margin="30,10,0,0"
FontWeight="bold"/>
<TextBox x:Name="DisplayPassword" Margin="30,10,0,0"
HorizontalAlignment="Left" IsReadOnly="True" Height="25"
Width="150" />
</StackPanel>

C# код события EnterPassword_PasswordChanged:

private void EnterPassword_PasswordChanged(object sender,
RoutedEventArgs e)
{
DisplayPassword.Text = EnterPassword.Password;
}

RichTextBox

RichTextBox (Рис 22.12) - элемент управления редактированием форматированного текста, который поддерживает форматированный текст, гиперссылки, встроенные рисунки и прочее форматированное содержимое, можно использовать для отображения, ввода, форматирования и редактирования форматированного текста.

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

<RichTextBox TextWrapping="Wrap" IsReadOnly="False">
<Paragraph>
This is Paragraph 1.
</Paragraph>
<Paragraph
FontSize="16"
TextAlignment="Right"
FontFamily="Courier New">
<Underline>
This is right aligned formatted paragraph
<LineBreak/>
Second formatted line
</Underline>
</Paragraph>
<Paragraph>
This is inline image..
<InlineUIContainer>
<Image Source="res/5.jpg" Height="150" Width="200"
Stretch="UniformToFill"/>
</InlineUIContainer>
</Paragraph>
<Paragraph>
<LineBreak/>
Inserting Grid Panel to the RichTextBox
<LineBreak/>
<InlineUIContainer>
<Grid>
<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>
</InlineUIContainer>
</Paragraph>
</RichTextBox>

AutoCompleteBox

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

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

<UserControl x:Class="chapter3.AutoCompleteBoxDemo"
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"
xmlns:input="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Input"
d:DesignHeight="300" d:DesignWidth="400">
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBlock Text="Choose a state"/>
<input:AutoCompleteBox x:Name="stateSelection" Width="175"
HorizontalAlignment="Left"/>
</StackPanel>
</UserControl

C# код добавление элементов в список:

List<string> stateList = new List<string>();
stateList.Add("Alabama");
stateList.Add("Alaska");
// ...
stateList.Add("Wisconsin");
stateList.Add("Wyoming");
stateSelection.ItemsSource = stateList;

Элементы работы с данными

ListBox

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

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

<TextBlock FontWeight="Bold">
ListBox with Simple items (TextBlock)
</TextBlock>
<ListBox Canvas.Top="50" Canvas.Left="40" Width="200">
<ListBox.Items>
<ListBoxItem>
<TextBlock Text="Strategic Advisory"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Training"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Development"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Technical Publishing"/>
</ListBoxItem>
</ListBox. Items>
</ListBox>

ComboBox

Элемент управления ComboBox (Поле со списком) используется для представления списка доступных для выбора элементов. При этом отображается только выбранный элемент, но имеется выпадающее меню с полным списком доступных для выбора элементов.

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

<TextBlock FontWeight="Bold">
ComboBox with Simple items (TextBlock)
</TextBlock>
<ComboBox>
<ComboBox.Items>
<ComboBoxItem>
<TextBlock Text="Strategic Advisory"/>
</ComboBoxItem>
<ComboBoxItem>
<TextBlock Text="Training"/>
</ComboBoxItem>
<ComboBoxItem>
<TextBlock Text="Development"/>
</ComboBoxItem>
<ComboBoxItem>
<TextBlock Text="Technical Publishing"/>
</ComboBoxItem>
</ComboBox>

DataGrid

Элемент управления DataGrid разработан для облегчения задачи по отображению данных в формате таблицы. Это сетка данных, связанная с источником данных. Для работы с данным элементом необходимо подключить пространство имен System.Windows.Data и добавить в XAML код строчку:

xmlns:data="clrnamespace: System.Windows.Controls;assembly=System.Windows.Controls.Data"

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

<UserControl x:Class="chapter6.PagedCollectionViewDemo"
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/
markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
xmlns:data="clr-namespace:System.Windows.Controls;
assembly=System.Windows.Controls.Data">
<Grid x:Name="LayoutRoot" Background="White"
Width="400" Height="300">
<data:DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" >
<data:DataGrid.Columns>
<data:DataGridTextColumn Binding="{Binding Name}"
Header="Name" />
<data:DataGridTextColumn Binding="{Binding Email}"
Header="Email" />
<data:DataGridTextColumn Binding="{Binding City}"
Header="City" />
<data:DataGridTextColumn Binding="{Binding Pincode}"
Header="Pin Code" />
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>

Класс Employee:

public class Employee
{
public string Name { get; set; }
public string Email { get; set; }
public string City { get; set; }
public string State { get; set; }
public int Pincode { get; set; }
}

C# обработчик события PagedCollectionViewDemo_Loaded:

void PagedCollectionViewDemo_Loaded(object sender, RoutedEventArgs e)
{
Employee[] emps = new Employee[10];
emps[0] = new Employee();
emps[0].Name = "Ashish Ghoda";
emps[0].Email = "aghoda@TechnologyOpinion.com";
emps[0].City = "New Providence";
emps[0].Pincode = 07974;
emps[0].State = "New Jersey";
emps[1] = new Employee();
emps[1].Name = "Jay Nanavaty";
emps[1].Email = "jnanavaty@TechnologyOpinion.com";
emps[1].City = "Baroda";
emps[1].Pincode = 390023;
emps[1].State = "Gujarat";
emps[2] = new Employee();
emps[2].Name = "Kruti Vaishnav";
emps[2].Email = "kvaishnav@TechnologyOpinion.com";
emps[2].City = "Delhi";
emps[2].Pincode = 350025;
emps[2].State = "Delhi";
emps[3] = new Employee();
emps[3].Name = "Pratixa Ghoda";
emps[3].Email = "pghoda@TechnologyOpinion.com";
emps[3].City = "New Providence";
emps[3].Pincode = 07974;
emps[3].State = "New Jersey";
//PagedCollectionView
//Grouping
PagedCollectionView pgn = new PagedCollectionView(emps);
//Binding to the DataGrid
myDataGrid.ItemsSource = pgn;
}

Как видно из данного фрагмента кода список и он же источник данных создается вручную. В практическом занятии № 13 будет рассмотрено использование DataGrid с источником данных SQL Server 2008.

Функциональные элементы управления

TextBlock

Элемент управления TextBlock используется в приложениях Silverlight для отображения текста. В самом простом случае, для отображения текст достаточно применить TextBlock с заданным свойством Text.

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

<Border BorderBrush="Black" BorderThickness="1" 
     Canvas.Left="20" Canvas.Top="20">
<TextBlock Text="This is text that does not wrap"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" 
     Canvas.Left="20" Canvas.Top="60">
<TextBlock Text="This is text that wraps" TextWrapping="
     Wrap" Width="100"/>
</Border>
<Border BorderBrush="Black" BorderThickness="1" 
     Canvas.Left="20" Canvas.Top="130">
<TextBlock>
<Run FontSize="20" Text="This"/>
<Run FontSize="20" FontStyle="Italic" Text="is "/>
<Run FontSize="20" Text="text within a single"/>
<LineBreak/>
<Run Foreground="Red" FontSize="14" Text="
    TextBlock control."/>
</TextBlock>

Border

Элемент управления Border используется только для отрисовки рамки, фона или того и другого вокруг элемента.

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

<Border BorderThickness="10" Width="100" Height="100"
       CornerRadius="10">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFFF0000" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Button Content="BUTTON"/>
</Border>

Image

Элемент управления Image используется для отображения изображений. Он может принимать форматы файлов .bmp, .jpg и .png. Путь к изображению задается свойством Source. Если фактические размеры изображения отличаются от заданных для элемента управления Image (т.е. если имеется элемент Image размером 100 ? 100 и в него загружается .jpg-изображение 2000 ? 2000 пикселов), управлять поведением отображения можно с помощью свойства Stretch. Оно может принимать следующие значения:

MediaElement

Одно из наиболее важных применений Silverlight в Веб – обеспечение поддержки мультимедиа следующего поколения, которое может воспроизводиться на разных платформах. Для этого Silverlight поддерживает элемент управления MediaElement.

Элемент управления MediaElement поддерживает следующие форматы:

Видео

Аудио

Кроме этих форматов, элемент управления MediaElement также поддерживает списки воспроизведения ASX и протоколы HTTP, HTTPS и MMS.

На рис 11.20. изображен переход состояний медафайла при воспроизведении в зависимости от использованных свойств и методов.