コントロールの概要
.png "このページは WPF および Silverlight 2 に適用されます")
Microsoft Expression Blend にはさまざまなコントロールが用意されており、それを使用して Windows Presentation Foundation (WPF) および Silverlight 2 アプリケーションの多様なユーザー インターフェイスをデザインできます。
.gif "メモ") メモ : |
|---|
Microsoft Silverlight 1.0 プロジェクトで使用できるコントロールの一覧については、「Silverlight 1.0 の概要」の「コントロール」のセクションを参照してください。 |
Expression Blend を使用すると、既定のコントロールまたはシステム WPF コントロールを単純に操作する以上のことを実行できます。目的の処理を実行するように、コントロールをカスタマイズしたりスタイルを設定したりできます。また、Expression Blend のリソースを使用することで、カスタム コントロールはユニークで魅力的な外観になり、高度なブランド力のある操作性を実現します。さらに、すべてのアプリケーションで一貫したユーザー インターフェイス (UI) を作成することで、他のアプリケーションと差別化できます。Expression Blend が備えるコントロール編集モデルが持つ最大の利点の 1 つは、デザイナがアプリケーションの外観をデザインしている間に、開発者がプログラミング ロジックを記述できることです。デザイナはデザインを直接作成できるため、模擬表示から実装への変換の過程でデザインが失われることはありません。
コントロールとは
コントロール (UI デザイン要素) は、アプリケーションの表示コンポーネントです。コントロール (ボタンや選択できる項目のリストなど) によって、ユーザーはアプリケーションと対話できます。Expression Blend で使用できるコントロールと、コントロールのカスタマイズ方法を理解すると、アプリケーションの外観と動作をねらいどおりにすることができます。
Expression Blend を使用すると、アートボード上のコントロールを視覚的に処理し、プロパティ パネルと [組み合わせ] パネルで外観と動作を構成できます。たとえば、Button コントロールをアートボードに追加し、[プロパティ] パネルの値を変更することで外観を変更し、[組み合わせ] パネルのボタンにイベント トリガを追加してボタンがクリックされたときにアニメーションのタイムラインを開始することができます。
このような単純動作以外に、コントロールに対して次の動作も実行できます。
プロパティ (ブラシの色など) を他のコントロールに適用できるリソースに変換し、アプリケーションの外観をユニークで一貫性のあるものにします。例については、「リソースの作成」を参照してください。
外観と動作を定義する新しいテンプレートとコントロールのスタイルを作成します。それによって、アプリケーションの外観はユニークで一貫性のあるものになります。テンプレートとスタイルにはトリガを含むことができ、プロパティを設定するリソースも使用できます。詳細については、後の「Styles and templates」を参照してください。WPF の例については、「スタイル リソースの作成」および「コントロール テンプレートの作成または編集」を参照してください。Silverlight 2 の例については、「システム コントロール用の再利用可能なテンプレートの作成」および「Silverlight 2 プロジェクトでのコントロール用のスキンの作成」を参照してください。
アニメーション機能やインタラクティブ機能をコントロールに追加します。例については、「単純なアニメーションの作成」を参照してください。
コードビハインド ファイルのイベント ハンドラ メソッドについて、より複雑な動作をプログラムします。WPF の例については、「新しいイベント ハンドラ メソッドの作成」を参照してください。Silverlight 2 の例については、「Silverlight 2 アプリケーションでの新しいページの動的読み込み」を参照してください。
独自のカスタム コントロールをデザインし、Expression Blend で使用します。WPF の例については、「試してみよう : カスタム WPF コントロールの作成」および「試してみよう : WPF ユーザー コントロールの作成」を参照してください。Silverlight 2 の例については、「Silverlight 2 プロジェクトでの新しいユーザー コントロールの作成」を参照してください。
.gif "Cc294749.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
コントロールのカテゴリ
Expression Blend には、独自の外観を持ったアプリケーションを簡単にデザインできるコントロールの種類が多数あります。
すべてのコントロールは、ツールボックスの下部にある [アセット ライブラリ] .png "Cc294749.0224cabd-5da1-4e01-bddd-4a647401a098(ja-jp,Expression.10).png")
ボタンをクリックしてアセット ライブラリから使用できます。ツールボックスは Expression Blend の左側にあります。アセット ライブラリから UI 要素を選択すると、その要素のアイコンが [アセット ライブラリ] ボタンの上に表示され、その要素を簡単に選択できるようになります。最も一般的な UI 要素は [アセット ライブラリ] ボタンの上に表示されているため、すぐに探すことができます。
次の図は、一般的な UI 要素をオブジェクトとして追加した後のアートボードです。ペン .png "Cc294749.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(ja-jp,Expression.10).png")
ツールで、Path .png "Cc294749.e1882d38-c773-4abe-a2b9-10abd293e119(ja-jp,Expression.10).png")
オブジェクトを生成します。Image コントロールの後にツールボックスに表示される Image .png "Cc294749.0594f05b-2193-4385-86a0-2d352cacfe55(ja-jp,Expression.10).png")
アイコンは、[アセット ライブラリ] から選択されました。
ツールボックスからアートボードへ
.png "Cc294749.abd88d9d-ab6c-444e-8037-469cdcb5586a(ja-jp,Expression.10).png")
.png "Cc294749.25182a96-9a69-478a-9cfe-5b360e6a9bea(ja-jp,Expression.10).png") |
オレンジの色見本のシェイプを表す、"Path_40" という名前のパス オブジェクト。 |
.png "Cc294749.eb6fad93-f17e-4f62-a926-8c8651862891(ja-jp,Expression.10).png") |
アプリケーションに含まれる "Reset Image" というラベルのボタンを表す、名前のないボタン オブジェクト。[オブジェクトとタイムライン] では、ボタンのアクセス キーはアンダースコア (_) で示されます。 |
.png "Cc294749.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(ja-jp,Expression.10).png") |
色見本上にあるペイント チップの 1 つを表す、"Rectangle_44" という名前の四角形オブジェクト。 |
.png "Cc294749.a5d608f2-bba2-48c5-8b15-2c115db86acc(ja-jp,Expression.10).png") |
部屋の背景イメージを表す、"photo_bathroom" という名前のイメージ オブジェクト。 |
.png "Cc294749.f0c1ff71-7814-42ba-806b-7ea92d616e69(ja-jp,Expression.10).png") |
アプリケーション "Color Swatch Sample Pack 1" のタイトルを表す、含まれるテキストによって識別される、名前のないテキスト ブロック。 |
使用するコントロールを決定するには、次のカテゴリに関してコントロールを検討します。
カテゴリ |
使用 |
例 |
|---|---|---|
シェイプ (Silverlight 1.0 プロジェクトで使用可能) |
楕円、線、四角形を使用して豊富なビジュアル要素を作成するときに使用されます。要素の外観は必要に応じて単純にすることも、複雑でカラフルにすることもできます。詳細については、「図形とパスの描画」を参照してください。 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.10).png")
.png "Cc294749.d7a04618-e35a-44f9-b78c-1f22e38016c1(ja-jp,Expression.10).png")
.png "Cc294749.eb618397-5283-48be-8396-3449be7b6fbf(ja-jp,Expression.10).png")
、ペン .png "Cc294749.509dc167-734f-46c9-b012-987ee63450cd(ja-jp,Expression.10).png")
の各描画ツールで生成されます).png "Cc294749.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(ja-jp,Expression.10).png")
(Silverlight 1.0 プロジェクトで使用可能).png "Cc294749.db9f1ff5-6bca-441d-b289-c6781a478a5b(ja-jp,Expression.10).png")
.png "Cc294749.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.10).png")
.png "Cc294749.ec58af86-cc2a-4e1f-91c0-883c5406fdfb(ja-jp,Expression.10).png")
.png "Cc294749.91486eda-6173-4ce8-9610-4f296dcb83d7(ja-jp,Expression.10).png")
.png "Cc294749.343296b4-5c7d-4145-84cc-91b08ba67a1b(ja-jp,Expression.10).png")
.png "Cc294749.42165963-00f7-4a33-abcd-b0849edebada(ja-jp,Expression.10).png")
(Silverlight 1.0 プロジェクトで使用可能).png "Cc294749.0ee48635-456b-4ebd-b8e4-ce3658417b8e(ja-jp,Expression.10).png")
.png "Cc294749.a27042f1-4067-4239-b99a-8b2e4c223de0(ja-jp,Expression.10).png")
.png "Cc294749.31e4dc7e-8cf4-4014-83e4-9b50ec6ee663(ja-jp,Expression.10).png")
.png "Cc294749.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,Expression.10).png")
.png "Cc294749.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ja-jp,Expression.10).png")
.png "Cc294749.015a263c-0b2b-4253-ac57-b86fcb8c9591(ja-jp,Expression.10).png")
.png "Cc294749.33646a24-f5a1-4b74-9496-e0aaddb922c6(ja-jp,Expression.10).png")
.png "Cc294749.91bc7bff-27d2-4dfe-93ab-844f2952186f(ja-jp,Expression.10).png")
.png "Cc294749.be354518-c54c-4f86-9c57-0b4a9d384b3e(ja-jp,Expression.10).png")
コントロール タイプの特性の詳細については、MSDN の「Windows Presentation Foundation」のセクションにある「型ファミリ」のトピックを参照してください。
先頭に戻る
コントロールの作成と変更
コントロールをアートボードに追加するには、ツールボックスのアイコンをダブルクリックするか、ツールボックスのアイコンを選択してマウスで要素をアートボードに描きます。詳細については、「コントロール」の操作方法のトピックを参照してください。[アセット ライブラリ] のコントロールをダブルクリックすると、コントロールが現在のアクティブな要素に既定のサイズで挿入されます。これは、コンテンツを追加するときに、多くの場合、既定のサイズは [自動] に設定され、コントロールのサイズが正しく設定されるため便利です。
コントロールを Expression Blend のアートボードに追加すると、アプリケーションのオブジェクトになりますオブジェクトの変更方法は多様で、オブジェクトのサイズ変更、移動、回転、反転、および傾きを操作するオブジェクト上のハンドルを使用する方法や、サイズ、位置、回転の正確な値を入力できる [プロパティ] パネルを使用する方法があります。詳細については、「オブジェクトの追加または変更」または「オブジェクトおよびプロパティの使用」の操作方法のトピックを参照してください。
Expression Blend でのコントロールの操作方法は独特です。コントロール内に、他のコントロール、パネル、またはシェイプ要素を配置できます。これはコントロールを組み合わせるときに便利です。たとえば、イメージやテキストを指定したボタンを作成するには、[スタック] パネル コントロールをボタンに配置し、イメージとテキストのコントロールを [スタック] パネルに追加するだけです。
コントロールは特定の継承ルールに従います。たとえば、一部のコントロールは親要素として動作し、入れ子にする子要素 (コンテンツ) を持つことができます。他のコントロールは子要素をサポートしません。Expression Blend は常に、子要素をドキュメントのルート (または最上位のパネル) に追加しようとします。つまり、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.10).png")
.png "Cc294749.b174a511-dd12-4a45-a986-034de7693de9(ja-jp,Expression.10).png")
.png "Cc294749.f13847cd-7fdf-4757-a648-d5ece98fcaea(ja-jp,Expression.10).png")
.png "Cc294749.82c89430-1209-4aa1-b534-cf1cedac74c7(ja-jp,Expression.10).png")
コントロール タイプの特性の詳細については、MSDN の「Windows Presentation Foundation」のセクションにある「コンテンツ モデル」のトピックを参照してください。
先頭に戻る
スタイルとテンプレート
「コントロールの概要」で前述したように、コントロール用のテンプレートとスタイルを作成するなど、さまざまな方法でコントロールをカスタマイズして、アプリケーションに固有の一貫した外観を作成できます。テンプレートはコントロールを構成する部品を定義し、スタイルはコントロールの既定の動作を定義します。テンプレートとスタイルを作成するには、コントロールに対するシステムの既定のスタイルとテンプレートのコピーを作成します (システムのスタイルとテンプレートを変更することはできません)。テンプレートとスタイルの変更は、基本的に、Expression Blend の [デザイン] ビューで新しいコントロールを作成して、簡単に行うことができます。コードを使用する必要はありません。詳細については、「スタイルとテンプレートの概要」を参照してください。
先頭に戻る