インタラクティブ コントロールの選択と使用

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 には、独自の外観を持ったアプリケーションを簡単にデザインできるコントロールが多数あります。

すべてのコントロールが [アセット] パネルに一覧されています。このパネルを開くには、[ツール] パネルの下端にある [アセット] をクリックします。Expression Blend 画面の左側には、[ツール] パネルがあります。[アセット] パネルで UI 要素を選択すると、そのアイコンが [アセット] ボタンの下に表示されるので、後で同じ要素を簡単に選択できます。[アセット] ボタンの下には、よく使用する UI 要素も表示されています。

詳細については、「アセット パネル」および「ツール パネル」を参照してください。

次の図は、一般的な UI 要素をオブジェクトとして追加した後のアートボードです。[ペン] ツール は、Path オブジェクト を生成します。[アセット] パネルで Image コントロールを選択すると、Image アイコン が [ツール] パネルに表示されます。

[ツール] パネルとアートボード

	オレンジの色見本の図形を表す、"Path_40" という名前のパス オブジェクト。		アプリケーションに含まれる "Reset Image" というラベルのボタンを表す、名前のないボタン オブジェクト。[オブジェクトとタイムライン] パネルでは、オブジェクトのアクセス キーをアンダースコア (_) で示します。
	色見本上にあるペイント チップの 1 つを表す、"Rectangle_44" という名前の四角形オブジェクト。		部屋の背景イメージを表す、"photo_bathroom" という名前のイメージ オブジェクト。
	アプリケーション "Color Swatch Sample Pack 1" のタイトルを表す、含まれるテキストによって識別される、名前のないテキスト ブロック。

使用するコントロールを決定するには、次のカテゴリに関してコントロールを検討します。

カテゴリ	使用	例
図形	楕円、線、四角形を使用して豊富なビジュアル要素を作成するときに使用されます。要素の外観は必要に応じて単純にすることも、複雑でカラフルにすることもできます。 詳細については、「図形とパスの描画」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルだけを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。	Rectangle  Ellipse  Path ([線] 、[ペン] 、[鉛筆]  の各描画ツールで生成されます)
レイアウト パネル	UI 要素のコンテナーとして使用されます。要素の位置とウィンドウ サイズの変更動作を指定します。 ほとんどの UI 要素とは異なり、一部のレイアウト パネル ([Grid] など) には複数の子要素を含めることができます。この機能は、アプリケーション デザインを編成し、レイアウトするときに便利です。 詳細については、「オブジェクトの配置」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。	Canvas  Dock  Grid  Stack  Wrap
ドキュメント/テキスト	ドキュメントの表示とテキストの形式を定義するために使用されます。 詳細については、「テキストの描画」を参照してください。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルとテンプレートを使用してカスタマイズできます。 詳細については、「テンプレートの作成または変更」および「スタイルの編集」を参照してください。	TextBox  TextBlock  RichTextBox  Label  PasswordBox
コントロール	ユーザーがアプリケーションと対話する方法を提供するために使用されます。 Expression Blend のビジュアル要素の外観と動作は、[プロパティ] パネルを使用するか、スタイルとテンプレートを使用してカスタマイズできます。 詳細については、「テンプレートの作成または変更」および「スタイルの編集」を参照してください。	Button  ListBox  Menu  RadioButton  CheckBox
デコレータ	他の要素に効果を適用するときに使用されます。デコレータには、通常は外観に影響を及ぼす要素である 1 つの子要素を含めることができます。 これらの要素は一般に、ボタン テンプレートの ButtonChrome 要素など、他のコントロールに適用するテンプレート内で使用されます。Expression Blend のデコレータ要素自体の外観と動作は、[プロパティ] パネルを使用するか、スタイルだけを使用して (テンプレートは使用しません) カスタマイズできます。 詳細については、「スタイルの編集」を参照してください。	Border  ButtonChrome Viewbox

各コントロールの特長については、MSDN の「Windows Presentation Foundation 」にある「型ファミリ 」を参照してください。

コントロールの作成と変更

コントロールをアートボードに追加するには、[ツール] パネルにあるコントロールのアイコンをダブルクリックするか、アイコンを選択してからマウスでアートボードに要素を描きます。

詳細については、「インタラクティブ コントロールの選択と使用」の下にある操作方法のトピックを参照してください。

[アセット] パネルにあるコントロールをダブルクリックすると、そのコントロールが既定のサイズで現在のアクティブな要素に挿入されます。これは、コンテンツを追加するときに、多くの場合、既定のサイズは [自動] に設定され、コントロールのサイズが正しく設定されるため便利です。

Expression Blend のアートボードに追加したコントロールは、アプリケーションのオブジェクトになりますオブジェクトの変更方法は多様で、オブジェクトのサイズ変更、移動、回転、反転、および傾きを操作するオブジェクト上のハンドルを使用する方法や、サイズ、位置、回転の正確な値を入力できる [プロパティ] パネルを使用する方法があります。

詳細については、「オブジェクトの追加または変更」または「オブジェクトおよびプロパティの使用」の操作方法のトピックを参照してください。

Expression Blend でコントロールを操作する方法は独特です。コントロールの中に、別のコントロール、パネル、図形要素を配置できます。これは、コントロールを組み合わせるときに便利です。たとえば、イメージとテキストを示すボタンを作成するには、StackPanel レイアウト パネルをボタンにドラッグして、StackPanel レイアウト パネルにイメージとテキストのコントロールを追加するだけで済みます。

コントロールは特定の継承ルールに従います。たとえば、親要素として機能し、子要素 (コンテンツ) を入れ子できるコントロールと、子要素を持てないコントロールがあります。子要素は、常にドキュメントのルート (最上位のパネル) に追加されます。Expression Blend で初めて作業を開始したときは、LayoutRoot 要素がルートと見なされ、既定では、ドキュメントに挿入するすべての子要素の親になります。ドキュメントの別のコントロールに子要素を追加する場合は、[オブジェクトとタイムライン] パネルで、追加先のコントロールの名前をダブルクリックしてアクティブにする必要があります。黄色の枠はアクティブ化された要素を示すため、新しいコントロールが追加された場所がわかります。

次の表に、Expression Blend で使用できるコントロールを、継承の種類別に示します。

カテゴリ	説明	例
簡易コントロール	簡易コントロールは、コントロールとコントロールに設定できるプロパティで構成されます。簡易コントロールにコンテンツは指定できません。つまり、子要素を持つことはできません。	Image  ScrollBar
コンテンツ コントロール	コンテンツ コントロールは他の要素を指定できます (または単純なシナリオの場合、テキストとして文字列を表示できます)。コンテンツ コントロールには、Content プロパティが 1 つあります。つまり、文字列などの単一のコンテンツを含めることができます。レイアウト パネルなどの他の要素を含めることもできます。 例については、「コンテンツ コントロールの描画」を参照してください。	CheckBox  RadioButton
アイテム コントロール	アイテム コントロールには子要素のコレクションが含まれます。手動でアイテムを Items コレクション プロパティに追加したり、データ コレクションを ItemsSource プロパティにバインドできます。アイテム コントロールは、アイテム コレクションを公開し、Content プロパティと Header プロパティを含みません。 例については、「アイテム コントロールの描画」を参照してください。	ComboBox  ListBox
ヘッダー付きコントロール	ヘッダー付きコントロールには、コントロールにラベルを付けるヘッダーの子要素が含まれます。コンテンツ (ヘッダー コンテンツ コントロール) またはアイテムのコレクション (ヘッダー アイテム コントロール) を含めることができます。 例については、「ヘッダー付きコントロールの描画」を参照してください。	TabControl  TabItem MenuItem

これらのコントロールの特長については、MSDN  の「Windows Presentation Foundation」にある「コンテンツ モデル」を参照してください。

スタイルとテンプレート

前述したように、コントロール用のテンプレートとスタイルを作成するなど、さまざまな方法でコントロールをカスタマイズして、ユニークで統一の取れたアプリケーションを作成できます。テンプレートはコントロールを構成する部品を定義し、スタイルはコントロールの既定の動作を定義します。テンプレートとスタイルを作成するには、コントロールに対するシステムの既定のスタイルとテンプレートのコピーを作成します (システムのスタイルとテンプレートを変更することはできません)。コピーしたテンプレートとスタイルを変更することは、事実上、コードを使わずに Expression Blend の [デザイン] ビューで新しいコントロールを作成していることになります。

詳細については、「テンプレートを使用するコントロールのスタイルの設定」を参照してください。

Copyright ©2011 by Microsoft Corporation. All rights reserved.