CodeZine(コードジン)

特集ページ一覧

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

Visual Studio 2008徹底入門(6)

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

Expression Blendチュートリアル

 ここからが本稿の本題、Blendを利用したデザインのチュートリアルです。デザインを行うツールなので、VS 2008とはツールの使い方が異なる点を意識して読んでください。

Expression BlendのGUI

 [ファイル]-[プロジェクトを開く]で、VS 2008で作ったプロジェクトを選択し、[開く]をクリックします。プロジェクトが展開された画面は以下のようになります(図5)。

図5 Blendで開いたWPFフォーム
図5 Blendで開いたWPFフォーム

 Blendの画面は開発者にとって慣れるまで異質なGUIに感じるかと思います。簡単にですが、利用方法について紹介します。図6の番号と照らし合わせてみてください。

図6 Blendで開いたWPFフォーム
図6 Blendで開いたWPFフォーム
表2 Expression Blend全体像
ワークスペース 概要
①ツールボックス アプリケーションのオブジェクトを作成、または管理を行う
②インタラクションパネル アートボード上のオブジェクトの管理とアニメーションタイムラインの作成・管理を行う
③アートボード XAML表示と、フォーム表示を切り替えられるフォームデザイナ
④結果パネル アプリケーションエラーのデバッグ情報を表示
⑤プロジェクト、プロパティ、リソースパネル 現在のプロジェクト管理、各コントロールのプロパティ管理、プロジェクトで使用されているリソースの管理を行う

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

TextBoxを少し加工する

 最初はシンプルに、入力フォームであるTextBoxコントロールを少し加工します。使うのはプロパティパネルだけです。加工前と加工後を先に提示します。

図7 加工前のTextBoxコントロール
図7 加工前のTextBoxコントロール
図8 加工後のTextBoxコントロール
図8 加工後のTextBoxコントロール

 どうですか? ちょっとした設定でWindowsフォームのTextBoxコントロールとだいぶ違う印象を受けたかと思います。今回設定するのは以下の2点です。

  • TextBoxコントロールの配色設定
  • 外観

TextBoxコントロールの配色設定

 配色を変更する前にブラシについて解説します。

ブラシ

 ブラシはオブジェクトの配色設定をするために使用します。基本的なブラシは次のようになっています。

  • 実線色ブラシ(単色のブラシ)
  • グラデーション ブラシ
  • タイル ブラシ
  • ブラシ無し

 なお、グラデーションスライダ上に表示されるグラデーションを設定するためのアイコンを[境界]と呼びます(図9)。

図9 TextBoxコントロールのブラシ設定
図9 TextBoxコントロールのブラシ設定

 それではTextBoxコントロールの配色を行います。アートボードでTextBoxコントロールにフォーカスをあて、プロパティパネルを展開します。[ブラシ]カテゴリで、Background(背景色)・BorderBrush(線色)・Foreground(テキスト色)・OpacityMask(透過マスク色)を設定できます。今回はBackground、Foregroundを以下のように設定します。

 Backgroundはグラデーション ブラシを利用します。グラデーションの設定は以下の通りです。

Backgroundのグラデーション設定
RGB 左の境界 右の境界
R 74 161
G 91 237
B 139 239

 ForegroundはRGBすべて255に設定(白色)します。

外観

 続いて、TextBoxの外観の設定を行います。Opacity設定などもできますが、今回はビットマップ効果のみの設定です。

ビットマップ効果

 ビットマップ効果は、対象のオブジェクトにピクセル処理を実行するために使用します。ビットマップ効果は次のようになっています。

Backgroundのグラデーション設定
ぼかし 焦点がずれているように見える効果
光彩(外側) オブジェクトの外側に表示される光のエフェクト効果
影付き オブジェクトの背後に影を表示
面取り 表面から浮き出すような面を付ける効果
浮き出し 凹凸があるような視覚効果を生む効果

 サンプルで適用するのは[光彩(外側)]です。設定は以下のようになっています。

ビットマップ効果の設定
BitmapEffect 光彩(外側)
GlowColor RGB(0、184、255)
GlowSize 15
Noise 5
Opacity 50

 以上の設定でTextBoxコントロールのデザインは完成です。完成したTextBoxコントロールは図8のようになります。

 

  • 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