WPF 簡易スタイルのスタイル処理のヒント

  • [アーティクル]

This page applies to WPF projects only

Microsoft Expression Blend でアプリケーションのユーザー インターフェイス (UI) をデザインする方法は、単に既定のコントロールやシステム コントロールを使用するだけにとどまりません。コントロールを目的に合わせて適切に動作するように自由にカスタマイズし、スタイルを指定できます。また、Expression Blend のリソースを活用して、他のアプリケーションとは一味違う個性的で魅力的な外観を作り出し、アプリケーションのブランド感を高めたり、アプリケーション全体で UI の統一を図ったりすることが可能です。

Simple スタイルとは

Simple スタイルとは、[Button] コントロールや [ListBox] コントロールなど、一般的なシステム コントロール群にそのまま適用できるカスタム スタイル リソース一式のことです。システム コントロールのスタイルをその機能を損なわないように変更するには、WPF (Windows Presentation Foundation) のスタイルとテンプレートに関する知識が必要です。そのため、Expression Blend には、これらの Simple スタイル リソースが用意されています。Expression Blend の Simple スタイルは、それだけで完結したリソース一式として適用でき、簡単に手を加えてアプリケーション独自の外観を演出できます。WPF のスタイルやテンプレートについて一から学習する必要はありません。

Simple スタイル コントロールの作成

Simple スタイルを使用するには、[アセット] パネルの [スタイル] カテゴリで [Simple Styles] をクリックします。[アセット] パネルから Simple スタイルを選択すると、そのアイコンが [アセット] Cc294894.0d8b8d29-1af9-418f-8741-be3097d76eab(JA-JP,Expression.30).png の下に表示されるので、アートボードに Simple スタイルをすぐに描画できます。アートボード上に Simple スタイル ([SimpleButton] など) を描画すると、実際には、SimpleButton スタイルが適用されたシステム コントロール ([Button] など) のインスタンスが作成されます。

使用可能な Simple スタイル コントロールを示す [アセット] パネル

Cc294894.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(JA-JP,Expression.30).png

次の表に、使用可能な Simple スタイルと、適用先のコントロールを示します。

Simple スタイル

適用先のコントロール

アイコン

SimpleButton

Button

 Cc294894.05df1779-a68f-436b-b834-a91b7995a3ec(JA-JP,Expression.30).png

SimpleCheckBox

CheckBox

 Cc294894.91bc7bff-27d2-4dfe-93ab-844f2952186f(JA-JP,Expression.30).png

SimpleComboBox

ComboBox

 Cc294894.b174a511-dd12-4a45-a986-034de7693de9(JA-JP,Expression.30).png

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

 Cc294894.a9e00db8-c14d-404f-88cb-5f37a41bc783(JA-JP,Expression.30).png

SimpleLabel

Label

 Cc294894.a27042f1-4067-4239-b99a-8b2e4c223de0(JA-JP,Expression.30).png

SimpleListBox

ListBox

 Cc294894.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(JA-JP,Expression.30).png

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

 Cc294894.015a263c-0b2b-4253-ac57-b86fcb8c9591(JA-JP,Expression.30).png

SimpleMenuItem

MenuItem

 Cc294894.82c89430-1209-4aa1-b534-cf1cedac74c7(JA-JP,Expression.30).png

SimpleProgressBar

ProgressBar

 Cc294894.1a4a4117-497e-4920-acaa-d84cb5a1ce83(JA-JP,Expression.30).png

SimpleRadioButton

RadioButton

 Cc294894.33646a24-f5a1-4b74-9496-e0aaddb922c6(JA-JP,Expression.30).png

SimpleRepeatButton

ListBox コントロールの RepeatButton

SimpleScrollBar

ScrollBar

 Cc294894.6513a026-499e-4296-8a67-7558b466bd33(JA-JP,Expression.30).png

SimpleScrollBarRepeatButtonStyle

ScrollBar コントロールの RepeatButton

SimpleScrollViewer

ScrollViewer

 Cc294894.5ca26a94-31cd-4fda-83c5-a9564b5b019d(JA-JP,Expression.30).png

SimpleSeparator

ListBox、Menu、または ToolBar コントロールの Separator

SimpleSlider

Slider

 Cc294894.bf689d92-3c74-4218-815c-e98c930ac189(JA-JP,Expression.30).png

SimpleSliderThumb

Slider コントロールの Thumb

SimpleTabControl

TabControl

 Cc294894.f13847cd-7fdf-4757-a648-d5ece98fcaea(JA-JP,Expression.30).png

SimpleTabItem

TabControl の TabItem

SimpleTextBox

TextBox

 Cc294894.343296b4-5c7d-4145-84cc-91b08ba67a1b(JA-JP,Expression.30).png

SimpleThumbStyle

ListBox コントロールの ScrollBar の Thumb

SimpleTreeView

TreeView

 Cc294894.39c99139-8723-49c9-a3e7-f99232d939cb(JA-JP,Expression.30).png

SimpleTreeViewItem

TreeView コントロールの TreeViewItem

SimpleTreeViewItemToggleButton

TreeView コントロールの ToggleButton

Simple スタイルの変更

Simple スタイル リソースは、SimpleStyles.xaml というリソース ディクショナリに含まれています。Simple スタイル コントロールを [ツール] パネルからアートボードに追加すると、SimpleStyles.xaml リソース ディクショナリ ファイルがプロジェクトに追加され、すべての Simple スタイル リソースが [リソース] パネルに表示されます。

SimpleStyles.xaml リソース ディクショナリには、Simple スタイルで使用されるブラシ リソースやその他のテンプレートが含まれています。Simple スタイルは、次の方法で変更できます。

  • 色の変更 すべての Simple スタイルで使用される色はリソースとして保存され、この色リソースを変更できます。

    いずれかの色リソースを変更するには、[リソース] パネルで該当する色リソースの横にある下矢印ボタンをクリックします。

    ブラシの詳細については、「色、ブラシ、およびマスクの設定」を参照してください。

    [リソース] パネルでスタイル リソースを選択して編集

    Cc294894.64136c65-52bc-4225-a948-b1171634baca(JA-JP,Expression.30).png

  • スタイルの変更 Expression Blend のコントロールのスタイルを使用して、そのスタイルが適用されるコントロールで既定で使用されるプロパティとトリガーを指定できます。プロパティ (背景ブラシの色など) はコントロールの外観に影響を与え、トリガーはプロパティの変化やイベントに対するコントロールの応答方法に影響を与えます。たとえば、SimpleButton スタイルでは、ユーザーがマウス ポインターをボタン コントロール上に移動したときにボタンの外観が変わるように、[IsMouseOver] プロパティに対してトリガーが設定されています。このトリガーは、[IsMouseOver] プロパティが [False] から [True] に変更されたときに発生します。

    いずれかの Simple スタイルを変更するには、[リソース] パネルで Simple スタイルの横にある [リソースの編集] ボタンをクリックします。

    [リソース] パネルでスタイル リソースを選択して編集

    Cc294894.a6080791-03cf-43ae-9476-22d33e9d8ce4(JA-JP,Expression.30).png

  • コントロール テンプレートの変更 コントロールのテンプレートは、コントロールに含まれる子コントロールを定義することで、そのコントロールの外観を定義しています。たとえば、[SimpleTextBox] 要素のコントロール テンプレートには [Grid] 要素が含まれ、その中に [Border] 要素、さらに [Border] 要素の中に PART_ContentHost という名前の [ScrollViewer] 要素が含まれています。この [SimpleTextBox] スタイルをアートボード上の [TextBox] に適用すると、子要素である [ScrollViewe] 要素に [TextBox] のコンテンツが表示されます。スタイル同様、コントロール テンプレートにプロパティとイベント トリガーを設定することができます。

    Simple スタイルのコントロール テンプレートを変更するには、[リソース] パネルの Simple スタイルの横にある [リソースの編集] ボタンをクリックし、[オブジェクトとタイムライン] パネルに表示される [Style] 要素を右クリックします。次に、[テンプレートの編集] をクリックし、[現在のテンプレートの編集] を選択します。

    スタイルの編集スコープから開始するコントロール テンプレートの編集の選択

    Cc294894.a64c8f57-1243-4482-87ad-b9d5aac62867(JA-JP,Expression.30).png

    Cc294894.alert_tip(JA-JP,Expression.30).gifヒント :

    コントロールに適用されるスタイルがコントロールの外観 (パーツ) と動作の両方を含むよう、コントロール テンプレートはスタイルの内部にラップされています。[コピーして編集] または [現在のテンプレートの編集] を選択するときは、その違いを考慮する必要があります。

Simple スタイルとテンプレートの比較については、「テンプレートをサポートするコントロールのスタイル処理」を参照してください。

アートボード上での既存のコントロールへのスタイル リソースの適用

Simple スタイルはリソースであり、他のリソースと同様に適用および管理することができます。

例については、「スタイル リソースの適用」を参照してください。

リソースの詳細については、「再利用可能リソースの作成」を参照してください。