WisdomSoft - for your serial experiences.

7.5 スタイル

通常、文書やアプリケーションは全体で一貫性のある配色やレイアウトでデザインされます。このとき、複数の要素に対して、共通する値を個別に設定するのは極めて非効率的です。スタイルを用いることで、プロパティの設定を一元化できます。

7.5.1 レイアウト情報の一元化

HTML で Web ページを記述するとき、HTML 要素に設定する様々なスタイル情報を CSS を使って一元化して管理することができます。WPF では、この方法と同じように、FrameworkElement の特定のプロパティに設定する値を記述したスタイル情報を保存するスタイルオブジェクトを作成することができます。

スタイルを採用するのは、デザインに柔軟性を持たせるためです。実践的なアプリケーションには様々なコントロールが配置されますが、適切なデザインが施されている場合、色や表現方法がアプリケーション全体で統一されているはずです。しかし、デザイナの都合でデザインの一部を変更しようと考えた場合、全てのコントロールのプロパティを変更しなければなりません。これは、非常に非効率的で、不必要なバグを生む可能性があります。

スタイルを作成し、デザインを共有する全てのオブジェクトにスタイルを設定すれば、デザインの変更はスタイルの設定を一度変えるだけですみます。また、オブジェクトに設定するスタイルを変更するだけで、オブジェクトのプロパティ全体を変更することができるため、プラグイン可能なアプリケーションデザインを提供することも容易になります。

スタイルを利用するには、FrameworkElement クラスが公開している、スタイル情報を設定する Style プロパティを使います。FrameworkElement オブジェクトは、Style オブジェクトの情報に従って、自分自身の依存プロパティを設定します。

FrameworkElement クラス Style プロパティ
public Style Style { get; set; }

Style プロパティに設定するのは、スタイル情報を保持する System.Windows.Style クラスのオブジェクトです。

System.Windows.Style クラス
System.Object 
   System.Windows.Threading.DispatcherObject 
    System.Windows.Style
[ContentPropertyAttribute("Setters")] 
[LocalizabilityAttribute(LocalizationCategory.Ignore)] 
public class Style : DispatcherObject, INameScope, IAddChild

Style クラスのコンストラクタは、オーバーロードされています。最も単純なパラメータを渡さないコンストラクタを利用した場合でも、他の設定はプロパティから行うことができます。

Style クラスのコンストラクタ
public Style ()
public Style (Type targetType)
public Style (Type targetType, Style basedOn)

targetType には、このスタイルを適用する対象の型を指定します。例えば、作成するスタイル情報が Button クラスに限定されるものであれば、targetType には Button 型を表す Type オブジェクトを渡すべきです。この場合、targetType と互換性の無いオブジェクトの Style プロパティに設定されると例外が発生します。basedOn には、継承する別の Style オブジェクトを指定します。Style クラスは、別の Style オブジェクトの設定を引き継ぐことができます。

生成した Style オブジェクトにスタイル情報を追加するには Setters プロパティを利用します。

Style クラス Setters プロパティ
public SetterBaseCollection Setters { get; }

Setters プロパティは、依存プロパティに対する設定情報を提供する System.Windows.SetterBase クラスの配列を管理するコレクションを返します。このコレクションに SetterBase オブジェクトを追加することで、スタイルが追加されます。

SetterBase クラスは抽象クラスなので、実際に使用するのはこのクラスの派生クラスである System.Windows.Setter クラスです。

System.Windows.Setter クラス
System.Object 
   System.Windows.SetterBase 
    System.Windows.Setter
public class Setter : SetterBase

このクラスのコンストラクタは、オーバーロードされています。この場では、基本的な 2 つのコンストラクタを紹介します。

Setter クラスのコンストラクタ
public Setter ()
public Setter (DependencyProperty property, Object value)

property には、スタイルを適用する対象の依存プロパティを、value には property に指定した依存プロパティに設定する値を指定します。当然、この値は依存プロパティの型と互換性のある型でなければなりません。

コンストラクタのパラメータに指定した値は、プロパティからも設定・取得することができます。対象の依存プロパティは Peoperty プロパティから、値は Value プロパティから設定または取得します。

Setter クラス Property プロパティ
[LocalizabilityAttribute(LocalizationCategory.None, Modifiability=Modifiability.Unmodifiable, Readability=Readability.Unreadable)] 
public DependencyProperty Property { get; set; }
Setter クラス Value プロパティ
[LocalizabilityAttribute(LocalizationCategory.None, Readability=Readability.Unreadable)] 
public Object Value { get; set; }

例えば、表示する描画要素のフォントサイズを設定したい場合は Property に FontSizeProperty 依存プロパティを設定し、Value にサイズを表す double 型の値を設定することになります。そして、適切に設定された Setter オブジェクトを Style オブジェクトの Setters プロパティが返したコレクションに追加します。

コード1
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

class Test {
	[STAThread]
	public static void Main() {
		Style style = new Style(typeof(Button));
		style.Setters.Add(new Setter(Control.FontSizeProperty, 30.0));
		style.Setters.Add(new Setter(Control.ForegroundProperty, Brushes.Red));

		Button button1 = new Button();
		button1.Content = "今";
		button1.Style = style;

		Button button2 = new Button();
		button2.Content = "田舎村で";
		button2.Style = style;

		Button button3 = new Button();
		button3.Content = "落ち合おう";
		button3.Style = style;

		StackPanel panel = new StackPanel();
		panel.Children.Add(button1);
		panel.Children.Add(button2);
		panel.Children.Add(button3);

		Window wnd = new Window();
		wnd.Content = panel;

		Application app = new Application();
		app.Run(wnd);
	}
}
実行結果
コード1 実行結果

コード1は、表示する 3 つのボタンに対して、共通の Style オブジェクトを設定しています。Main() メソッドの先頭で生成している Style オブジェクトには、フォントサイズを表す FontSizeProperty プロパティに対して  30.0 を、前景色を表す ForegroundProperty プロパティに対して Brushes.Red を設定しています。

この Style オブジェクトを設定した Button オブジェクトは、スタイル情報に従って FontSize プロパティと Foreground プロパティを設定します。そのため、表示された 3 つのボタンは変更されたフォントサイズと色であることが実行結果から確認できます。