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

FluidMoveBehaviorとCallMethodActionを設定する

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

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

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

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

［StackPanel］要素の子としてFluidMoveBehaviorが追加されます（図11）。

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

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

CallMethodActionの設定

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

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

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

• {Binding ElementName=myUserControl, Mode=OneWay}

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

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

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を終了し、再度起動し直すことで解決します。