うましかアプリのデザイン構造をさらに理解する
プロジェクトから「DescriptionControl.xaml」を開いてみてください。
うましかアプリは実行中に下の方のエリアにマウスを乗せると、説明文がにょきっと出てきます。このアニメーションは動きが単純なので、先ほどのようにストーリーボードは使いません。代わりに「状態」と「ビヘイビア」という機能を使うと楽に作れます。状態とは、たとえばこのにょきっと出てくるパネルの「出ている状態」と「引っ込んでいる状態」をあらかじめ定義しておくことで、２つの状態を簡単に切り替えられる機能です。
「状態」ウィンドウを開いてみてください。ShowとHideという文字が見えますね。
この「状態」は「状態の追加」ボタンから自由に追加できます。アニメーションの切り替えにかける時間や、その際の動き方もここで設定できます。
ためしに「Hide」ボタンを押してみましょう。先に「切り替え効果プレビューをオンにする」が有効になっていることを確認します。ShowとHideを交互に押すと、パネルの位置がスムーズに切り替わるのが確認できましたか？
「記録オン」と表示されているときにオブジェクトを動かすと操作が記録されますので、間違って書き換えたりしないように、「ベース」を選択して記録オン状態から抜けておきましょう。
今度は、この定義してある「Show」と「Hide」を使う方法を見てみましょう。「ビヘイビア」という機能を使います。ビヘイビアとは振る舞いのことで、オブジェクトの動作の振る舞いをあとから定義できる機能なのですが、簡単に言うと本来ならプログラムを書いて定義しなければいけない動作を、オブジェクトに追加するだけで簡単に実現できる機能です。
今回、この表示を切替えるために、「GoToStateAction」というビヘイビアを使っています。オブジェクトにビヘイビアを追加したい場合は、「アセット」ウィンドウからビヘイビアを選択して、要素の上にドラッグ＆ドロップします。対象のオブジェクトを間違えないために、「オブジェクトとタイムライン」ウィンドウ内へドラッグ＆ドロップすると便利です。
「オブジェクトとタイムライン」ウィンドウからdescriptionControlを見てください。その下にGoToStateActionが2つあると思いますが、そのうち1つめを選択してください。プロパティウィンドウを見ると、「トリガー」と「共通プロパティ」が表示されます。ここで指定できることは、何が起きたら（EventName）、どのオブジェクトを（TargetName）どの状態にする（StateName）か、です。
GoToStateActionを2つ使って、マウスが領域に入ったときに状態を「Show」に、領域から外れたときに状態を「Hide」にしています。
