Элементы управления Silverlight: представления и компоновки

Silverlight 2 поставляется с двумя основными сборками, в которых содержатся элементы управления для использования в ваших приложениях. Это core controls ( основные элементы управления) и extended controls ( дополнительные элементы управления).Они являются дополнением к пространству имен System.Windows.Forms, содержащему базовые элементы управления.

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

• Button
• CheckBox
• HyperlinkButton
• Image
• ListBox
• RadioButton
• TextBlock
• TextBox

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

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

В Silverlight кнопка реализуется с помощью элемента управления Button. Кнопка реагирует на ввод пользователя с таких устройств ввода, как мышь, клавиатура или стилус, формируя событие Click (Щелчок). Условия формирования кнопкой события Click могут быть настроены несколькими способами. Они задаются свойством ClickMode (Режим щелчка), которое может принимать значения Hover (Наведение), Press (Нажатие) и Release (Отпустить). Эти значения определяют момент формирования события Click. В первом случае, Hover, оно формируется при наведении курсора мыши на кнопку. Во втором случае, Press, оно формируется при нажатии кнопки мыши в момент, когда курсор находится на Button. В третьем случае, Release, это событие возникает, когда пользователь нажал и отпустил кнопку мыши при наведенном на Button курсоре.

<Canvas x:Name="LayoutRoot" Background="White">
  <Button x:Name="b1" ClickMode="Hover" Content="Button1" 
          Click="ButtonClick">    
  </Button>
  <Button x:Name="b2" Canvas.Top="40" ClickMode="Press" 
          Content="Button2" Click="ButtonClick">    
  </Button>
  <Button x:Name="b3" Canvas.Top="80" ClickMode="Release" 
          Content="Button3" Click="ButtonClick">    
  </Button>
</Canvas>

Как видите, для всех этих кнопок определен обработчик события Click и одна и та же функция, ButtonClick, для каждой из них.

Вот код обработки этого события на языке С#:

private void ButtonClick(object sender, RoutedEventArgs e) {
Button b = (Button)sender;
string strTest = b.Name; }

Этот код построен по типичному шаблону обработчика события. Он принимает объект отправителя, содержащий ссылку на элемент управления, который сформировал событие (в данном случае, одну из кнопок), и набор аргументов, связанных с этим событием ( RoutedEventArgs ), который включает метаданные о событии.

Вы заметите, что в данном экземпляре объявлен только один обработчик события. Это делает код аккуратным и понятным. Конечно, вы захотите выяснить, какой из элементов сформировал событие, для этого пригодится отправитель.

Отправитель - это объект типа Object, поэтому чтобы извлечь из него характерные для кнопок свойства, его просто приводят к типу Button. В данном случае, после приведения этого объекта к типу Button мы можем получить его имя. Если запустить приложение сейчас, можно будет увидеть три кнопки и то, как свойство ClickMode, ассоциированное с каждой из этих кнопок, обусловливает их разное поведение!

Дополнительным очень полезным свойством является IsEnabled (Активирован). Если ему задано значение false, кнопка отображается на экране, но выглядит неактивной и не формирует события.

Надпись на кнопке задается свойством Content (Содержимое). В качестве его значения может быть задан простой текст, который будет отображаться как название кнопки. Однако Button также является контейнером, поэтому ее содержимое можно настроить с помощью XAML

Вот пример кнопки (ужасно некрасивой), содержимое которой описано с помощью XAML:

<Button x:Name="b1" Click="ButtonClick" Width = "100" Height="100">
  <Canvas>
    <Ellipse Fill= "Green" Width="50" Height="50">      
    </Ellipse>
    <TextBlock Text="Hello"></TextBlock>
  </Canvas>
</Button>

Как видите, это обеспечивает чрезвычайную гибкость в представлении кнопок, что позволяет создавать разнообразные кнопки в Веб-приложениях, например, такие как можно увидеть на панели инструментов Microsoft Office 2007.

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

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

При установлении флажка CheckBox формирует событие Checked (Установлен), при снятии флажка формируется событие Unchecked (Снят). Также CheckBox формирует событие Click при каждом щелчке по нему. Аналогично элементу управления Button, CheckBox имеет свойство ClickMode, которому может быть задано значение Hover, Press или Release, определяющее условия формирования события.

CheckBox может быть флажком с тремя состояниями (поддерживается неопределенное состояние). Это определяется свойством IsThreeState (Три состояния). Если это состояние включено, и пользователь переводит CheckBox в неопределенное состояние, свойству IsChecked присваивается значение null.

Значение CheckBox можно получить с помощью свойства IsChecked. Необходимо быть осторожным с тем, когда CheckBox находится в режиме с тремя состояниями, поскольку, если CheckBox в неопределенном состоянии, свойство IsChecked возвращает значение null.

Аналогично элементу управления Button, CheckBox является контейнером. Он имеет свойство Content, с помощью которого можно задавать простую строку текста, которая будет отображаться как надпись рядом с флажком, или можно разместить XAML-код в дочернем теге <Content>, для получения более насыщенного эффекта.

Вот пример каждого из вариантов:

<StackPanel>
  <CheckBox Checked="CheckBox Checked" Unchecked="CheckBox Unchecked" 
            IsThreeState="True" Content="Test1">     
  </CheckBox>
  <CheckBox Checked="CheckBox Checked" Unchecked="CheckBox Unchecked" 
            IsThreeState="True">
    <CheckBox.Content="" >
      <StackPanel Orientation="Horizontal">
        <TextBlock Text="The Caption"></TextBlock>
        <Image Source="..."/>
      </StackPanel>
    </CheckBox.Content>
  </CheckBox>
</StackPanel>

При обработке событий Clicked, Checked и Unchecked, в качестве sender будет выступать объект, который необходимо привести к типу CheckBox, чтобы получить доступ к свойствам флажка.

Ниже приведен пример:

private void CheckBox Checked(object sender, RoutedEventArgs e) 
{
 CheckBox c = (CheckBox)sender;
 bool b = (bool)c.IsChecked; 
}
private void CheckBox  Unchecked(object sender, RoutedEventArgs e) 
{
 CheckBox c = (CheckBox)sender;
 bool b = (bool)c.IsChecked; 
}

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

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

Например:

<HyperlinkButton Content="Microsoft"
         NavigateUri="http://www.microsoft.com" />

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

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

<HyperlinkButton NavigateUri = "http://www.silverlight.net" >
  <HyperlinkButton.Content>
    <Image Source="sl.jpg"/>
  </HyperlinkButton.Content>
</HyperlinkButton>

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

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

• blank Открывает новое окно браузера без имени.
• self Замещает текущую HTML-станицу новым содержимым. Если HTML-станица отображается во фрейме, замещается только содержимое рамки.
• top Замещает текущую HTML-станицу новым содержимым. Даже если HTML-станица отображается во фрейме, меняется содержимое всего окна браузера.
• parent Замещает всю HTML-станицу.

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

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

<Grid x:Name="LayoutRoot" Background="White">
  <HyperlinkButton NavigateUri="http://www.silverlight.net" TargetName="blank" >
    <HyperlinkButton.Content>
      <Image Source="sl.jpg"/>
      </HyperlinkButton.Content>
    </HyperlinkButton>
</Grid>

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

Далее рассмотрим пример с использованием события Click. Обратите внимание, что NavigateUri задано значение http://www.microsoft.com, но фактически страница переходит по адресу http://www.silverlight.net, потому что Click выполняется раньше перехода и меняет значение NavigateUri.

Во-первых, рассмотрим XAML:

<HyperlinkButton NavigateUri="http://www.microsoft.com" 
      TargetName="blank" Click="HyperlinkButtonClick" >
  <HyperlinkButton.Content>
    <Image Source="sl.jpg"/>
  </HyperlinkButton.Content>
</HyperlinkButton>

И теперь обратим внимание на выделенный C#-код, в котором обрабатывается событие HyperlinkButtonClick:

private void HyperlinkButtonClick(object sender, RoutedEventArgs e) 
{ 
 HyperlinkButton h = (HyperlinkButton)sender;
 string strTest = h.NavigateUri.AbsoluteUri;
 if (strTest == "http://www.microsoft.com/") 
 { 
  h.NavigateUri = new Uri("http://www.silverlight.net"); 
 }
}

При выполнении этого кода вы увидите, что несмотря на то, что для HyperlinkButton определен один URL, в ходе обработки события Click ему будет задан другой URL, и переход будет выполнен по новому URL