Дизайн и разработка приложений Silverlight в Visual Studio 2008

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

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

Например:

<HyperlinkButton 
    Content="The Official Microsoft Silverlight Site" 
    NavigateUri="http://silverlight.net/" />

HyperlinkButton - это элемент управления с содержимым, т.е. он может иметь простое свойство Content, содержащее текст, который будет отображаться для гиперссылки, или его содержимое может быть намного более насыщенным и более привлекательным.

Например, если вы хотите, чтобы гиперссылка выглядела как рисунок, это очень просто реализовать, используя дочерний элемент <Hyperlink.Content>, в котором может располагаться изображение. Например:

<HyperlinkButton 
    NavigateUri="http://www.silverlight.net"
    TargetName="_blank">
  <StackPanel Width="230">
    <Image 
            Source="SL.png" 
            HorizontalAlignment="Left" 
            Stretch="Fill"/>
    <dataInput:Label 
            Height="16" 
            Content="The Official Microsoft Silverlight Site"/>
  </StackPanel>
</HyperlinkButton>

Теперь, когда приложение будет запущено, получится изображение, щелчок по которому обеспечит переход по заданному URL.

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

Если используется фреймовая структура, можно задавать имя используемого фрейма.

Стоит обратить внимание на то, что событие Click для HyperlinkButton формируется перед переходом по заданному URI. Это может быть очень полезным, потому что обеспечивает завершение любой предварительной обработки перед загрузкой нового содержимого.

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

Элемент управления Image используется для отображения изображений. Он может принимать форматы файлов .bmp, .jpg и .png. Путь к изображению задается свойством Source. Например:

<Image Source="sl.png" Stretch="Fill"/>

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

Часто изображение необходимо задать не во время разработки, указывая URI в XAML-коде, а определить его во время выполнения, возможно, как результат обращения к базе данных или чего-либо подобного. В таких случаях в качестве источника для элемента управления Image может использоваться класс BitmapImage (пространства имен System.Windows.Media.Imaging ). Далее приведен пример того, как это делается.

<Image x:Name="_image"/>

public Page1()
{
  InitializeComponent();
  Uri uri = new Uri("sl.jpg", UriKind.Relative);
  _image.Source = new BitmapImage(uri);
}

В данном случае создается новый объект Uri с использованием пути к изображению. Второй параметр в конструкторе - опция, определяющая, как должен вычисляться Uri. Используемый URI может быть относительным (в этом случае поиск заданного ресурса будет вестись в том же каталоге, в котором располагается компонент), абсолютным (в этом случае поиск заданного ресурса будет вестись напрямую, поэтому местоположение должно указываться с применением синтаксиса http://сервер/ресурс) или комбинацией первых двух.

Когда Uri создан, он может использоваться для создания нового BitmapImage, который определяется как источник для элемента управления Image.

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

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

<ListBox 
    SelectionChanged="ListBox_SelectionChanged"                  
    Height="94" 
    HorizontalAlignment="Left" 
    VerticalAlignment="Top" 
    Width="75">
  <ListBoxItem Content="1"/>
  <ListBoxItem Content="2"/>
  <ListBoxItem Content="3"/>
  <ListBoxItem Content="4"/>
  <ListBoxItem Content="5"/>
</ListBox>

Возможность выбора элементов, образующих ListBox, пользователем реализуется посредством события SelectionChanged (Выбранный элемент изменен) и свойства SelectedItem (Выбранный элемент). В предыдущем фрагменте XAML-кода обработкой события SelectionChanged занимался обработчик метода ListBox_SelectionChanged. Свойство SelectedItem возвращает object, а не ListBoxItem, потому что в ListBox могут размещаться разные типы содержимого. Поэтому SelectedItem необходимо приводить к ListBoxItem.

В ListBox может располагаться разное содержимое. Далее приведен пример, когда ListBox включает составные элементы, образованные компонентами StackPanel, каждый из которых содержит Image и TextBlock.

Код примера:

<ListBox 
    x:Name="_listbox"
    SelectionChanged="ListBox_SelectionChanged" 
    Margin="59,21,0,0" 
    Width="194" 
    Height="216">
  <StackPanel Orientation="Horizontal">
    <Image Height="100" Width="100" Source="1.jpg"/>
    <TextBlock 
        Text="Item 1" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Center"/>
  </StackPanel>
  <StackPanel Orientation="Horizontal">
    <Image Height="100" Width="100" Source="2.jpg"/>
    <TextBlock 
        Text="Item 2" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Center"/>
  </StackPanel>
</ListBox>

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

StackPanel s = _listbox.SelectedItem as StackPanel; 
TextBlock t = s.Children[2] as TextBlock; 
string strTest = t.Text;

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

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

Один из способов управления набором опций с возможностью единственного выбора - задать элементы управления RadioButton, соответствующие опциям, как элементы одного уровня в контейнере. Рассмотрим пример:

<StackPanel 
    Orientation="Vertical" 
    Background="Yellow" 
    Height="163" 
    HorizontalAlignment="Left" 
    VerticalAlignment="Top" 
    Width="179">
  <RadioButton Content="Option 1" IsChecked="true"/>
  <RadioButton Content="Option 2"></RadioButton>
  <RadioButton Content="Option 3"></RadioButton>
  <RadioButton Content="Option 4"></RadioButton>
  <StackPanel Orientation="Vertical" Background="White">
    <RadioButton Content="Option 5" IsChecked="true"/>
    <RadioButton Content="Option 6"></RadioButton>
    <RadioButton Content="Option 7"></RadioButton>
    <RadioButton Content="Option 8"></RadioButton>
  </StackPanel>
</StackPanel>

В данном XAML-коде имеется два контейнера StackPanel, один из которых расположен в другом. Первый контейнер содержит опции 1, 2, 3, и 4 ; второй - опции 5, 6, 7 и 8. В результате, пользователь может выбрать только одну из опций от 1 до 4 и только одну из опций от 5 до 8. Как это работает представлено на рис. 7.10

Кроме того, опции можно сгруппировать, задавая для каждого RadioButton свойство GroupName (Имя группы). В предыдущем примере в StackPanel располагались опции 1 -4, и Silverlight разрешал пользователю приложения выбирать только одну из них. Если потребовалось бы разделить этот набор опций на две группы, чтобы пользователь мог выбирать одну из опций 1 и 2, и одну из опций 3 и 4, вместо контейнера можно было бы использовать группы RadioButton.

<StackPanel Orientation="Vertical" Background="Yellow">
  <RadioButton Content="Option 1" IsChecked="true" GroupName="G1"/>
  <RadioButton Content="Option 2" GroupName="G1" />
  <RadioButton Content="Option 3" GroupName="G2" />
  <RadioButton Content="Option 4" GroupName="G2" />
  <RadioButton Content="Option 5" GroupName="G3" IsChecked="true"/>
  <RadioButton Content="Option 6" GroupName="G3" />
  <RadioButton Content="Option 7" GroupName="G3" />
  <RadioButton Content="Option 8" GroupName="G3" />
</StackPanel>

Аналогично элементам управления Button и CheckBox, RadioButton имеет свойство ClickMode, определяющее, какое действие пользователя приводит к формированию события Click. Его возможными значениями являются: Hover, при котором событие формируется уже от того, что пользователь проводит курсором по элементу управления; Press, при котором событие формируется по щелчку кнопки мыши по элементу управления; и Release, при котором кнопка мыши должна быть нажата, а потом отпущена, при нахождении курсора мыши на кнопке выбора. Также аналогично элементу управления CheckBox, состояние выбора отдельного RadioButton может быть проверено с помощью свойства IsChecked.

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

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

<TextBlock Text="1234" />

Размер текста можно менять, задавая свойство FontSize (в пикселах). Используемый шрифт определяется свойством FontFamily ; например, XAML-код для вывода текста шрифтом Arial Black размером 20 выглядел бы так:

<TextBlock Text="1234" FontFamily="Arial Black" FontSize="20"/>

Свойство FontStyle определяет, как будет выведен текст, курсивом или обычным шрифтом. Чтобы текст отображался курсивом, свойству FontStyle задается значение Italic:

<TextBlock 
Text="1234" 
FontFamily="Arial Black" 
FontSize="20" 
FontStyle="Italic"/>

Чтобы использовать обычный шрифт, можно задать свойству FontStyle значение Normal или просто оставить его незаданным.

Разрывы строк и использование разных шрифтов для отображения текста реализуется с помощью подэлементов TextBlock: <LineBreak> и <Run>. Как следует из его имени, <LineBreak> создает разрывы в тексте с переносом остального текста на новую строку. Однако TextBlock не является элементом управления для представления содержимого, как некоторые из элементов управления, которые были представлены в данной главе ранее. Поэтому если необходимо представить текст иначе, чем все остальное содержимое свойства Text, используется элемент управления Run:

<TextBlock Width="400" Text="My first text"> 
  <LineBreak/> 
  <Run>My Second Text</Run> 
  <LineBreak/> 
  <Run>My Third Text</Run> 
  <LineBreak/> 
  <Run>My Fourth Text</Run>
</TextBlock>

Элемент управления Run поддерживает те же свойства шрифта, размера, цвета и т.д., что и TextBlock. Таким образом, он предоставляет тот же уровень управления его содержимым, что и TextBlock. Это означает, что текст TextBlock и текст, отображаемый с помощью Run, полностью согласованы.

Silverlight руководствуется правилами замещения системных шрифтов, поэтому если шрифт представлен в системе, текст будет отображен этим шрифтом; если шрифт недоступен в системе, будет использоваться резервный шрифт, определенный операционной системой.

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

Элемент управления TextBox обеспечивает пользователям область для ввода текста. В самой простой форме TextBox предоставляет область, в которую пользователь может ввести одну строку текста. Чтобы элемент управления TextBox могли принимать многостроковый ввод, надо задать высоту или поместить их в контейнер, обеспечивающий ему нестандартную высоту. Затем свойству AcceptsReturn (Допускаются символы возврата каретки) потребуется задать значение True, благодаря чему элементы управления TextBox сможет принимать символы возврата каретки. Свойство Text такого TextBox возвращает объект типа String, в котором каждая строка будет отделена символом "\r".

Элементы управления TextBox позволяют выбирать подстроки Text и также обеспечивают возможность настроить то, как выглядит выбранный текст. Для задания или возвращения выбранного в настоящий момент текста используется свойство SelectedText (Выбранный текст). Начало выбранной подстроки можно получить с помощью свойства SelectionStart (Начало выбранной подстроки), ее длину - с помощью свойства SelectionEnd (Конец выбранной подстроки). При любом изменении выбора подстроки формируется событие SelectionChanged (Выбранный элемент изменен). Рассмотрим следующий пример:

Во-первых, XAML-код:

<TextBox 
    Height="100" 
    AcceptsReturn="True" 
    Text="ABCDEFGHIJKLMNOPQRSTUVWXYZ" 
    SelectionChanged="TextBox_SelectionChanged"/>

Здесь определяется событие SelectionChanged, для которого определен обработчик события TextBox_SelectionChanged. Рассмотрим:

private void TextBox_SelectionChanged(object sender, RoutedEventArgs e)
{
  TextBox t = sender as TextBox; 
  int st = t.SelectionStart; 
  int ln = t.SelectionLength; 
  string strT = t.SelectedText;
}

В данном случае, переменная st типа int содержит индекс начального символа выбранной подстроки (отсчитываемой от нуля), ln - длина выбранной подстроки, и strT - строка, содержащая выбранную подстроку. Итак, например, если выбрана подстрока, как показано на рис. 7.11, st будет равна 9, ln равна 8, и strT будет равна JKLMNOPQ.

Также в TextBox можно использовать разные шрифты, точно так же как это делается в TextBlock.

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

Очень похож на TextBox элемент управления PasswordBox (Поле пароля). PasswordBox во многих отношениях практически идентичен TextBox. С помощью свойства PasswordChar (Символ пароля) этого элемента управления можно задать символ, который будет использоваться вместо любого введенного символа для отображения нажатия клавиши. Например, PasswordBox, в котором вводимые символы заменяются символом #, описывается следующим XAML-кодом:

<PasswordBox PasswordChar="#" x:Name="pw"/>

Кроме того, следует отметить, что вводимое пользователем содержимое сохраняется в свойстве Password (Пароль), а не в свойстве Text, поэтому для получения ввода пользователя должно использоваться свойство Password.

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

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

При добавлении элемента управления TheDataGrid в окно редактирования XAML, получаем такой XAML-код:

<UserControl 
  xmlns:data=
    "clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  
  x:Class="BusinessApplication1.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <data:DataGrid 
        Name="TheDataGrid" 
        SelectionChanged="DataGrid_SelectionChanged" 
        SelectionMode="Extended">            
    </data:DataGrid>
  </Grid>
</UserControl>

private ProductContext _productContext = new ProductContext();
public MainPage()
{
  InitializeComponent();
  LoadOperation<Product> loadOp = 
    this._productContext.Load(this._productContext.GetProductQuery());
  this.TheDataGrid.ItemsSource = loadOp.Entities;
}

Метод _productContext.GetProductQuery() выбирает из базы данных AdventureWorks все содержимое таблицы Product.

В DataGrid возможны два режима выбора: одиночный, при котором можно выбирать по одной строке, и множественный, при котором при удержании клавиш Ctrl и/или Shift может быть выбрано несколько строк.

Эти режимы задаются с помощью свойства SelectionMode (Режим выбора), которое принимает значения DataGridSelectionMode.Single для одиночного выбора и DataGridSelectionMode.Extended для множественного.

Итак, для единичного выбора выбранные данные могут быть получены this.TheDataGrid.SelectedItem. Когда установлен режим множественного выбора, можно использовать свойство SelectedItems, возвращающее коллекцию списков:

System.Collections.IList listOfItems = this.TheDataGrid.SelectedItems;

В данном случае, свойство SelectedItems возвращает System.Collections.IList. После этого можно перебрать элементы этого списка.

Элементы управления Calendar и DatePicker

Возможность использования дат в приложениях Silverlight обеспечивается элементами управления Calendar (Календарь) и DatePicker (Элемент выбора дат). Элемент управления Calendar выводит на экран дни заданного месяца или месяцы заданного года и предоставляет кнопки со стрелками для перемещения по месяцам или годам. DatePicker сочетает это представление с текстовым полем, в которое пользователь может вводить дату в соответствующем формате, или выпадающим списком, в котором можно выбрать определенную дату (см. рис. 7.13).

Код XAML:

<controls:Calendar Name="d1"/>
<controls:DatePicker Name="d2"/>

Коллекция BlackoutDates (Недоступные даты) позволяет задавать диапазон дат, которые не могут быть выбраны. Эта коллекция содержит тип CalendarBlackoutDatesCollection (Коллекция диапазона дат календаря), в который могут добавляться диапазоны дат. Все даты, попадающие в этот диапазон, будут отображаться неактивными и, таким образом, не могут быть выбраны.

CalendarBlackoutDatesCollection _blackoutDates = d2.BlackoutDates;

Элемент управления DatePicker сочетает функциональность календаря с текстовым полем. Свойство Text этого поля содержит все, что пользователь вводит в качестве даты. Если невозможно выполнить синтаксический разбор введенных пользователем данных, формируется ошибка TextParseError (Ошибка синтаксического разбора текста). Визуальное представление элемента управления DatePicker включает текстовое поле с датой, и справа от него располагается значок, выбор которого обеспечивает отображение элемента управления Calendar для выбора даты. Когда пользователь щелкает этот значок, формируется событие CalendarOpened (Календарь открыт). Когда пользователь закрывает его, формируется событие CalendarClosed (Календарь закрыт). Элементы управления Calendar и DatePicker обеспечивают базовые средства для создания приложений, в которых ввод основывается на датах и которые могут отображать информацию календаря.

Существует ряд функциональных возможностей, общих для всех или большинства этих элементов управления, таких как обработка фокуса, обработка событий мыши, обработка событий клавиатуры.

Обработка фокуса

Элементы, которые могут принимать ввод, формируют события GotFocus и LostFocus. События GotFocus и LostFocus формируются каждый раз, когда пользователь переходит на или покидает элемент управления, либо наводя курсором мыши, либо используя клавишу Tab. Оба этих события являются событиями, передающимися вверх по иерархии (bubbling events). Это означает, что элемент управления принимает событие, но не обрабатывает его. Событие передается его родителю и так далее вверх по иерархии до тех пор, пока не будет перехвачено обработчиком события.

Обработка событий мыши

Элементы управления Silverlight формируют несколько событий мыши:

Кроме перечисленных событий для обеспечения максимального контроля могут использоваться методы CaptureMouse и ReleaseMouseCapture. Когда для элемента управления вызывается метод CaptureMouse, все события мыши направляются в этот элемент управления независимо от того, находится ли курсор мыши в его границах или нет. Метод ReleaseMouseCapture, как следует из его имени, возвращает механизм перехвата событий в нормальное состояние. Эти методы очень полезны для реализации перемещения объектов методом "drag-and-drop". Далее представлен пример использования этих событий и методов.

Использование событий мыши для реализации перемещения объектов методом "Drag-and-drop"

Ниже представлен XAML-документ, обеспечивающий прорисовку эллипсов на странице. Обратите внимание, что для всех эллипсов определены одни и те же обработчики событий мыши:

<Canvas Width="640" Height="480" Background="Wheat">
  <Ellipse 
      Canvas.Top="0" 
      Fill="Black" 
      Width="20" 
      Height="20" 
      MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
      MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
      MouseMove="Ellipse_MouseMove" />
  <Ellipse 
      Canvas.Top="40" 
      Fill="Black" 
      Width="20" Height="20" 
      MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
      MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
      MouseMove="Ellipse_MouseMove" />
  <Ellipse 
      Canvas.Top="80" 
      Fill="Black" 
      Width="20" Height="20" 
      MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
      MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
      MouseMove="Ellipse_MouseMove" />
  <Ellipse 
      Canvas.Top="120" 
      Fill="Black" Width="20" 
      Height="20" 
      MouseLeftButtonDown="Ellipse_MouseLeftButtonDown" 
      MouseLeftButtonUp="Ellipse_MouseLeftButtonUp" 
      MouseMove="Ellipse_MouseMove" />
</Canvas>

Теперь рассмотрим выделенный код. Во-первых, нам необходимы переменные для сохранения х и у координат курсора мыши в момент начала перемещения методом "drag-and-drop" и еще одна переменная для обозначения того, удерживается ли кнопка мыши в настоящий момент. Если курсор находится над любой из кнопок, и нажимается кнопка мыши, выполняется функция Ellipse_MouseLeftButtonDown.

double beginX = 0; 
double beginY = 0; 
bool isMouseDown = false;
private void Ellipse_MouseLeftButtonDown(object sender,  MouseButtonEventArgs e)
{
  Ellipse b = sender as Ellipse; 
  beginX = e.GetPosition(this).X; 
  beginY = e.GetPosition(this).Y; 
  isMouseDown = true; b.CaptureMouse();
}

Отправителем является универсальный объект, поэтому, прежде всего, необходимо привести его к типу эллипс. После этого используем аргумент MouseButtonEventArgs (Аргументы событий кнопки мыши) для получения текущих координат х и у и задания их как начальных значений. Затем, поскольку кнопка мыши удерживается нажатой, ее перемещения должны отслеживаться, поэтому переменной isMouseDown задается значение True. Наконец, мы хотим отслеживать события мыши для этого эллипса (любого из заданных) таким образом, чтобы даже если пользователь уводит курсор мыши с этого эллипса, он продолжал получать события.

Итак, поскольку пользователь двигает мышью, должно формироваться событие MouseMove. Оно обрабатывается функцией-обработчиком события Ellipse_MouseMove:

private void Ellipse_MouseMove(object sender, MouseEventArgs e)
{
  if (isMouseDown) 
  { 
    Ellipse b = sender as Ellipse; 
    double currX = e.GetPosition(this).X; 
    double currY = e.GetPosition(this).Y; 
    b.SetValue(Canvas.LeftProperty, currX); 
    b.SetValue(Canvas.TopProperty, currY); 
  }
}

Это событие формируется при прохождении курсора мыши по эллипсу, независимо от того, выполняется ли перемещение этого эллипса или нет. Но нас интересуют только варианты, когда пользователи перетягивает эллипс, а это, по определению, означает, что переменная isMouseDown имеет значение True. В этом случае мы получаем текущие координаты курсора мыши и используем их для задания присоединенных свойств Top и Left эллипса. В результате будет создан эффект перетягивания эллипса соответственно координатам курсора мыши.

Наконец, при отпускании удерживаемой кнопки мыши формируется событие MouseLeftButtonUp, перехватываемое функцией Ellipse_MouseLeftButtonUp:

private void Ellipse_MouseLeftButtonUp(object sender,
  MouseButtonEventArgs e) 
{ 
  Ellipse b = sender as Ellipse; 
  isMouseDown = false; 
  b.ReleaseMouseCapture(); 
}

Это обеспечивает возвращение переменной isMouseDown к исходному значению, и элемент управления, отслеживающий события мыши, прекращает делать это. В результате восстанавливается обычное поведение мыши, а эллипс остается передвинутым в другое место. Все это в действии можно увидеть на рис. 7.14.

На рисунке показано, как приложение выглядит в исходном состоянии. Если пользователь наведет курсор мыши на любой из эллипсов и затем нажмет кнопку мыши и продолжит перемещение, эллипс начнет двигаться за курсором. Таким образом, пользователь может менять расположение эллипсов на экране методом "drag-and-drop".

Использование клавиатуры

Кроме элемента управления TextBox, который предлагает пользователю возможность ввода текста с клавиатуры, многие элементы управления формируют события KeyDown и KeyUp, которые могут использоваться для перехвата ввода с клавиатуры. Событие KeyDown формируется при каждом нажатии клавиши, когда фокус находится на элементе. Функция-обработчик этого события принимает универсальный объект-отправитель и объект KeyEventArgs, который может использоваться для извлечения информации о нажатой клавише. Он имеет свойство key, возвращающее объект Key с информацией о клавише. Это платформонезависимое свойство, поэтому оно лучше всего подходит для использования в приложениях Silverlight. KeyEventArgs предлагает также еще одно свойство, PlatformKeyCode (Код клавиши на данной платформе), которое может использоваться со свойством key для получения кодов клавиш, используемых в конкретной операционной системе.

Кроме того, статическое свойство Keyboard.Modifers возвращает значение ModifierKeys (Модифицирующие клавиши), которое может использоваться для определения того, какая из модифицирующих клавиш (Alt, Ctrl, Shift, Windows) была нажата. Просто используйте побитовое И на возвращенное значение свойства для проверки искомой модифицирующей клавиши (например, Shift).

Стили

Стиль создается в разделе <Resources> (Ресурсы) контейнера. Здесь может быть создан один или более стилей, для которых задается имя стиля и тип объекта, к которому будет применяться стиль. Например, чтобы создать стиль TextBlockStyle (Стиль текстового блока) для элемента управления TextBlock, используется такой XAML:

<UserControl.Resources>
  <Style TargetType="TextBlock" x:Key="TextBlockStyle">
    <Setter Property="FontFamily" Value="Comic Sans Ms"></Setter>
    <Setter Property="Foreground" Value="MediumBlue"></Setter>
    <Setter Property="FontSize" Value="30"></Setter>
  </Style>
</UserControl.Resources>

Для стиля задается тип элемента управления, к которому он может применяться. Однако то, что этот стиль предполагается для TextBlock, не означает, что все экземпляры TextBlock будут использовать его. Вы не ограничены одним стилем для одного типа. В стиле должен быть задан тип элемента управления, для которого предназначен стиль, а также может быть задан Key (Ключ) стиля. Таким образом, можно иметь множество разных описаний стилей для элемента управления TextBlock с разными Key. Тогда, задавая свойство Style (Стиль) для разных TextBlock, вы просто выбираете тот стиль, который желаете применить к тому или иному TextBlock, по имени. Это будет продемонстрировано через мгновение, но сначала рассмотрим настройку стиля свойств TextBlock. Для этого используется Setter (Установщик). Setter - это тег XAML, определяющий свойство и значение, которое необходимо задать этому свойству.

Этот стиль должен быть определен на странице как ресурс. Как видите, корневым элементом XAML на странице является UserControl. У него есть дочерний элемент <UserControl.Resources>. Тег <Style> помещается в него.

Применяется этот стиль к TextBlock посредством свойства Style. Поскольку стиль определен как ресурс, для задания имени стиля используется синтаксис с ключевым словом StaticResource (Статический ресурс):

<TextBlock 
    Text="Click!" 
    Style="{StaticResource TextBlockStyle}"/>

Теперь все свойства, применяемые к элементам управления TextBlock кнопки, задаются в одном месте, что значительно упрощает обслуживание и делает XAML удобным для восприятия и понимания.

В данном случае действие стиля ограничено рамками одного пользовательского элемента управления UserControl. Чтобы расширить стиль на все страницы приложения, необходимо поместить стиль в контейнер <Application.Resources> файла App.xaml.

<Application.Resources>
  <Style TargetType="TextBlock" x:Key="TextBlockStyle">
    <Setter Property="FontFamily" Value="Arial"></Setter>
    <Setter Property="Foreground" Value="MediumBlue"></Setter>
    <Setter Property="FontSize" Value="30"></Setter>
  </Style>
</Application.Resources>

Шаблоны

В Silverlight можно определить стиль сразу всего элемента управления, включающего несколько других элементов, например, Button и образующих его элементов управления, т.е. StackPanel, Image и TextBlock.

Шаблоны действуют абсолютно аналогично стилям: размещаются в разделе <Resources> и описываются с помощью тега Setter. Чтобы создать Template (Шаблон), задается свойство Template и затем с помощью <Setter.Value> определяется ControlTemplate для заданного элемента управления:

<UserControl.Resources>
  <Style TargetType="TextBlock" x:Key="TextBlockStyle">
    <Setter Property="FontFamily" Value="Comic Sans Ms"></Setter>
    <Setter Property="Text" Value="Click!"></Setter>
    <Setter Property="Foreground" Value="MediumBlue"></Setter>
    <Setter Property="FontSize" Value="15"></Setter>
  </Style>
  <Style x:Key="ImageButton" TargetType="Button">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="Button">
          <Button>
            <Button.Content>
              <StackPanel Orientation="Vertical">
                <Image 
                    Source="1.jpg" 
                    Height="48" Width="48">                                        
                </Image>
                <TextBlock 
                 Style="{StaticResource TextBlockStyle}">                                        
                </TextBlock>
              </StackPanel>
            </Button.Content>
          </Button>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>        
</UserControl.Resources>
<Button Style="{StaticResource ImageButton}"/>
<Button Content="Button2"/>

В результате получится кнопка, как показано на рис. 7.15

Заключение

В данном разделе изучен некоторый базовый набор элементов управления Silverlight. Всего элементов управления после установки Silverlight SDK и Toolkit - 79. Так же показан способ применения шаблонов и стилей к элементам управления. Они позволяют унифицировать и настраивать внешний вид и поведение всех создаваемых вами элементов управления во всем приложении Silverlight.

Кросс платформенность

В следующей таблице отражена совместимость Silverlight различных версий с браузерами и операционными системами.

Примеры сайтов Silverlight

http://vogue.ru/photoviewer - сайт журнала Vogue, просмотр платьев, костюмов и другой модной одежды

http://www.silverlightshow.net/items/Virtual-earth-deep-zooming.aspx - работа приложения Silverlight с веб-сервисом Microsoft Virtual Earth. Демонстрация технологии DeepZoom. География.

http://demo.mapdotnet.com/MDNUXHurricaneDemo - работа приложения Silverlight с географическим веб-сервисом Microsoft Bing. Демонстрация технологии DeepZoom. Ветры.

http://demo.mapdotnet.com/mdnuxpropertygeomsample - работа приложения Silverlight с географическим веб-сервисом Microsoft Bing. Цены на участки земли в США.

http://demos.telerik.com/silverlight - примеры бизнес приложений. Акции

http://demos.telerik.com/wpf - реализовано с помощью Windows Presentation Foundation

http://demos.telerik.com/silverlight - реализовано с помощью Silverlight

http://www.silverlightbuzz.com/2009/08/03/obama-to-jfk-deep-zoom - Демонстрация технологии DeepZoom. Президенты США от Обамы до Кеннеди (Obama to JFK Deep Zoom)

http://news.sportbox.ru - новостной спортивный сайт sportbox.ru. Внедрена технология Smooth Streaming для повышения качества передачи видео с сайта и его автоматической настройки для пользователей в любом регионе.

http://www.prlib.ru - сайт президентской Библиотеки им. Б.Н. Ельцина - зарегистрированные посетители могут изучать оцифрованные материалы в режиме 2D и 3D, а также масштабировать графические объекты до нужных деталей

http://media.mariinsky.ru - сайт Мариинского театра - медиа-центр, который позволяет просматривать через Интернет видеозаписи, трансляции концертных выступлений в высоком разрешении, фотографий и т.д.

Для разработчика

http://www.microsoft.com/silverlight, http://silverlight.net - официальные сайты технологии Silverlight

http://msdn.microsoft.com/ru-ru/silverlight - центр разработки Silverlight

http://silverlighter.ru - Сообщество пользователей Silverlight

http://www.iis.net/extensions/SmoothStreaming - описание и загрузка Smooth Streaming

http://www.microsoft.com/rus/expression - описание пакета Microsoft Expression Studio