インタラクティブ コントロールの選択と使用
Microsoft Expression Blend には、Windows Presentation Foundation (WPF) アプリケーションと Microsoft Silverlight アプリケーションのユーザー インターフェイスをデザインするときに使用できるコントロールが多数用意されています。
Expression Blend は、単に既定のコントロールやシステム コントロールを使うだけでなく、さまざまな用途に応じて、コントロールをカスタマイズしたりスタイルを設定できるようになっています。また、Expression Blend のリソースは、カスタム コントロールを会社のブランドやイメージに合った独自の外観にしたり、すべてのアプリケーションのユーザー インターフェイス (UI) を統したりするのに便利です。Expression Blend のコントロール編集モデルの大きな特長の 1 つは、デザイナーがアプリケーションの外観をデザインしている間に、開発者がプログラミング ロジックを記述できることです。デザイナーが直接デザインを作成できるので、試験段階から実装の間にデザインがなくなることはありません。
コントロールとは
コントロール (UI のデザイン要素) とは、アプリケーションで表示されるコンポーネントです。ユーザーは、コントロール (ボタンや選択できる項目のリストなど) を操作してアプリケーションとやりとりします。思ったとおりの外観と機能が備わったアプリケーションを作成するには、Expression Blend で使用できるコントロールと、コントロールをカスタマイズする方法を理解することが大切です。
Expression Blend では、アートボードでコントロールを目で見ながら操作できます。コントロールの外観や動作を設定するには、[プロパティ] パネルと [オブジェクトとタイムライン] パネルを使います。たとえば、アートボードに [Button] コントロールを追加したとします。まず、[プロパティ] パネルの値を変更してその外観を変更します。次に、[アセット] パネルからビヘイビアーを追加して、ユーザがボタンをクリックするとアニメーション タイムラインが再生されるようにします。
詳細については、「プロパティ パネル」および「オブジェクトとタイムライン パネル」を参照してください。
このような単純動作以外に、コントロールに対して次の動作も実行できます。
プロパティ (ブラシの色など) を他のコントロールに適用できるリソースに変換し、アプリケーションの外観をユニークで一貫性のあるものにします。
例については、「リソースの作成」を参照してください。
外観と動作を定義する新しいテンプレートとコントロールのスタイルを作成します。それによって、アプリケーションの外観はユニークで一貫性のあるものになります。テンプレートとスタイルを作成するときに、トリガーを含めたり、プロパティ設定用のリソースを使用することができます。詳細については、下の「スタイルとテンプレート」を参照してください。
詳細については、次のトピックを参照してください。
アニメーション機能やインタラクティブ機能をコントロールに追加します。
例については、「単純なアニメーションの作成」を参照してください。
コントロールの複雑な動作を、分離コード ファイルのイベント ハンドラー メソッドでプログラミングします。
詳細については、「新しいイベント ハンドラー メソッドの作成」および「試してみよう : Silverlight アプリケーションでの新しいページの動的読み込み」を参照してください。
独自のカスタム コントロールをデザインして、Expression Blend で使用します。
詳細については、次のトピックを参照してください。
コントロールのカテゴリ
Expression Blend には、独自の外観を持ったアプリケーションを簡単にデザインできるコントロールが多数あります。
すべてのコントロールが [アセット] パネルに一覧されています。このパネルを開くには、[ツール] パネルの下端にある [アセット] .png "Cc294749.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png")
をクリックします。Expression Blend 画面の左側には、[ツール] パネルがあります。[アセット] パネルで UI 要素を選択すると、そのアイコンが [アセット] ボタンの下に表示されるので、後で同じ要素を簡単に選択できます。[アセット] ボタンの下には、よく使用する UI 要素も表示されています。
詳細については、「アセット パネル」および「ツール パネル」を参照してください。
次の図は、一般的な UI 要素をオブジェクトとして追加した後のアートボードです。[ペン] ツール .png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(JA-JP,Expression.30).png")
は、[Path] オブジェクト .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(JA-JP,Expression.30).png")
を生成します。[アセット] パネルで [Image] コントロールを選択すると、[イメージ] アイコン .png "Cc294749.adb61060-da5f-4279-8c0d-3681bfeb145c(JA-JP,Expression.30).png")
が [ツール] パネルに表示されます。
[ツール] パネルとアートボード
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(JA-JP,Expression.30).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(JA-JP,Expression.30).png") |
オレンジの色見本の図形を表す、"Path_40" という名前のパス オブジェクト。 |
.png "Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(JA-JP,Expression.30).png") |
アプリケーションに含まれる "Reset Image" というラベルのボタンを表す、名前のないボタン オブジェクト。[オブジェクトとタイムライン] パネルでは、オブジェクトのアクセス キーをアンダースコア (_) で示します。 |
.png "Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(JA-JP,Expression.30).png") |
色見本上にあるペイント チップの 1 つを表す、"Rectangle_44" という名前の四角形オブジェクト。 |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(JA-JP,Expression.30).png") |
部屋の背景イメージを表す、"photo_bathroom" という名前のイメージ オブジェクト。 |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(JA-JP,Expression.30).png") |
アプリケーション "Color Swatch Sample Pack 1" のタイトルを表す、含まれるテキストによって識別される、名前のないテキスト ブロック。 |
使用するコントロールを決定するには、次のカテゴリに関してコントロールを検討します。
カテゴリ |
使用 |
例 |
|---|---|---|
図形 |
楕円、線、四角形を使用して豊富なビジュアル要素を作成するときに使用されます。要素の外観は必要に応じて単純にすることも、複雑でカラフルにすることもできます。 詳細については、「図形とパスの描画」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルだけを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。 |
四角形 楕円 パス ([線] |
レイアウト パネル |
UI 要素のコンテナーとして使用されます。要素の位置とウィンドウ サイズの変更動作を指定します。 ほとんどの UI 要素とは異なり、一部のレイアウト パネル ([Grid] など) には複数の子要素を含めることができます。この機能は、アプリケーション デザインを編成し、レイアウトするときに便利です。 詳細については、「オブジェクトの配置」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。 |
Canvas DockPanel Grid StackPanel WrapPanel |
ドキュメント/テキスト |
ドキュメントの表示とテキストの形式を定義するために使用されます。 詳細については、「テキストの描画」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルとテンプレートを使用してカスタマイズできます。 詳細については、「テンプレートの作成または変更」および「スタイルの編集」を参照してください。 |
TextBox TextBlock RichTextBox Label PasswordBox |
コントロール |
ユーザーがアプリケーションと対話する方法を提供するために使用されます。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルとテンプレートを使用してカスタマイズできます。 詳細については、「テンプレートの作成または変更」および「スタイルの編集」を参照してください。 |
Button ListBox Menu RadioButton CheckBox |
デコレータ |
他の要素に効果を適用するときに使用されます。デコレータには、通常は外観に影響を及ぼす要素である 1 つの子要素を含めることができます。 これらの要素は一般に、ボタン テンプレートの ButtonChrome 要素など、他のコントロールに適用するテンプレート内で使用されます。Expression Blend のデコレータ要素自体の外観と動作は、[プロパティ] パネルを使用するか、スタイルだけを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。 |
Border ButtonChrome Viewbox |
.png "Cc294749.ae750268-92e8-403a-9e07-b662da4e9e1e(JA-JP,Expression.30).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(JA-JP,Expression.30).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(JA-JP,Expression.30).png")
、[ペン] .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(JA-JP,Expression.30).png")
ツールで描きます。).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(JA-JP,Expression.30).png")
.png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(JA-JP,Expression.30).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(JA-JP,Expression.30).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(JA-JP,Expression.30).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(JA-JP,Expression.30).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(JA-JP,Expression.30).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(JA-JP,Expression.30).png")
.png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(JA-JP,Expression.30).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(JA-JP,Expression.30).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(JA-JP,Expression.30).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(JA-JP,Expression.30).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(JA-JP,Expression.30).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(JA-JP,Expression.30).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(JA-JP,Expression.30).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(JA-JP,Expression.30).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(JA-JP,Expression.30).png")
各コントロールの特長については、MSDN の「Windows Presentation Foundation」にある「型ファミリ」を参照してください。
コントロールの作成と変更
コントロールをアートボードに追加するには、[ツール] パネルにあるコントロールのアイコンをダブルクリックするか、アイコンを選択してからマウスでアートボードに要素を描きます。
詳細については、「インタラクティブ コントロールの選択と使用」の下にある操作方法のトピックを参照してください。
[アセット] パネルにあるコントロールをダブルクリックすると、そのコントロールが既定のサイズで現在のアクティブな要素に挿入されます。これは、コンテンツを追加するときに、多くの場合、既定のサイズは [自動] に設定され、コントロールのサイズが正しく設定されるため便利です。
Expression Blend のアートボードに追加したコントロールは、アプリケーションのオブジェクトになりますオブジェクトの変更方法は多様で、オブジェクトのサイズ変更、移動、回転、反転、および傾きを操作するオブジェクト上のハンドルを使用する方法や、サイズ、位置、回転の正確な値を入力できる [プロパティ] パネルを使用する方法があります。
詳細については、「オブジェクトの追加または変更」または「オブジェクトおよびプロパティの使用」の操作方法のトピックを参照してください。
Expression Blend でコントロールを操作する方法は独特です。コントロールの中に、別のコントロール、パネル、図形要素を配置できます。これは、コントロールを組み合わせるときに便利です。たとえば、イメージとテキストを示すボタンを作成するには、ボタンを [StackPanel] レイアウト パネルにドラッグして、このレイアウトにイメージとテキストのコントロールを追加するだけで済みます。
コントロールは特定の継承ルールに従います。たとえば、親要素として機能し、子要素 (コンテンツ) を入れ子できるコントロールと、子要素を持てないコントロールがあります。子要素は、常にドキュメントのルート (最上位のパネル) に追加されます。Expression Blend で初めて作業を開始したときは、[LayoutRoot] 要素がルートと見なされ、既定では、ドキュメントに挿入するすべての子要素の親になります。ドキュメントの別のコントロールに子要素を追加する場合は、[オブジェクトとタイムライン] パネルで、追加先のコントロールの名前をダブルクリックしてアクティブにする必要があります。黄色の強調表示はアクティブ化された要素を示すため、新しいコントロールが追加された場所がわかります。
次の表に、Expression Blend で使用できるコントロールを、継承の種類別に示します。
カテゴリ |
説明 |
例 |
|---|---|---|
簡易コントロール |
簡易コントロールは、コントロールとコントロールに設定できるプロパティで構成されます。簡易コントロールにコンテンツは指定できません。つまり、子要素を持つことはできません。 |
Image ScrollBar |
コンテンツ コントロール |
コンテンツ コントロールは他の要素を指定できます (または単純なシナリオの場合、テキストとして文字列を表示できます)。コンテンツ コントロールには、Content プロパティがあります。つまり、文字列などの単一のコンテンツを含めることができます。レイアウト パネルなどの他の要素を含めることもできます。 例については、「コンテンツ コントロールの描画」を参照してください。 |
CheckBox RadioButton |
アイテム コントロール |
アイテム コントロールには子要素のコレクションが含まれます。アイテム コレクション プロパティに手動でアイテムを追加したり、データ コレクションを ItemsSource プロパティにバインドしたりできます。アイテム コントロールはアイテム コレクションを公開し、Content プロパティと Header プロパティはありません。 例については、「アイテム コントロールの描画」を参照してください。 |
ComboBox ListBox |
ヘッダー付きコントロール |
ヘッダー付きコントロールには、コントロールにラベルを付けるヘッダーの子要素が含まれます。コンテンツ (ヘッダー コンテンツ コントロール) またはアイテムのコレクション (ヘッダー アイテム コントロール) を含めることができます。 例については、「ヘッダー付きコントロールの描画」を参照してください。 |
TabControl TabItem MenuItem |
.png "Cc294749.6513a026-499e-4296-8a67-7558b466bd33(JA-JP,Expression.30).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(JA-JP,Expression.30).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(JA-JP,Expression.30).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(JA-JP,Expression.30).png")
これらのコントロールの特長については、MSDN の「Windows Presentation Foundation」にある「コンテンツ モデル」を参照してください。
スタイルとテンプレート
前述したように、コントロール用のテンプレートとスタイルを作成するなど、さまざまな方法でコントロールをカスタマイズして、ユニークで統一の取れたアプリケーションを作成できます。テンプレートはコントロールを構成する部品を定義し、スタイルはコントロールの既定の動作を定義します。テンプレートとスタイルを作成するには、既定のスタイルとテンプレートのコピーを作成します (システムのスタイルとテンプレート自体を変更することはできません)。コピーしたテンプレートとスタイルを変更することは、事実上、コードを使わずに Expression Blend の [デザイン] ビューで新しいコントロールを作成していることになります。
詳細については、「テンプレートをサポートするコントロールのスタイル処理」を参照してください。