Оригинал англоязычного поста: Day #1: Mouse Events in Silverlight
В своем первом посте «31 день с Silverlight», мы сосредоточимся на обработчиках событий мыши. В случае интерактивных приложений, вы всегда желаете знать, когда пользователи работают с вашим приложением при помощи мыши. Это руководство расскажет о различных событиях мыши, и о том, как их использовать. Итак, давайте же сделаем первый шаг, на пути к освоению этой не сложной, но очень интересной темы
Событие MouseEnter
Я собираюсь продемонстрировать работу этого события на двух уровнях. Первым будет событие MouseEnter по всему Silverlight-контролу. Это событие будет возбуждено, когда курсор мыши входит в пространство, занимаемое Silverlight-контролом. Второе событие будет срабатывать при наведении мыши на круг, находящийся середине пользовательского контрола. Вот наш начальный XAML код.
<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
</Grid>
</UserControl>
Теперь я добавлю обработчики событий в XAML, и покажу вам, как сделать это в C# коде. Вот измененный XAML код вместе с добавленными обработчиками событий.
<UserControl x:Class="SilverlightMouseEvents.MouseEnterDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" MouseEnter="UserControl_MouseEnter">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" MouseEnter="myEllipse_MouseEnter" />
</Grid>
</UserControl>
Теперь нам необходимо перейти на code-behind файл кодом на C#, для реализации обработчика событий. Как только я создал обработчиков событий в XAML коде, студия автоматически создала для меня заготовки методов обработки событий в C# коде. Вот как выглядит первоначальное содержимое C# code-behind файла:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseEnterDemo : UserControl
{
public MouseEnterDemo()
{
InitializeComponent();
}
private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
}
private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
{
}
}
}
Для того, чтобы сохранить разумной длину этого поста, я не буду делать ничего сложного в моих обработчиках событий, но я покажу вам, как изменить цвет эллипса. Я добавил одну строку кода в каждый метод, и каждый из них закрашивает эллипс другим цветом. Сейчас, когда мы перемещаем курсор мыши в области Silverlight приложения — круг будет залит зеленым цветом, а когда курсор мыши окажется внутри круга — фигура будет закрашена пурпурным.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseEnterDemo : UserControl
{
public MouseEnterDemo()
{
InitializeComponent();
}
private void UserControl_MouseEnter(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
private void myEllipse_MouseEnter(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Purple);
}
}
}
Событие MouseLeave
Это событие работает практически точно также, как и событие MouseEnter. MouseLeave срабатывает тогда, когда курсор мыши ПОКИДАЕТ некую область. Что еще можно сюда добавить, а? На этот раз, однако, я вообще не делал изменений в моем XAML коде. Так вот, еще раз привожу начальный XAML код.
<UserControl x:Class="SilverlightMouseEvents.MouseLeaveDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
</Grid>
</UserControl>
На этот раз я сделаю все в C#-коде. Я добавлю обработчики событий в момент инициализации приложения. Вот мое окончательное решение на C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeaveDemo : UserControl
{
public MouseLeaveDemo()
{
InitializeComponent();
this.MouseLeave += new MouseEventHandler(MouseLeaveDemo_MouseLeave);
myEllipse.MouseLeave += new MouseEventHandler(myEllipse_MouseLeave);
}
void myEllipse_MouseLeave(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Purple);
}
void MouseLeaveDemo_MouseLeave(object sender, MouseEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
}
}
Событие MouseLeftButtonDown
В этом случае, я продолжаю использовать тот же самый XAML код. Единственным изменением является ссылка на наш новый класс MouseLeftButtonDownDemo из XAML кода нашего юзер-контрола. Я уже показал, как использовать обработчики событий как в XAML, так и в C# коде. Вы уже видели XAML, так что я просто покажу только C# код.
Событие MouseLeftButtonDown, как вы уже догадались, срабатывает при нажатии левой кнопки мыши Пожалуйста, обратите внимание, что код этого примера так же охватывает пример события MouseLeftButtonUp, которое рассматривается ниже, и то, что значительной разницы между ними нет. Это будет особенно очевидно, когда мы займемся реализацией Drag & Drop. Вот пример добавления события MouseLeftButtonDown в наш код.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeftButtonDownDemo : UserControl
{
public MouseLeftButtonDownDemo()
{
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(MouseLeftButtonDownDemo_MouseLeftButtonDown);
myEllipse.MouseLeftButtonDown += new MouseButtonEventHandler(myEllipse_MouseLeftButtonDown);
}
void myEllipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
myEllipse.Fill = new SolidColorBrush(Colors.Green);
}
void MouseLeftButtonDownDemo_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
LayoutRoot.Background = new SolidColorBrush(Colors.Purple);
}
}
}
Событие MouseLeftButtonUp
До сих пор мы создавали отдельные методы-обработчики событий для каждого отдельного события. Во множестве случаев, вы обязательно захотите, чтобы разные элементы управления вызывали один и тот же метод обработки событий, чтобы каждый раз не писать один и тот же код обработки событий. В следующем примере, я добавлю еще один круг внутрь StackPanel. Обе эти фигуры будут менять свой фон на оранжевый. Вот наш новый, дополненный, XAML код:
<UserControl x:Class="SilverlightMouseEvents.MouseLeftButtonUpDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel x:Name="LayoutRoot" Background="White" Orientation="Horizontal" HorizontalAlignment="Center" >
<Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
<Ellipse x:Name="myEllipse2" Fill="Red" Width="150" Height="150" />
</StackPanel>
</UserControl>
Теперь мы добавим обработчик события MouseLeftButtonUp в нашем C# коде:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseLeftButtonUpDemo : UserControl
{
public MouseLeftButtonUpDemo()
{
InitializeComponent();
myEllipse.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
myEllipse2.MouseLeftButtonUp += new MouseButtonEventHandler(Ellipse_MouseLeftButtonUp);
}
void Ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Ellipse myCircle = sender as Ellipse;
myCircle.Fill = new SolidColorBrush(Colors.Orange);
}
}
}
Как видите, в теперь наш обработчик состоит из двух строк кода. Теперь нам необходимо получить ссылку на эллипс, который на самом деле вызвал метод-обработчик. Параметр «sender» содержит эту информацию, так что, с его помощью мы и получаем ссылку на эллипс, и заполняем фигуру необходимым цветом.
Событие MouseMove
В этом последнем примере, мы используем событие MouseMove. Это событие срабатывает каждый раз, когда курсор мыши меняет свои координаты. Вы можете контролировать перемещение мыши как по всей площади приложения, так и для конкретного элемента. В любом случае, вы можете сделать довольно много полезных вещей при помощи этого события, в том числе и реализовать перетаскивания элементов (Drag and Drop). (Drag and Drop мы рассмотрим в будущем посте).
Мой XAML настоящее время состоит из двух TextBox'ов на странице. Первый я, ловко, назвал Xbox, а второй — Ybox. Мы будем отображать новые X и Y координаты мыши в этих полях, каждый раз, в момент перемещения пользователем курсора мыши.
<UserControl x:Class="SilverlightMouseEvents.MouseMoveDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" VerticalAlignment="Center">
<StackPanel x:Name="LayoutRoot" Background="White">
<TextBox x:Name="Xbox" Width="200" Height="35" Text="X" />
<TextBox x:Name="Ybox" Width="200" Height="35" Text="Y"/>
</StackPanel>
</UserControl>
Сейчас C# code behind файл выглядит не слишком сложными. В данном примере мы используем параметр MouseEventArgs, от которого мы получим текущие координаты мыши. После чего, просто запишем значения координат в текстовые поля.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightMouseEvents
{
public partial class MouseMoveDemo : UserControl
{
public MouseMoveDemo()
{
InitializeComponent();
this.MouseMove += new MouseEventHandler(MouseMoveDemo_MouseMove);
}
void MouseMoveDemo_MouseMove(object sender, MouseEventArgs e)
{
Xbox.Text = e.GetPosition(null).X.ToString();
Ybox.Text = e.GetPosition(null).Y.ToString();
}
}
}
Резюме
Это был краткий обзор событий мыши, которые доступны вам в Silverlight. Используя их вместе, можно создать очень интерактивный и динамичный интерфейс для пользователя. В завтрашнем посте, мы поговорим об интересных способах работы с экраном в Silverlight. И не только о возможности перехода с одного XAML файла на другой, но и о том, как реализовать PowerPoint-подобные переходы с одного экрана на другой.
2 коммент.:
вот здесь:
Ellipse x:Name="myEllipse" Fill="Blue" Width="150" Height="150" />
Ellipse x:Name="myEllipse" Fill="Red" Width="150" Height="150" />
во второй строке разве не myEllipse2 должно быть?
MyGameDevelop,
Верно, спасибо.
Отправить комментарий