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

Дизайн и стилизация элементов управления

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

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

• Button
• CheckBox
• ComboBox
• HyperlinkButton
• Image
• ListBox
• RadioButton
• TextBlock
• TextBox и PasswordBox
• DataGrid
• Calendar и DatePicker

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

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

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

И в code-behind задается обработчик события:

private void Button_Click(object sender, RoutedEventArgs e){   }

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

Элемент управления Button также является контейнером, поэтому его содержимое можно настроить с помощью XAML. Ниже показаны пример кнопки и код примера.

<Button 
  x:Name="b4" 
  Canvas.Top="120" 
  Click="Button_Click" 
  Width="100" 
  Height="100"> 
  <Canvas> 
    <Ellipse 
      Fill="Green" 
      Width="100" 
      Height="100" 
          Canvas.Left="-50" 
          Canvas.Top="-50"/>
    <Image 
          Source="1.jpg" 
          Height="100" 
          Width="100" 
          Canvas.Left="-50" 
          Canvas.Top="-50" 
          Stretch="Fill" 
          Opacity="0.4"/>
    <TextBlock Text="Hello" Canvas.Left="-15" 
        Canvas.Top="-7"/>
  </Canvas> 
</Button>

Рис. 7.6. Пример оформления элемента управления Button

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

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

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

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

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

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

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

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

<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="Test2" 
                 Opacity="0.3">                            
      </TextBlock>
    </StackPanel>
  </CheckBox.Content>
</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;
}

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

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

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

Список образуют объекты ComboBoxItem (элемент поля со списком), как в данном примере:

<ComboBox 
  SelectionChanged="ComboBox_SelectionChanged" 
  Height="20" 
  VerticalAlignment="Top" 
  HorizontalAlignment="Left" 
  Width="65">
  <ComboBoxItem>
    <TextBlock Text="Item1"></TextBlock>
  </ComboBoxItem>
  <ComboBoxItem>
    <TextBlock Text="Item2"></TextBlock>
  </ComboBoxItem>
  <ComboBoxItem>
    <TextBlock Text="Item3"></TextBlock>
  </ComboBoxItem>
</ComboBox>

Обработка выбора элемента ComboBox пользователем осуществляется посредством события SelectionChanged (Выбранный элемент изменен) и свойства SelectedItem (Выбранный элемент). Продемонстрируем вариант, когда ComboBox содержит элементы разного типа. Ниже представлен пример, в котором ComboBox включает составные элементы, образованные компонентами StackPanel, в каждом из которых имеется Image и TextBlock.

<ComboBox 
    SelectionChanged="theList_SelectionChanged" 
    Margin="0,43,0,0" 
    Height="22" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    Width="65">
  <ComboBoxItem>
    <StackPanel Orientation="Horizontal">
      <Image 
          Height="100" 
          Width="100" 
          Source="1.jpg"/>
      <TextBlock 
          Text="Item 1" 
          HorizontalAlignment="Right" 
          VerticalAlignment="Center">                        
      </TextBlock>
    </StackPanel>
  </ComboBoxItem>
  <ComboBoxItem>
    <StackPanel Orientation="Horizontal">
      <Image 
          Height="100" 
          Width="100" 
          Source="2.jpg"/>
      <TextBlock 
          Text="Item 2" 
          HorizontalAlignment="Right" 
          VerticalAlignment="Center">                        
      </TextBlock>
    </StackPanel>
  </ComboBoxItem>
</ComboBox>

Рис. 7.7 . Пример оформления элемента управления ComboBox

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