ホーム > Expression Blend > 0からはじめるExpression Blend再入門

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

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月13日 from Atelier:Mitsuba

はじめに

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

Visual State Managerとは、コントロールの各状態における挙動をテンプレート化して定義するものです。

これを使えば、クリックしたら青色になりながらへっこんだり、オンマウスでぽこっと飛び出たりといったアニメーションを、状態として定義することができます。

今回も、Rectangleを使って説明します。

状態グループの追加

  1. いつもどおり、四角形をおきます。
    f:id:c-mitsuba:20110428024521p:image

  2. 右にあるStateパネルを開いて、Add State Groupボタンをクリックします。
    f:id:c-mitsuba:20110428024520p:image

  3. State Groupが出来るので、Customと名前をつけます。
    次にAdd Stateボタンをクリックして、Stateを2つつくります。
    f:id:c-mitsuba:20110428024519p:image

  4. それぞれUpとDownという名前をつけました。
    f:id:c-mitsuba:20110428024518p:image

アニメーションを定義する

  1. Downの時の挙動を定義するために、クリックして選択します。

    今回は、現状から1秒後に青になる、というアニメーションをつけました。
    f:id:c-mitsuba:20110428024517p:image
    f:id:c-mitsuba:20110428024516p:image
  2. 同じように、Upには、現状から1秒後に緑になる、というアニメーションをつけました。
    f:id:c-mitsuba:20110428024515p:image

イベントバンドラをつける

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);
}

ビルドして実行

  1. ビルドして、実行しましょう。
    rectangleをクリックしているあいだは、青に。離すと緑になりますね。
  2. このStateが変わるとき、トランジションを付けることも可能です。

    Up,Downで定義したアニメーションのキーを0秒にずらし、すぐに色がかわるようにしましょう。
    f:id:c-mitsuba:20110428030838p:image

    f:id:c-mitsuba:20110428030837p:image
  3. Default transitionをWaveにしてビルドします。
    f:id:c-mitsuba:20110428030836p:image
  4. ビルドしてみましょう。波のようなエフェクトがかかってビジュアルが変化します。
  5. さらにVSMは、任意のStateから任意のStateへ変化するときのトランジションも指定できます。

    DownのAdd transitionをクリックします。
    f:id:c-mitsuba:20110428030834p:image
  6. Down -> Upを選択しましょう。
    f:id:c-mitsuba:20110428030833p:image
  7. Downの下に表示されたUpのtransitionを定義します。
    今回はRippleにしてみました。
    f:id:c-mitsuba:20110428030832p:image
  8. ビルドして実行してみましょう。
    クリックしている間はWaveトランジションがかかり、離すとぷるるんっといったRippleトランジションがかかります。
  9. Baseをクリックして、Stateの編集を終わります。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ