次の方法で共有

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

  • [アーティクル]

このページは WPF プロジェクトにのみに適用

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

Simple スタイルとは

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

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

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

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

JJ171022.7ac13e33-029a-4ce3-aa85-ca623b6b9caa(ja-jp,VS.120).png

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

Simple スタイル

適用先のコントロール

アイコン

SimpleButton

Button

 JJ171022.05df1779-a68f-436b-b834-a91b7995a3ec(ja-jp,VS.120).png

SimpleCheckBox

CheckBox

 JJ171022.91bc7bff-27d2-4dfe-93ab-844f2952186f(ja-jp,VS.120).png

SimpleComboBox

ComboBox

 JJ171022.b174a511-dd12-4a45-a986-034de7693de9(ja-jp,VS.120).png

SimpleComboBoxItem

ComboBoxItem

SimpleExpander

Expander

 JJ171022.a9e00db8-c14d-404f-88cb-5f37a41bc783(ja-jp,VS.120).png

SimpleLabel

Label

 JJ171022.a27042f1-4067-4239-b99a-8b2e4c223de0(ja-jp,VS.120).png

SimpleListBox

ListBox

 JJ171022.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ja-jp,VS.120).png

SimpleListBoxItem

ListBoxItem

SimpleMenu

Menu

 JJ171022.015a263c-0b2b-4253-ac57-b86fcb8c9591(ja-jp,VS.120).png

SimpleMenuItem

MenuItem

 JJ171022.82c89430-1209-4aa1-b534-cf1cedac74c7(ja-jp,VS.120).png

SimpleProgressBar

ProgressBar

 JJ171022.1a4a4117-497e-4920-acaa-d84cb5a1ce83(ja-jp,VS.120).png

SimpleRadioButton

RadioButton

 JJ171022.33646a24-f5a1-4b74-9496-e0aaddb922c6(ja-jp,VS.120).png

SimpleRepeatButton

ListBox コントロールの RepeatButton

SimpleScrollBar

ScrollBar

 JJ171022.6513a026-499e-4296-8a67-7558b466bd33(ja-jp,VS.120).png

SimpleScrollBarRepeatButtonStyle

ScrollBar コントロールの RepeatButton

SimpleScrollViewer

ScrollViewer

 JJ171022.5ca26a94-31cd-4fda-83c5-a9564b5b019d(ja-jp,VS.120).png

SimpleSeparator

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

SimpleSlider

Slider

 JJ171022.bf689d92-3c74-4218-815c-e98c930ac189(ja-jp,VS.120).png

SimpleSliderThumb

Slider コントロールの Thumb

SimpleTabControl

TabControl

 JJ171022.f13847cd-7fdf-4757-a648-d5ece98fcaea(ja-jp,VS.120).png

SimpleTabItem

TabControl 内の TabItem

SimpleTextBox

TextBox

 JJ171022.343296b4-5c7d-4145-84cc-91b08ba67a1b(ja-jp,VS.120).png

SimpleThumbStyle

ListBox コントロールの ScrollBar の Thumb

SimpleTreeView

TreeView

 JJ171022.39c99139-8723-49c9-a3e7-f99232d939cb(ja-jp,VS.120).png

SimpleTreeViewItem

TreeView コントロールの TreeViewItem

SimpleTreeViewItemToggleButton

TreeView コントロールの ToggleButton

Simple スタイルの変更

Simple スタイルのリソースは SimpleStyles.xaml という名前のリソース ディクショナリに含まれています。 [ツール] パネルからアートボードに Simple スタイルを追加した後、SimpleStyles.xaml のリソース ディクショナリがプロジェクトに追加され、Simple スタイルのリソースはいずれも、[リソース] パネル内に表示されます。

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

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

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

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

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

    JJ171022.64136c65-52bc-4225-a948-b1171634baca(ja-jp,VS.120).png

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

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

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

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

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

    JJ171022.a64c8f57-1243-4482-87ad-b9d5aac62867(ja-jp,VS.120).png

    ヒント

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

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

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

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

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

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