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

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

Simple スタイルとは

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

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

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

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

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

Simple スタイル	適用先のコントロール	アイコン
SimpleButton	Button
SimpleCheckBox	CheckBox
SimpleComboBox	ComboBox
SimpleComboBoxItem	ComboBoxItem
SimpleExpander	Expander
SimpleLabel	Label
SimpleListBox	ListBox
SimpleListBoxItem	ListBoxItem
SimpleMenu	Menu
SimpleMenuItem	MenuItem
SimpleProgressBar	ProgressBar
SimpleRadioButton	RadioButton
SimpleRepeatButton	ListBox コントロールの RepeatButton
SimpleScrollBar	ScrollBar
SimpleScrollBarRepeatButtonStyle	ScrollBar コントロールの RepeatButton
SimpleScrollViewer	ScrollViewer
SimpleSeparator	ListBox、Menu、ToolBar コントロールの Separator
SimpleSlider	Slider
SimpleSliderThumb	Slider コントロールの Thumb
SimpleTabControl	TabControl
SimpleTabItem	TabItem (TabControl 内)
SimpleTextBox	TextBox
SimpleThumbStyle	ListBox コントロールの ScrollBar の Thumb
SimpleTreeView	TreeView
SimpleTreeViewItem	TreeView コントロールの TreeViewItem
SimpleTreeViewItemToggleButton	TreeView コントロールの ToggleButton

Simple スタイルの変更

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

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

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

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

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

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

  

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

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

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

  

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

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

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

  

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

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

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

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

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

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

Copyright ©2011 by Microsoft Corporation. All rights reserved.