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

Общие свойства, события и методы

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

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

Элементы, которые могут принимать ввод, формируют события GotFocus и LostFocus. Это важное дополнение в Silverlight 2, потому что в Silverlight 1.0 только корневой элемент управления Silverlight мог принимать эти события.

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

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

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

• MouseEnter Это событие формируется при входе курсора мыши в область отображения элемента управления.
• MouseLeave Это событие формируется, когда курсор мыши покидает область отображения элемента управления.
• MouseLeftButtonDown Это событие формируется при нажатии пользователем левой кнопки мыши, когда курсор находится над элементом управления.
• MouseLeftButtonUp Это событие формируется при отпускании удерживаемой левой кнопки мыши, когда курсор находится над элементом управления.
• MouseMove Это событие формируется при перемещении курсора по элементу управления.

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

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

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

<UserControl x:Class="MouseEvents.Page" 
     xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l" 
     FontFamily="Trebuchet MS" FontSize="11" Width="400" Height="300">
  <Grid x:Name="LayoutRoot" Background = "White">
    <Canvas Width="400" Height="300" Background = "Wheat">
      <Ellipse Canvas.Top="0" Fill="Black" Width = "20" Height="20" 
               MouseLeftButtonDown="EllipseMouseLeftButtonDown" 
               MouseLeftButtonUp="EllipseMouseLeftButtonUp" 
               MouseMove="EllipseMouseMove" />
      <Ellipse Canvas.Top="40" Fill= "Black" Width="20" Height="20" 
               MouseLeftButtonDown="EllipseMouseLeftButtonDown"
               MouseLeftButtonUp="EllipseMouseLeftButtonUp"
               MouseMove="EllipseMouseMove" />
      <Ellipse Canvas.Top="80" Fill= "Black" Width="20" Height="20"
               MouseLeftButtonDown="EllipseMouseLeftButtonDown"
               MouseLeftButtonUp="EllipseMouseLeftButtonUp"
               MouseMove="EllipseMouseMove" />
      <Ellipse Canvas.Top="120" Fill= "Black" Width="20" Height="20"
               MouseLeftButtonDown="EllipseMouseLeftButtonDown"
               MouseLeftButtonUp="EllipseMouseLeftButtonUp"
               MouseMove="EllipseMouseMove" />
    </Canvas>
  </Grid>
</UserControl>

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

double beginX = 0; 
double beginY = 0; 
bool isMouseDown = false;

Если курсор находится над любой из кнопок, и нажимается кнопка мыши, выполняется функция EllipseMouseLeftButtonDown.

private void EllipseMouseLeftButtonDown(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. Оно обрабатывается функцией-обработчиком события EllipseMouseMove:

private void EllipseMouseMove(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, перехватываемое функцией EllipseMouseLeftButtonUp:

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

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

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

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

Рис. 7.9. Приложение, реализующее перемещение объектов методом "Drag and drop"

Рис. 7.10. Перемещение элементов управления методом "drag and drop"

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

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

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

Заключение

В данной лекции были представлены некоторые базовые элементы управления Silverlight ( Button, Check-Box, HyperlinkButton, Image, ListBox, RadioButton, TextBlock и TextBox ) и показано, как они могут использоваться для создания приложений Silverlight. Кроме того, дан обзор свойств, методов и событий, общих для всех элементов управления, что поможет вам начать использовать элементы управления представления и компоновочные элементы управления в Silverlight.

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