ListBox間を画像がアニメーションを伴って行き来する

2011年1月18日(火)
PROJECT KySS

FluidMoveBehaviorとCallMethodActionを設定する

キーがListBoxItemsPanelTemplate内にレイアウトした要素にFluidMoveBehaviroビヘイビアを設定します。ListBoxItemsPanelTemplate内にレイアウトした要素は、通常の状態では、「オブジェクトとタイムライン(B)」に表示されておりません。表示させるには下記の手順に従います。

まず、どちらのListBoxでも構いませんので、ListBoxを選択し、マウスの右クリックで表示されるメニューから、「追加テンプレートの編集(D)/アイテムのレイアウトの編集(ItemsPanel)/現在のテンプレートの編集(U)」と選択します(図8)。

図8: ListBoxから、「追加テンプレートの編集(D)/アイテムのレイアウトの編集(ItemsPanel)/現在のテンプレートの編集(U)」と選択する(クリックで拡大)

すると、図9のようにListBoxItemsPanelTemplate内にレイアウトしていた、要素が、「オブジェクトとタイムライン(B)」内に表示されます。

図9: ListBoxItemsPanelTemplate内にレイアウトしていた、要素が表示される(クリックで拡大)

「アセット」パネルから「ビヘイビア」を選択し、FluidMoveBehaviorビヘイビアを「オブジェクトとタイムライン(B)」内の[StackPanel]上にドラッグ&ドロップします(図10)。

図10: [StackPanel]上にFluidMoveBehaviorビヘイビアをドラッグ&ドロップする

[StackPanel]要素の子としてFluidMoveBehaviorが追加されます(図11)。

図11: [StackPanel]要素の子としてFluidMoveBehaviorが追加された

[StackPanel]要素の子として追加された、FluidMoveBehaviorのプロパティを設定します。[共通プロパティ]のAppliesToプロパティにはChildrenを指定します。AppliesToプロパティにはビヘイビアを適用するオブジェクトを選択します。Childrenは指定したオブジェクトのすべての子に、ビヘイビアが適用されます。次にEaseXとEaseYをドロップダウンリストから選択します。EaseXプロパティには水平方向のイージング機能を指定します。ここではCubicInOutを指定しています。EaseYプロパティには垂直方向のイージング機能を指定します。ここではCubicInOutを指定しています。

[タグプロパティ]内のInitialTagはデフォルトのElementのままにしておきます。TagプロパティにはDataContextを指定します(図12)。詳細については「第1回 ブラウザの画面のサイズ変更に伴って、自動的に複数の画像が並び替わる」を参照してください。

図12: [StackPanel]要素のFluidMoveBehaviorの各プロパティを設定した

CallMethodActionの設定

FluidMoveBehaviorビヘイビアの設定は完了です。次に、ButtonコントロールにCallMethodActionを設定していきます。

「アセット」パネルで「ビヘイビア」を選択し、「オブジェクトとタイムライン(B)」内のButton1要素上にCallMehtodActionをドラッグ&ドロップします(図13)。

図13: CallMethodActionをButton1上にドラッグ&ドロップする

CallMethodActionのプロパティを設定します。[共通プロパティ]内のTargetObjectの横にある小さな□アイコンをクリックして、「カスタム式」の入力ボックスを表示させます。その中に、

  • {Binding ElementName=myUserControl, Mode=OneWay}

と入力します(図14)。ElementNameに指定しているmyUserControlは、SilverlightControl1.xaml内のに指定したNameです。

図14: TargetObjectプロパティに「カスタム式」を入力する

MethodNameプロパティには、SilverlightControl1.xaml.vb内で定義した、パブリックプロシージャである、AddRightItemを指定します(図15)。

図15: MethodNameプロパティを設定した

Button1に対するCallMethodActionの設定はこれで終わりです。同様にButton2に対しても同じ操作を行います。

TargetObjectの「カスタム式」には、{Binding ElementName=myUserControl, Mode=OneWay}と指定し、MethodNameには、SilverlightControl1.xaml.vb内で定義した、パブリックプロシージャである、AddLeftItemを指定します。

以上でBlend4の設定は全部完了です。

Blend4のメニューから「プロジェクト(P)/プロジェクトの実行(R)」と選択して実行してみましょう。いかがですか?うまくアニメーションされましたか。

Blend4の操作を終わり、VS2010に戻ります。VS2010上からも実行して動作を確認してください。

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

リスト5: 書き出されたXAMLコード(SilverControl1.xaml)

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="SL4_FluidMoveBehavior_ListBox.SilverlightControl1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600" x:Name="myUserControl">
    <UserControl.Resources>
        <DataTemplate x:Key="ListBoxDataTemplate">
            <Grid>
                <Image Width="160" Height="120" Source="{Binding 画像名}" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top"/>
            </Grid>
        </DataTemplate>

(1)ListBoxItemsPanelTemplate内の<StackPanel>要素にFluidMoveBehaviorが設定されています。<CubicEase>要素のEasingModeプロパティにEaseInOutが指定されています。
        <ItemsPanelTemplate x:Key="ListBoxItemsPanelTemplate">■(1)
            <StackPanel>
            	<i:Interaction.Behaviors>
            		<ei:FluidMoveBehavior AppliesTo="Children" Tag="DataContext">
            			<ei:FluidMoveBehavior.EaseY>
            				<CubicEase EasingMode="EaseInOut"/>
            			</ei:FluidMoveBehavior.EaseY>
            			<ei:FluidMoveBehavior.EaseX>
            				<CubicEase EasingMode="EaseInOut"/>
            			</ei:FluidMoveBehavior.EaseX>
            		</ei:FluidMoveBehavior>
            	</i:Interaction.Behaviors>
            </StackPanel>
        </ItemsPanelTemplate>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Height="Auto" Margin="22,48,518,12" x:Name="ListBox1" ItemsPanel="{StaticResource ListBoxItemsPanelTemplate}"  ItemTemplate="{StaticResource ListBoxDataTemplate}"/>
        <ListBox Margin="435,48,121,12" x:Name="ListBox2" ItemsPanel="{StaticResource ListBoxItemsPanelTemplate}"  ItemTemplate="{StaticResource ListBoxDataTemplate}"/>

(2)<Button>要素に対して<CallMethodAction>要素とそのプロパティが設定されています。
        <Button Content=">>" Height="41" HorizontalAlignment="Left" Margin="296,231,0,0" x:Name="Button1" VerticalAlignment="Top" Width="127">
        	<i:Interaction.Triggers>
        		<i:EventTrigger EventName="Click">
        			<ei:CallMethodAction TargetObject="{Binding ElementName=myUserControl, Mode=OneWay}" MethodName="AddRightItem"/>■(2)
        		</i:EventTrigger>
        	</i:Interaction.Triggers>
        </Button>
        <Button Content="<<" Height="41" HorizontalAlignment="Left" Margin="296,278,0,0" x:Name="Button2" VerticalAlignment="Top" Width="127">
        	<i:Interaction.Triggers>
        		<i:EventTrigger EventName="Click">
        			<ei:CallMethodAction TargetObject="{Binding ElementName=myUserControl, Mode=OneWay}" MethodName="AddLeftItem"/>■(2)
        		</i:EventTrigger>
        	</i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

VS2010の画面に戻った時、FluidMoveBehavior関連のXAMLコードに波線が表示され、エラーとなってデザイン画面が表示されない場合は、一度VS2010を終了し、再度起動し直すことで解決します。

四国の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/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています