読者です 読者をやめる 読者になる 読者になる

cafe. Blend

Expression Blend 勉強会

その12:Visual State Managerを覚えよう。

連載:0から始めるExpression Blend 4 再入門

だいぶBlendの難しい部分に入ってきました。

Visual State Managerとは、コントロールの各状態における挙動をテンプレート化して定義するものです。
これを使えば、クリックしたら青色になりながらへっこんだり、オンマウスでぽこっと飛び出たりといったアニメーションを、状態として定義することができます。

今回も、Rectangleを使って説明します。
1.いつもどおり、四角形をおきます。

2.右にあるStateパネルを開いて、Add State Groupボタンをクリックします。

3.State Groupが出来るので、Customと名前をつけます。
次にAdd Stateボタンをクリックして、Stateを2つつくります。

4.それぞれUpとDownという名前をつけました。

5.Downの時の挙動を定義するために、クリックして選択します。
今回は、現状から1秒後に青になる、というアニメーションをつけました。


6.同じように、Upには、現状から1秒後に緑になる、というアニメーションをつけました。

7.rectangleにイベントハンドラをつけます。
MouseLeftButtonDownイベントには以下のように。

private void rectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
      VisualStateManager.GoToState(this, "Down", true);
}

MouseLeftButtonUpには以下のように。

private void rectangle_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
      VisualStateManager.GoToState(this, "Up", true);
}

8.ビルドして、実行しましょう。
rectangleをクリックしているあいだは、青に。離すと緑になりますね。

9.このStateが変わるとき、トランジションを付けることも可能です。
Up,Downで定義したアニメーションのキーを0秒にずらし、すぐに色がかわるようにしましょう。


10.Default transitionをWaveにしてビルドします。

11.ビルドしてみましょう。波のようなエフェクトがかかってビジュアルが変化します。
12.さらにVSMは、任意のStateから任意のStateへ変化するときのトランジションも指定できます。
DownのAdd transitionをクリックします。

13.Down -> Upを選択しましょう。

14.Downの下に表示されたUpのtransitionを定義します。
今回はRippleにしてみました。

15.ビルドして実行してみましょう。
クリックしている間はWaveトランジションがかかり、離すとぷるるんっといったRippleトランジションがかかります。
16.Baseをクリックして、Stateの編集を終わります。