4.マウス関連イベントを定義する
WPF/Eオブジェクトはマウスについての以下イベントを設定することができます。
MouseMove
MouseEnter
MouseLeave
MouseLeftButtonDown
MouseLeftButtonUp
次のXAMLサンプルではMouseEnterイベントとMouseLeaveイベントを２つのEllipseオブジェクトに設定します。
イベントハンドラのメソッドは同一メソッドを利用します。
1: <Canvas
2: xmlns="http://schemas.microsoft.com/client/2007"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
4:
5: <Ellipse
6: MouseEnter="javascript:onMouseEnter"
7: MouseLeave="javascript:onMouseLeave"
8: Height="100" Width="100"
9: Fill="Teal" />
10:
11: <Ellipse
12: Canvas.Left="120"
13: MouseEnter="javascript:onMouseEnter"
14: MouseLeave="javascript:onMouseLeave"
15: Height="100" Width="100"
16: Fill="Teal" />
17:
18: </Canvas>
次のJavaScriptのサンプルは上記のXAMLのサンプルに対応するイベントハンドラのメソッドになります。
1: function onMouseEnter(sender) { 2: sender.Fill = "Coral";
3: }
4:
5: function onMouseLeave(sender) { 6: sender.Fill = "Teal";
7: }
とまぁ、こんな感じです。