画像のドラッグ機能を追加するMouseDragElementBehavior

開発ツール

技術解説

連載 :

ビヘイビアで動きのあるページを作ろう（Silverlight4+Expression Blend4）

2011年1月24日(月)

PROJECT KySS

書き出されるXAMLはリスト1のようになります。

リスト1: 書き出されたXAMLコード（MainPage.xaml）

01<UserControl
02    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
03    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
04    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
05    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
06    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="SL4_MouseDragElementBehavior.MainPage"
07    mc:Ignorable="d"
08    d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600">
09（1）<UserControl.Resources>プロパティ要素内にStoryboardが定義されている。NameはStoryboard1となっている。
10    <UserControl.Resources>■（1）
11        <Storyboard x:Name="Storyboard1"  RepeatBehavior="Forever">
12            <DoubleAnimation Duration="0:0:1" To="360" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="Image1" d:IsOptimized="True"/>
13        </Storyboard>
14    </UserControl.Resources>
15 
16    <Grid x:Name="LayoutRoot" Background="White">
17        <TextBlock Height="47" HorizontalAlignment="Left" Margin="18,13,0,0" x:Name="TextBlock1" Text="マウスを乗せると回転してドラッグが可能です。" VerticalAlignment="Top" Width="698" FontSize="28" FontWeight="Bold" />
18 
19（2）<Image>要素内に、<ei:MouseDragElementBehavior>要素と、<ei:ChangePropertyAction>要素が定義されている。
20        <Image Height="120" HorizontalAlignment="Left" Margin="134,161,0,0" x:Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="160" Source="/SL4_MouseDragElementBehavior;component/Image/ポピー.jpg" >■（2）
21            <Image.Projection>
22                <PlaneProjection/>
23            </Image.Projection>
24            <i:Interaction.Behaviors>
25                <ei:MouseDragElementBehavior/>
26            </i:Interaction.Behaviors>
27            <i:Interaction.Triggers>
28                <i:EventTrigger EventName="MouseEnter">
29                    <ei:ChangePropertyAction PropertyName="Opacity" Value="0.5"/>
30                </i:EventTrigger>
31                <i:EventTrigger EventName="MouseLeave">
32                    <ei:ChangePropertyAction PropertyName="Opacity" Value="1"/>
33                </i:EventTrigger>
34            </i:Interaction.Triggers>
35        </Image>
36    </Grid>
37</UserControl>

ロジックコードを記述する

次に処理を記述します。

ソリューションエクスプローラー内のSilverlightControl1.xamlを展開し、SilverlightControl1.xaml.vbをダブルクリックしてコード画面を開きます。

リスト2のようにロジックコードを記述します。

01Option Strict On
02 
03Partial Public Class MainPage
04    Inherits UserControl
05 
06    Public Sub New()
07        InitializeComponent()
08    End Sub
09 
10■画像の上にマウスカーソルが乗った時の処理
11Y軸を中心に回転するストーリーボードを実行します。
12    Private Sub Image1_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Image1.MouseEnter
13        Storyboard1.Begin()
14    End Sub
15 
16■画像の上からマウスポインターが外れた時の処理
17ストーリーボードを中止します。
18    Private Sub Image1_MouseLeave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Image1.MouseLeave
19        Storyboard1.Stop()
20    End Sub
21End Class

ビヘイビアを使用すると、画像のドラッグに関するコードは不要になります。また透明化の設定もプロパティに値を指定するだけで済みます。最小限のコードで画像の移動と回転が実現できます。

著者

PROJECT KySS

この著者の記事一覧この著者の
記事一覧

四国のSOHO。薬師寺国安（VBプログラマ）と、薬師寺聖（デザイナ、エンジニア）によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/