PR

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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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