SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Visual Studio 2008徹底入門(PR)

触れてみようUIデザインツールExpression Blend

Visual Studio 2008徹底入門(6)

  • このエントリーをはてなブックマークに追加

Buttonをデザインする

 WPFではテンプレート機能を利用し、テンプレートを編集することで、既存のコントロールの外観を変更できます。TextBoxコントロールはシンプルな設定だけでしたが、Buttonコントロールは外観の変更やアニメーションを付加してみます。加工前と加工後のButtonコントロールはこのようになります。

図10 加工前のButtonコントロール
図10 加工前のButtonコントロール
図11 加工後のButtonコントロール
図11 加工後のButtonコントロール

 ButtonコントロールらしいButtonコントロールから、大きく変化した星形のButtonコントロールになりました。この星形Buttonコントロールはクリックされると、その場で1回転するアニメーションも付加されています。この項目での作業は以下の2点です。

  • Buttonコントロールのテンプレートを編集
  • アニメーション機能の付加

Buttonコントロールのテンプレートを編集

 Blendでもツールボックスからコントロールを配置した時点では、VS 2008上で張り付けたコントロールと変わらない状態です。ただし、対象のコントロール上で右クリックし[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択すると、そのコントロールの既定のテンプレートを確認、編集することができます。

Styleリソースとその管理
 テンプレートの編集の前に、同様のテンプレートのスタイルを他のコントロールでも適用できるように、[Styleリソースの作成]ダイアログが表示されます。ダイアログ上で[リソース名(キー)]と[定義元]を設定でき、リソースパネルで定義されたリソースを確認することができます。
既に作成されたStyleリソースの適用は簡単で、ツールボックスからコントロールを配置した後で、右クリックし[コントロールパーツ(テンプレート)の編集]-[リソースの適用]を選択するだけです。これで、判子を押したように同じスタイルのコントロールが作成できます。

 テンプレートの詳細な情報は、「Expression Blendで始めるWPFアプリケーション(後編)」(@IT)にて詳しく解説されているので、そちらを参考にしてください。

 Buttonコントロールのテンプレートを編集する前に、作業を円滑に進めるための設定をします。アートボードの左下からは表示・グリッドに関する設定が行えます(図12)。

図12 アートボードの設定
図12 アートボードの設定

 以下の設定に変更してください。

  • 400%に拡大
  • グリッドの表示
  • グリッド線への位置合わせオン
  • ガイドへの位置合わせオン

 準備もできたのでテンプレートを編集しましょう。簡単に流れを記します。

  • テンプレート内部の再構築
  • テンプレートの外観を星形にデザイン
  • 星形の配色と文字の配置

テンプレート内部の再構築

 Buttonコントロールにフォーカスをあて、[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択します。

 今回は大幅に外見を変えるので、テンプレートの中身(Chorme)を削除します。続いて、ツールボックスから四角形を選択してフォーム上に配置します(図13)。

図13 四角形を配置した図
図13 四角形を配置した図

 この段階で、配置した四角形はオブジェクトです。形を変化させるには、パスを利用する必要があるので、メニューの[オブジェクト]-[パス]-[パスに変換]を選択し、パスに変換します。

テンプレートの外観を星形にデザイン

 パスに変換を行っても4点しかない状態なので、ツールボックスからペンを選択し、星形にするため、点を6つ追加します(図14)。

図14 パスオブジェクトに点の追加
図14 パスオブジェクトに点の追加

 いよいよ、オブジェクトの整形です。ツールボックスの直接選択をクリックし、Pathオブジェクトの点を選択すると、点の位置を変更できるので、グリッド線を利用して図15のように配置させます。

図15 Pathオブジェクトの整形
図15 Pathオブジェクトの整形

 以上の手順で星形に見えるようになりました。

星形の配色と文字の配置

 配色は、TextBox同様にグラデーションブラシを利用します。Fillのグラデーション設定は以下の通りです。

Fillのグラデーション設定
RGB 左の境界 中央の境界 右の境界
R 225 230 222
G 230 246 255
B 189 118 0

 今回は、グラデーション スライドの下部にある[放射状グラデーション]にもチェックをつけます。Strokeはグラデーションブラシを選択し、初期設定(黒→白)のまま利用します。これで、星形Buttonコントロールの外観は完成です。

 このままではテキストが表示されないので、ContentPresenterコントロールを追加します。テンプレートにPathオブジェクトと何か別のコントロールを持たせる場合には、コンテナを使用します。Pathオブジェクト上で右クリックし「グループ化設定」-[Grid]を選択します。続いて、ツールボックスの資産ライブラリからContentPresenterコントロールを選択し、Gridコントロール内に配置します。

Grid/ContentPresenterコントロール
 GridコントロールはWPFアプリケーション上のコンテンツ(コントロール)をGrid形式で正確に配置できるコントロールです。
ContentPresenterコントロールはContentControlから派生するコントロールのコンテンツの書式設定を行うコントロールです。文字表示のほとんどはこのコントロールを利用します。

 文字の大きさはテンプレート側ではなく、Buttonコントロール側で設定します。文字サイズは9で星形内に収まるはずです。

 完成したButtonコントロールは図11のようになります。

アニメーション機能の付加

 機能的に星形Buttonコントロールは完成されていますが、Blendの機能の1つ「アニメーション」を利用して、手早く一回転するアニメーションも付加します。

 星形Buttonコントロールを選択しインタラクションパネルの[トリガ]-[+イベント]を選択し、ドロップダウンから「Button1」と「Click」を選択します(図16)。これで、星形Buttonコントロールがクリックされた時のアニメーションイベントが準備できました。

図16 イベントトリガの追加
図16 イベントトリガの追加

 次に[+]-[新しいアクションの追加]を選択してタイムラインを追加します。初めてタイムラインを追加する場合は、[タイムラインが必要です]というダイアログが表示されるので[OK]をクリックします。既定では「OnClick1」というタイムラインが追加されます。

タイムラインの設定

 タイムラインはアニメーションの時系列を表示するラインです。図17の左下に表示されています。黄色の縦に伸びている線を[タイムライン再生ヘッド]といい、タイムライン上に表示されている白い丸は[キーフレーム]といいます。また、タイムラインの上部に書かれている数字はイベント開始からの時間で、対象のコントロールのプロパティが変化した時にキーフレームが設定されます。

図17 タイムライン設定時の画面
図17 タイムライン設定時の画面

 タイムライン(アニメーション)の記録を行っている間、アートボードは赤線で囲まれていて、アートボードの左上には赤丸と[タイムライン記録オン]と表示されます。タイムラインの記録をオフにするには、[オブジェクトとタイムライン]のドロップダウンから[既定]を選択するか、アートボードの赤丸をクリックします。

 基本的なタイムラインの利用方法は以上です。実際に星形Buttonコントロールに回転させるタイムライン設定を行います。使用するプロパティは[変換]カテゴリの[回転]プロパティです。[タイムライン記録オン]になっているのを確認し、フォーカスをあてて次の設定を行います。

星形Buttonコントロールのタイムライン設定
再生ヘッドの位置 回転プロパティ
0 0
0.5 180
1 360

 以上で、クリック後1秒かけて1回転する星形Buttonコントロールの完成です。

 

次のページ
ListBoxコントロールを斜めに傾けてみる

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Visual Studio 2008徹底入門連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト りばてぃ/FUJIKO/ナオキ(リバティ, フジコ, ナオキ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2354 2009/04/14 11:19

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング