Blend4でのGotoStateActionの設定
GotoStateActionアクションを使用してトリガーを指定します。BlindsButtonと状態のBlinds、SmoothSwirlGridButtonと状態のSmoothSwirlGrid、WaveButtonと状態のWaveを関連付ける、GotoStateActionアクションを設定します。
「アセット」パネルから「ビヘイビアー」を選択し、GotoStateActionアクションを「オブジェクトとタイムライン(B)」内のBlindsButton上にドラッグ&ドロップします。BlindsButtonの子としてGotoStateActionが追加されます（図21）。
|
|
| 図21：GotoStateActionをBlindsButton上にドラッグ&ドロップする |
BlindsButtonの子として追加されたGotoStateActionのプロパティを設定します。[トリガー]内のEventNameが「Click」になっているのを確認してください。次に、TargetNameプロパティの横に付いている[…]ボタンをクリックします。「要素の選択」画面が表示され、要素の一覧が表示されます。「ターゲットにする要素の選択」にImageShowAreaを指定します（図22）。ImageShowAreaはTransitionEffectImageShowに付けたx:Nameです。[共通プロパティ]内のStateNameに、BlindsButtonがクリックされた時の状態である、Blindsを選択します（図23）。必ず先にTargetNameプロパティを設定してから、StateNameを選択してください。TargetNameを指定していない場合は、StateNameに何も表示されませんので、注意してください。TargetNameプロパティは「詳細プロパティの表示」をクリックすると表示されます（図22）。
|
|
| 図22：TargetNameプロパティの値を「ターゲットにする要素の選択」内から指定する（クリックで拡大） |
|
|
| 図23：StateNameプロパティの値を選択する |
以上の手順でSmoothSwirlGridButtonとWaveButtonにGotoStateActionを追加し、それぞれのプロパティを設定していきます。TargetNameには全てImageShowAreaを指定します。
全て設定すると「オブジェクトとタイムライン(B)」内の各Buttonの子としてGotoStateActionが追加されています（図24）。
|
|
| 図24：各Buttonの子としてGotoStateActionが追加されている |
以上でBlend4の設定は全部完了です。Blend4の操作を終わり、VS2010に戻ります。
MainPage.xaml内にTransitionEffectImageShowButtonユーザーコントロールを取り込む
ソリューションエクスプローラー内からMainPage.xamlを選択します。要素のWidthに800、Heightに600と指定します。図18を参考にlocalという名前空間を指定します。要素内に
|
|
| 図25：要素内にTransitionEffectImageShowButtonを取り込む |
するとMainPage.xamlのデザイン画面に3つのボタンの並んだTransitionEffectImageShowButtonユーザーコントロールが表示されます（図26）。
|
|
| 図26：MainPage.xamlのデザイン画面にTransitionEffectImageShowButtonユーザーコントロールが表示された（クリックで拡大） |
VS2010メニューの「デバッグ(D)／デバッグ開始(S)」と選択して実行してみましょう。どうですか？うまくTransitionEffect効果が機能しましたか？ほかにもいろいろなTransitionEffectが用意されていますので、今回の手順で各自が試してみてください。
書き出されるTransitionEffectImageShowButton.xamlのコードはリスト2です。
リスト2書き出されたXAMLコード（TransitionEffectImageShowButton.xaml）
07 | （１）localという名前空間を宣言しています。 |
08 | xmlns:local="clr-namespace:SL4_TransitionEffect" ■（１） |
11 | d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600"> |
13 | <Grid x:Name="LayoutRoot" Background="White"> |
14 | <TextBlock Height="62" HorizontalAlignment="Left" Margin="16,12,0,0" x:Name="TextBlock1" Text="TransitionEffcet" VerticalAlignment="Top" Width="390" FontSize="40" FontWeight="Bold" /> |
16 | （２）各Buttonに<ei:GotoStateAction>要素が記述され、TargetNameとStateNameプロパティが設定されています。 |
17 | <Button Content="Blinds" Height="39" HorizontalAlignment="Left" Margin="16,88,0,0" x:Name="BlindsButton" VerticalAlignment="Top" Width="118" > |
18 | <i:Interaction.Triggers> |
19 | <i:EventTrigger EventName="Click"> |
20 | <ei:GoToStateAction TargetName="ImageShowArea" StateName="Blinds"/> ■（２） |
22 | </i:Interaction.Triggers> |
24 | <Button Content="SmoothSwirlGrid" Height="39" HorizontalAlignment="Left" Margin="16,133,0,0" x:Name="SmoothSwirlButton" VerticalAlignment="Top" Width="118" > |
25 | <i:Interaction.Triggers> |
26 | <i:EventTrigger EventName="Click"> |
27 | <ei:GoToStateAction TargetName="ImageShowArea" StateName="SmoothSwirlGrid"/>■（２） |
29 | </i:Interaction.Triggers> |
31 | <Button Content="Wave" Height="39" HorizontalAlignment="Left" Margin="16,178,0,0" x:Name="WaveButton" VerticalAlignment="Top" Width="118" > |
32 | <i:Interaction.Triggers> |
33 | <i:EventTrigger EventName="Click"> |
34 | <ei:GoToStateAction TargetName="ImageShowArea" StateName="Wave"/>■（２） |
36 | </i:Interaction.Triggers> |
39 | （３）TransitionEffectImageShowユーザーコントロールを取り込んでいます。x:NameにはImageShowAreaと指定しています。 |
40 | <local:TransitionEffectImageShow x:Name="ImageShowArea" Width="640" Height="480" Margin="140,88,20,32" /> ■（３） |
