だいぶBlendの難しい部分に入ってきました。
Visual State Managerとは、コントロールの各状態における挙動をテンプレート化して定義するものです。
これを使えば、クリックしたら青色になりながらへっこんだり、オンマウスでぽこっと飛び出たりといったアニメーションを、状態として定義することができます。
今回も、Rectangleを使って説明します。
１．いつもどおり、四角形をおきます。
2.右にあるStateパネルを開いて、Add State Groupボタンをクリックします。
3.State Groupが出来るので、Customと名前をつけます。
次にAdd Stateボタンをクリックして、Stateを２つつくります。
4.それぞれUpとDownという名前をつけました。
5.Downの時の挙動を定義するために、クリックして選択します。
今回は、現状から１秒後に青になる、というアニメーションをつけました。
6.同じように、Upには、現状から１秒後に緑になる、というアニメーションをつけました。
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で定義したアニメーションのキーを０秒にずらし、すぐに色がかわるようにしましょう。
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の編集を終わります。
