CodeZine(コードジン)

特集ページ一覧

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

Visual Studio 2008徹底入門(6)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

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

 ListBoxコントロールはTextBoxコントロールに近いデザインにします。違うのはテンプレート内にImageコントロールを配置している点と、[変換]カテゴリの[傾き]プロパティを使用している点です。加工前と加工後のListBoxコントロールはこのようになります。

図18 加工前のListBoxコントロール
図18 加工前のListBoxコントロール
図19 加工後のListBoxコントロール
図19 加工後のListBoxコントロール
  • テンプレートにImageコントロールを組み込む
  • コントロールの変換
  • 外観/配色の設定

テンプレートにImageコントロールを組み込む

 ListBoxコントロールにフォーカスをあて、[コントロールパーツ(テンプレート)の編集]-[コピーの編集]を選択します。ScrollViewerコントロール上で右クリックし「グループ化設定」-[グリッド]を選択します。Gridコントロール内に[資産ライブラリ]からImageコントロールを選択して配置します。

ScrollViewerコントロール
 ScrollViewerコントロールはWPFアプリケーション上で、1つだけ子コントロールを持てる、スクロール可能なパネルコントロールです。

 Imageコントロールに表示する画像は[共通プロパティ]カテゴリのSourceプロパティで選択します。この状態では、後から配置したImageコントロールが前面に配置されてしまいます。配置順番を変えるにはImageコントロール上で右クリックし、[順序]-[背面に移動]を選択します。

 以上でListBoxコントロール内に画像を表示できるようになりました。

コントロールの変換

 カスタマイズしたListBoxコントロールを変換します。プロパティパネルの[変換]カテゴリを展開し、[傾き]プロパティを選択します。X軸・Y軸の傾き設定ができるので、それぞれ(5,0)に設定します。

外観/配色の設定

 最後にListBoxコントロールの外観/配色を設定します。Backgroundにグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 40 118
G 42 179
B 110 208

 BorderBrushは既定のまま、Foregroundは白色に設定します。グラデーションブラシを利用している場合、グラデーションの向きを変更することもできます(図20)。ツールボックスからブラシの変換を選択すると、ブラシ変換矢印がアートボードに表示されます。この矢印の向きを変更するとグラデーションの向きが変わります。今回は斜め下向きに設定しました。

図20 ブラシ変換矢印の設定
図20 ブラシ変換矢印の設定

 以上で、ListBoxコントロールの設定は完了です。

 おまけになりますが、フォームの元となっているGridコントロールにもグラデーションをかけてみましょう。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 5 0
G 7 4
B 55 116

 ブラシ変換矢印の向きは右上から左下に変更します。これで、今回Blendで作成するサンプルのデザインは完成です。最初に示した図2のようになったかと思います。

 また、VS 2008側でビジネスロジックも記述しているので、実行すると、以下のように表示されます(図21)。

図21 完成したサンプル
図21 完成したサンプル

 以上でVS 2008とExpression Blendを利用したWPFアプリケーションサンプルは完成です。実際の開発やデザインもこのように進めていくことができます。

まとめ

 今回はVS 2008とBlendを利用したWPF開発の紹介を行いました。今までのWindowsフォームと違い、WPFの特徴を活かすにはBlendの利用は外せません。XAML(UI)に関する実装(アニメーション含む)はBlendで、ビジネスロジックやアプリケーションの管理はVS 2008で行いましょう。

 また、Blendはデザイナーだけのツールではありません、微細な手直しやデザイナーの協力が望めない場合は開発者がデザインを行うことになります。Blendの利用に抵抗を感じる方も多いかと思いますが、まずはGUIに慣れる事から始めましょう。

Expression Blendの今後

 BlendではWPFアプリケーション開発は行えますが、Silverlightを利用したサイトやアプリケーションは作成できません。今後リリース予定のBlend 2ではSilverlight 1.0のサポートや.NET Framework 3.5対応が正式に行われ、Blend 2.5ではSilverlight 2アプリケーションのサポートも行われるようになる予定です。Silverlightを利用した開発を進めたい方はBlend 2以降を利用しましょう。

 次回は、より実用的なサービスの提供が可能となったWCFについてご紹介します。お楽しみに。

参考文献

 


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

バックナンバー

連載:Visual Studio 2008徹底入門

もっと読む

著者プロフィール

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

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

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

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5