精通Silverlight——12.2.1 鼠标事件

    派生自UIElement的对象大都具有如下五个鼠标事件，每种事件都具有一个object和一个MouseEventArgs类型的参数。object类型的sender参数表示触发鼠标事件的对象，MouseEventArgs类型的参数在不同的事件中则有不同的参数值。

q      MouseMove事件：当鼠标位置改变时触发，MouseEventArgs参数包含输入信息。

q      MouseEnter事件：当鼠标进入指定对象的区域时，MouseEventArgs参数包含输入信息。

q      MouseLeave事件：当鼠标离开指定对象的区域时，MouseEventArgs参数为null值。

q      MouseLeftButtonDown事件：当鼠标左键按下时，MouseEventArgs参数包含输入信息。

q      MouseLeftButtonUp事件：当鼠标左键释放时，MouseEventArgs参数包含输入信息。

下面举一个使用鼠标事件的示例程序，该程序的运行效果如图所示。

 

该示例在画布上绘制了两个圆，对大一点的圆处理了MouseEnter和MouseLeftButtonDown事件，对小圆则仅处理了MouseLeftButtonDown事件。

当鼠标移动到大圆上时，动画开始，大圆似乎在不停的滚动，而小圆则像皮球一样不停的弹跳。当在大圆上单击鼠标左键，动画停止。此时可以在小、圆上单击左键，则小圆的位置会被改变。

该示例的XAML代码如下所示：

<Canvas

        xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        x:Name="parentCanvas"

        Loaded="Page_Loaded"

        x:Class="MouseEventDemo1.Page;assembly=ClientBin/MouseEventDemo1.dll"

        Width="640"

        Height="480"

        Background="White"

        >

  <!--在这里定义了关键帧动画-->

         <Canvas.Resources>

                   <Storyboard x:Name="Bigball">

                            <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="BigBall" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)" RepeatBehavior="Forever">

                                               <SplinePointKeyFrame KeyTime="00:00:00" Value="0.257,0.426"/>

                                               <SplinePointKeyFrame KeyTime="00:00:00.1000000" Value="0.46,0.193"/>

                                               <SplinePointKeyFrame KeyTime="00:00:00.2000000" Value="0.748,0.48"/>

                                               <SplinePointKeyFrame KeyTime="00:00:00.4000000" Value="0.47,0.772"/>

                                               <SplinePointKeyFrame KeyTime="00:00:00.5000000" Value="0.134,0.569"/>

                                               <SplinePointKeyFrame KeyTime="00:00:00.6000000" Value="0.257,0.426"/>

                                     </PointAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SmallBall" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" RepeatBehavior="Forever">

                                               <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-100.5"/>

                                               <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="85.5"/>

                                     </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SmallBall" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

                                     <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-41"/>

                                     <SplineDoubleKeyFrame KeyTime="00:00:00.6000000" Value="-8.5"/>

                            </DoubleAnimationUsingKeyFrames>

                   </Storyboard>

         </Canvas.Resources>

   <!--定义一个大圆，使用放射渐变填充，-->

         <Ellipse Width="101" Height="101" Stroke="#FF000000" Canvas.Left="183" Canvas.Top="179" x:Name="BigBall">

                   <Ellipse.Fill>

                            <RadialGradientBrush GradientOrigin="0.257,0.426">

                                     <GradientStop Color="#FFD22C2C" Offset="1"/>

                                      <GradientStop Color="#FFFFFFFF" Offset="0"/>

                            </RadialGradientBrush>

                   </Ellipse.Fill>

         </Ellipse>

  <!--定义一个小圆，使用放射渐变填充，并为小圆定义了变换，以便于动画调用-->

         <Ellipse Width="47" Height="47" Stroke="#FF000000" Canvas.Left="311" Canvas.Top="247" x:Name="SmallBall" RenderTransformOrigin="0.5,0.5">

                   <Ellipse.Fill>

                            <RadialGradientBrush GradientOrigin="0.245,0.436">

                                     <GradientStop Color="#FF2A8063" Offset="1"/>

                                     <GradientStop Color="#FFFFFFFF" Offset="0"/>

                            </RadialGradientBrush>

                   </Ellipse.Fill>

                   <Ellipse.RenderTransform>

                            <TransformGroup>

                                     <ScaleTransform ScaleX="1" ScaleY="1"/>

                                     <SkewTransform AngleX="0" AngleY="0"/>

                                     <RotateTransform Angle="0"/>

                                     <TranslateTransform X="0" Y="0"/>

                            </TransformGroup>

                   </Ellipse.RenderTransform>

         </Ellipse>

</Canvas>

在XAML代码中，为大圆的x:Name指定了BigBall名称，小圆的是SmallBall，而故事板则为Bigball。有了这些名称，则可以编程直接进行访问，C#代码如下所示。

namespace MouseEventDemo1

{

    public partial class Page : Canvas

    {

        public void Page_Loaded(object o, EventArgs e)

        {

            // Required to initialize variables

            InitializeComponent();

            //订阅事件

            BigBall.MouseEnter += new MouseEventHandler(BigBall_MouseEnter);

            BigBall.MouseLeftButtonDown += new MouseEventHandler(BigBall_MouseLeftButtonDown);

            SmallBall.MouseLeftButtonDown += new MouseEventHandler(SmallBall_MouseLeftButtonDown);

        }

        //改变小圆的位置

        void SmallBall_MouseLeftButtonDown(object sender, MouseEventArgs e)

        {

            SmallBall.SetValue(Canvas.LeftProperty, BigBall.GetValue(Canvas.LeftProperty));

            SmallBall.SetValue(Canvas.TopProperty, BigBall.GetValue(Canvas.TopProperty));

        }

        //停止播放动画

        void BigBall_MouseLeftButtonDown(object sender, MouseEventArgs e)

        {

            Bigball.Stop();

        }

        //开始播放动画

        void BigBall_MouseEnter(object sender, MouseEventArgs e)

        {

            Bigball.Begin();

        }

    }

}

很简单，利用UIElement的鼠标事件，分别用于控制动画和设置图形对象的属性。