GotoStateActionアクションを使ってトリガーを指定する

開発ツール

技術解説

連載 :

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

2011年1月25日(火)

PROJECT KySS

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

リスト1: 書き出されたXMLコード（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_GotoStateAction.MainPage"
07    mc:Ignorable="d"
08    d:DesignHeight="300" d:DesignWidth="400" Width="900" Height="600">
09（1）NameがLayoutRootの<Canvas>要素に、ImageSlidInのGotoStateActionが設定されています。
10    <Canvas x:Name="LayoutRoot" Background="White">
11        <i:Interaction.Triggers>
12            <i:EventTrigger>
13                <ei:GoToStateAction StateName="ImageSlideIn"/>■（1）
14            </i:EventTrigger>
15        </i:Interaction.Triggers>
16        <VisualStateManager.VisualStateGroups>
17 
18（2）ImageSlideInの状態が設定され、Go_Buttonの<Visibility>要素にCollapsedが指定されています。
19            <VisualStateGroup x:Name="VisualStateGroup">
20                <VisualState x:Name="ImageSlideIn"> ■（2）
21                    <Storyboard>　
22                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image2">
23                            <EasingDoubleKeyFrame KeyTime="0" Value="34"/>
24                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="200"/>
25                        </DoubleAnimationUsingKeyFrames>
26                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image3">
27                            <EasingDoubleKeyFrame KeyTime="0" Value="34"/>
28                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="366"/>
29                        </DoubleAnimationUsingKeyFrames>
30                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image4">
31                            <EasingDoubleKeyFrame KeyTime="0" Value="34"/>
32                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="532"/>
33                        </DoubleAnimationUsingKeyFrames>
34                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image5">
35                            <EasingDoubleKeyFrame KeyTime="0" Value="34"/>
36                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="698"/>
37                        </DoubleAnimationUsingKeyFrames>
38                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Go_Button">
39                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
40                                <DiscreteObjectKeyFrame.Value>
41                                <Visibility>Collapsed</Visibility>■（2）
42                                </DiscreteObjectKeyFrame.Value>
43                            </DiscreteObjectKeyFrame>
44                        </ObjectAnimationUsingKeyFrames>
45                    </Storyboard>
46                </VisualState>
47 
48（3）ImageSlideOutの状態が設定され、Reset_Buttonの<Visibility>要素にVisibleが設定されています。
49                <VisualState x:Name="ImageSlideOut"> ■（3）
50                    <Storyboard>
51                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image2">
52                            <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
53                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="34"/>
54                        </DoubleAnimationUsingKeyFrames>
55                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image3">
56                            <EasingDoubleKeyFrame KeyTime="0" Value="366"/>
57                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="34"/>
58                        </DoubleAnimationUsingKeyFrames>
59                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image4">
60                            <EasingDoubleKeyFrame KeyTime="0" Value="532"/>
61                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="34"/>
62                        </DoubleAnimationUsingKeyFrames>
63                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Left)" Storyboard.TargetName="Image5">
64                            <EasingDoubleKeyFrame KeyTime="0" Value="698"/>
65                            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="34"/>
66                        </DoubleAnimationUsingKeyFrames>
67                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Go_Button">
68                            <DiscreteObjectKeyFrame KeyTime="0:0:1">
69                                <DiscreteObjectKeyFrame.Value>
70                                    <Visibility>Visible</Visibility>■（3）
71                                </DiscreteObjectKeyFrame.Value>
72                            </DiscreteObjectKeyFrame>
73                        </ObjectAnimationUsingKeyFrames>
74                    </Storyboard>
75                </VisualState>
76            </VisualStateGroup>
77        </VisualStateManager.VisualStateGroups>
78        <TextBlock Canvas.Left="30" Canvas.Top="24" Height="58" x:Name="TextBlock1" Text="GotoStateAction" Width="408" FontSize="40" FontWeight="Bold" />
79        <Button Canvas.Left="36" Canvas.Top="113" Content="リセット" Height="44" x:Name="Reset_Button" Width="128" >
80            <i:Interaction.Triggers>
81                <i:EventTrigger EventName="Click">
82                    <ei:GoToStateAction StateName="ImageSlideOut"/>
83                </i:EventTrigger>
84            </i:Interaction.Triggers>
85        </Button>
86        <Button Canvas.Left="36" Canvas.Top="113" Content="実行" Height="44" x:Name="Go_Button" Width="128" >
87            <i:Interaction.Triggers>
88                <i:EventTrigger EventName="Click">
89                    <ei:GoToStateAction StateName="ImageSlideIn"/>
90                </i:EventTrigger>
91            </i:Interaction.Triggers>
92        </Button>
93        <Image Canvas.Left="34" Canvas.Top="185" Height="120" x:Name="Image1" Stretch="Fill" Width="160" Source="/SL4_GotoStateAction;component/Image/おしろい花.jpg" />
94        <Image Canvas.Left="200" Canvas.Top="185" Height="120" x:Name="Image2" Stretch="Fill" Width="160" Source="/SL4_GotoStateAction;component/Image/サルビア.jpg" />
95        <Image Canvas.Left="366" Canvas.Top="185" Height="120" x:Name="Image3" Stretch="Fill" Width="160" Source="/SL4_GotoStateAction;component/Image/ベゴニア.jpg" />
96        <Image Canvas.Left="532" Canvas.Top="185" Height="120" x:Name="Image4" Stretch="Fill" Width="160" Source="/SL4_GotoStateAction;component/Image/ポピー.jpg" />
97        <Image Canvas.Left="698" Canvas.Top="185" Height="120" x:Name="Image5" Stretch="Fill" Width="160" Source="/SL4_GotoStateAction;component/Image/マツバギク.jpg" />
98    </Canvas>
99</UserControl>

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

ロジックコードはありません。

いかがだったでしょうか？5回の連載で、ビヘイビアーを使ったサンプルを紹介しました。ビヘイビアーを使うと、ロジックコードをほとんど、または、一切記述することなく、動きのあるページを容易に作成することができます。ほとんどがBlend4内での設定で可能になります。皆さんにビヘイビアーのすごさを実感していただければ幸いです。

本年には、Silverlight5がリリースされる予定です。40以上もの新機能が追加される模様です。それまでに、VS2010とBlend 4の基本操作をマスターしておきませんか。

著者

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/