Buttonをデザインする
WPFではテンプレート機能を利用し、テンプレートを編集することで、既存のコントロールの外観を変更できます。TextBoxコントロールはシンプルな設定だけでしたが、Buttonコントロールは外観の変更やアニメーションを付加してみます。加工前と加工後のButtonコントロールはこのようになります。
ButtonコントロールらしいButtonコントロールから、大きく変化した星形のButtonコントロールになりました。この星形Buttonコントロールはクリックされると、その場で1回転するアニメーションも付加されています。この項目での作業は以下の2点です。
- Buttonコントロールのテンプレートを編集
- アニメーション機能の付加
Buttonコントロールのテンプレートを編集
Blendでもツールボックスからコントロールを配置した時点では、VS 2008上で張り付けたコントロールと変わらない状態です。ただし、対象のコントロール上で右クリックし［コントロールパーツ（テンプレート）の編集］－［コピーの編集］を選択すると、そのコントロールの既定のテンプレートを確認、編集することができます。
既に作成されたStyleリソースの適用は簡単で、ツールボックスからコントロールを配置した後で、右クリックし［コントロールパーツ（テンプレート）の編集］－［リソースの適用］を選択するだけです。これで、判子を押したように同じスタイルのコントロールが作成できます。
テンプレートの詳細な情報は、「Expression Blendで始めるWPFアプリケーション（後編）」（＠IT）にて詳しく解説されているので、そちらを参考にしてください。
Buttonコントロールのテンプレートを編集する前に、作業を円滑に進めるための設定をします。アートボードの左下からは表示・グリッドに関する設定が行えます（図12）。
以下の設定に変更してください。
- 400％に拡大
- グリッドの表示
- グリッド線への位置合わせオン
- ガイドへの位置合わせオン
準備もできたのでテンプレートを編集しましょう。簡単に流れを記します。
- テンプレート内部の再構築
- テンプレートの外観を星形にデザイン
- 星形の配色と文字の配置
テンプレート内部の再構築
Buttonコントロールにフォーカスをあて、［コントロールパーツ（テンプレート）の編集］－［コピーの編集］を選択します。
今回は大幅に外見を変えるので、テンプレートの中身（Chorme）を削除します。続いて、ツールボックスから四角形を選択してフォーム上に配置します（図13）。
この段階で、配置した四角形はオブジェクトです。形を変化させるには、パスを利用する必要があるので、メニューの［オブジェクト］－［パス］－［パスに変換］を選択し、パスに変換します。
テンプレートの外観を星形にデザイン
パスに変換を行っても4点しかない状態なので、ツールボックスからペンを選択し、星形にするため、点を6つ追加します（図14）。
いよいよ、オブジェクトの整形です。ツールボックスの直接選択をクリックし、Pathオブジェクトの点を選択すると、点の位置を変更できるので、グリッド線を利用して図15のように配置させます。
以上の手順で星形に見えるようになりました。
星形の配色と文字の配置
配色は、TextBox同様にグラデーションブラシを利用します。Fillのグラデーション設定は以下の通りです。
| RGB | 左の境界 | 中央の境界 | 右の境界 |
| R | 225 | 230 | 222 |
| G | 230 | 246 | 255 |
| B | 189 | 118 | 0 |
今回は、グラデーション スライドの下部にある［放射状グラデーション］にもチェックをつけます。Strokeはグラデーションブラシを選択し、初期設定（黒→白）のまま利用します。これで、星形Buttonコントロールの外観は完成です。
このままではテキストが表示されないので、ContentPresenterコントロールを追加します。テンプレートにPathオブジェクトと何か別のコントロールを持たせる場合には、コンテナを使用します。Pathオブジェクト上で右クリックし「グループ化設定」－［Grid］を選択します。続いて、ツールボックスの資産ライブラリからContentPresenterコントロールを選択し、Gridコントロール内に配置します。
ContentPresenterコントロールはContentControlから派生するコントロールのコンテンツの書式設定を行うコントロールです。文字表示のほとんどはこのコントロールを利用します。
文字の大きさはテンプレート側ではなく、Buttonコントロール側で設定します。文字サイズは9で星形内に収まるはずです。
完成したButtonコントロールは図11のようになります。
アニメーション機能の付加
機能的に星形Buttonコントロールは完成されていますが、Blendの機能の1つ「アニメーション」を利用して、手早く一回転するアニメーションも付加します。
星形Buttonコントロールを選択しインタラクションパネルの［トリガ］－［+イベント］を選択し、ドロップダウンから「Button1」と「Click」を選択します（図16）。これで、星形Buttonコントロールがクリックされた時のアニメーションイベントが準備できました。
次に［＋］－［新しいアクションの追加］を選択してタイムラインを追加します。初めてタイムラインを追加する場合は、［タイムラインが必要です］というダイアログが表示されるので［OK］をクリックします。既定では「OnClick1」というタイムラインが追加されます。
タイムラインの設定
タイムラインはアニメーションの時系列を表示するラインです。図17の左下に表示されています。黄色の縦に伸びている線を［タイムライン再生ヘッド］といい、タイムライン上に表示されている白い丸は［キーフレーム］といいます。また、タイムラインの上部に書かれている数字はイベント開始からの時間で、対象のコントロールのプロパティが変化した時にキーフレームが設定されます。
タイムライン（アニメーション）の記録を行っている間、アートボードは赤線で囲まれていて、アートボードの左上には赤丸と［タイムライン記録オン］と表示されます。タイムラインの記録をオフにするには、［オブジェクトとタイムライン］のドロップダウンから［既定］を選択するか、アートボードの赤丸をクリックします。
基本的なタイムラインの利用方法は以上です。実際に星形Buttonコントロールに回転させるタイムライン設定を行います。使用するプロパティは［変換］カテゴリの［回転］プロパティです。［タイムライン記録オン］になっているのを確認し、フォーカスをあてて次の設定を行います。
| 再生ヘッドの位置 | 回転プロパティ |
| 0 | 0 |
| 0.5 | 180 |
| 1 | 360 |
以上で、クリック後1秒かけて1回転する星形Buttonコントロールの完成です。
