連載：WPF入門

第4回　WPFの「リソース、スタイル、テンプレート」を習得しよう

岩永 信之
2010/09/07
Page1 Page2 Page3

　前回説明した依存関係プロパティは、「ほかの要素の値に依存してプロパティの値を決定する機構」といえる。WPFではこの仕組みを基軸として、リソース、スタイル、コントロール・テンプレートなどの高度な機能を提供している。

　特にWPFの柔軟性を象徴する機能がコントロール・テンプレートで、この機能を用いることでコントロールの外観を自由自在にカスタマイズ可能となる。Windowsフォームなどの既存のGUI作成フレームワークでは、コントロールに対して背景色やフォント・サイズの変更など、限定的なカスタマイズしかできなかった。これに対して、WPFのコントロール・テンプレートは、外観をほぼ無制限にカスタマイズできるポテンシャルを秘めている。

　今回は、これらのWPFの高度な機能について説明していく。

■リソース

　WPFでは、複数のUI要素で1つのオブジェクトを共有するために、リソースという仕組みを持っている。例として、背景色を指定するためのブラシ（具体的には<SolidColorBrush>要素）を2つの<Button>要素で共有するXAMLコードをList 1に示す。このXAMLコードの表示結果はFigure 1のようになる。

<Window x:Class="WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Height="100" Width="200">

  <Window.Resources>
    <SolidColorBrush x:Key="MyBrush" Color="Blue"/>
  </Window.Resources>

  <StackPanel>
    <Button Content="Button 1"
      Background="{StaticResource MyBrush}"/>
    <Button Content="Button 2"
      Background="{StaticResource MyBrush}"/>
  </StackPanel>

</Window>
List 1: リソースによるブラシの共有

Figure 1: List 1のXAMLコードの表示結果

　このように、リソースを用いてオブジェクトを共有することで、インスタンス生成などのオーバーヘッドを削減できる。上述の例では、青色のブラシを1つだけ生成して共有しており、2つの<Button>要素でそれぞれ個別にブラシを作るよりも生成されるインスタンスが少ない。

　また、リソースは、UI要素に対する設定を一カ所に集めることで、保守を容易にする。上述の例でいうと、リソース中で定義されたブラシを変更するだけで、これを参照する2つの<Button>要素の背景色を一斉に変更できる。

●2種類の「リソース」

　「リソース」という言葉が混乱を招く場合もあるので、ここで補足的な説明を入れておく。

　Windowsアプリケーションでは、実行可能ファイル（＝.EXEファイル）などのアセンブリの中に画像などのバイナリ・ファイルを埋め込むための「リソース」機構を持っている。この仕組みは、WPFアプリケーションでももちろん利用できる。この機構と、本稿で説明するWPFのリソース機構を区別する際には、以下のように呼び変える。

  • アセンブリ・リソース： アセンブリの中にバイナリ・ファイルを埋め込むためのリソース機構。バイナリ・リソースなどとも呼ぶ。
  • オブジェクト・リソース： 本稿で説明する、.NETオブジェクトを複数のUI要素から参照するためのリソース機構。本稿では、単に「リソース」と呼ぶ場合には、こちらを指すものとする 。

●リソース定義

　List 1でも示したように、リソースは<Window>などの要素（正確には、FrameworkElement型を継承する要素）のResourcesプロパティ内に定義する。ResourcesプロパティはResourceDictionary型（System.Windows名前空間）で、この型はキーも値もobject型の辞書となっている。

　連載第2回で説明したように、XAMLコード中でIDictionaryインターフェイスを実装する要素に子要素を追加する際にはx:Key XML属性の指定が必須となる。ただし、後述するStyleクラス（System.Windows名前空間）のように、（クラスに対して）DictionaryKeyProperty属性（DictionaryKeyPropertyAttribute）を付与して、（x:Key XML属性の）代替となるプロパティ（Styleクラスの場合はTargetTypeプロパティ）を設定しているクラスの場合には、x:Key XML属性 の指定を省略可能である。

　例えばList 2で示しているStyleクラスでは、x:Key XML属性の代替としてTargetTypeプロパティを利用している（<Style>要素のTargetTypeプロパティについては、後述のスタイルの節で詳しく説明する）。

<Window x:Class=" WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Window.Resources>
    <!-- x:Key の指定が必須 -->
    <SolidColorBrush x:Key="Brush1" Color="Green" />

    <!-- TargetType が x:Key の代わりに利用される -->
    <Style TargetType="Button">
      <Setter Property="Background" Value="LightBlue" />
    </Style>
  </Window.Resources>

  <Grid>
    <Button Content="ボタン"/>
  </Grid>

</Window>
List 2: リソースの定義例

●外部リソースの取り込み

　リソースは<Windows.Resources>タグの中に直接定義する以外に、ルート要素がResourceDictionary型のXAMLファイルを別途用意して、このXAMLファイルを取り込む形で利用することもできる（外部リソース）。

　外部リソースの定義例をList 3に示す。ここでは、このXAMLファイルにStyles.xamlという名前を付けて保存するものとする。

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Style TargetType="Button">
    <Setter Property="Background" Value="LightBlue" />
  </Style>

</ResourceDictionary>
List 3: 外部リソースの定義例（Styles.xaml）

　利用側が外部リソースを取り込むには、List 4に示すように、<ResourceDictionary>要素にSource属性を付けることで行う。

<Window x:Class=" WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Window.Resources>
    <ResourceDictionary Source="Styles.xaml"/>
  </Window.Resources>

  <Grid>
    <Button Content="ボタン"/>
  </Grid>

</Window>
List 4: 外部リソースの取り込み例

　また、ResourceDictionary.MergedDictionariesプロパティを用いることで、複数のリソース・ディクショナリを1つに結合することもできる。

　例えば、Styles.xamlに加えてもう1つ、Brushes.xamlという名前の外部リソースを用意したものとして、これらの外部リソース両方を取り込むためには、List 5に示すようなXAMLコードを記述する。この例では、外部リソースに加えて、さらにローカルでリソース・ディクショナリを結合している。

<ResourceDictionary>
  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Styles.xaml"/>
    <ResourceDictionary Source="Brushes.xaml"/>
    <ResourceDictionary>
      <SolidColorBrush x:Key="LocalResource" Color="Red" />
    </ResourceDictionary>
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
List 5: 複数のリソース・ディクショナリの結合

　ちなみに、通常、リソースはインスタンスが1つだけ生成され、そのただ1つのインスタンスが複数のUI要素から参照されることになる。

　この挙動を変更したい場合、List 6に示すように、x:Shared XML属性をfalseに設定することで、リソースが参照されるたびに別のインスタンスが生成されるようにすることも可能である。

<Grid.Resources>
  <SolidColorBrush x:Shared="false" x:Key="Brush1" Color="Blue" />
</Grid.Resources>

<Button Content="ボタン1" Background="{StaticResource Brush1}" />
<Button Content="ボタン2" Background="{StaticResource Brush1}" />
List 6: リソースのインスタンスを毎度生成する例

●リソース利用

　リソースを参照するためには、StaticResourceマークアップ拡張もしくはDynamicResourceマークアップ拡張を利用する。実行時に値を変化させる必要のないものにはStaticeResourceマークアップ拡張を用いる。一方、DynamicResourceは、実行時に値が変化し、その変化を参照している要素に反映させる必要がある場合に用いる。

　リソースの検索は、親要素を下から上に階層的にたどって行われる。 List 7に示すように、同名のキーを持つリソース・ディクショナリがあった場合、Figure 2 に示すように、内側のスコープ（階層的に下）にあるリソースが優先的に利用される。

<Window x:Class=" WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Window.Resources>
    <SolidColorBrush x:Key="Brush1" Color="Red" />
    <SolidColorBrush x:Key="Brush2" Color="Red" />
  </Window.Resources>

  <StackPanel>
    <StackPanel.Resources>
      <!-- 内側のリソースを優先的に利用するため、
           ボタン2にはこちらのブラシが反映される -->
      <SolidColorBrush x:Key="Brush2" Color="Blue" />
    </StackPanel.Resources>

    <Button Content="ボタン1"
            Background="{StaticResource Brush1}"/>
    <Button Content="ボタン2"
            Background="{StaticResource Brush2}"/>
  </StackPanel>

</Window>
List 7: リソースの利用例（リソース検索の優先度）

Figure 2: リソース参照の仕組み

●システム・リソース

　XAMLコードの中で定義したリソースに加えて、「個人設定」などで設定されたシステム色やフォントなどの、システム・リソースも利用できる。システム・リソースを利用するには以下のクラス（いずれもSystem.Windows名前空間）を使用する。

  • SystemColors： システム色やブラシを取得する。
  • SystemFonts： システム・フォントを取得する。
  • SystemParameters： ウィンドウの境界線やキャプションの幅などのシステム設定を取得する。

　システム・リソースは、SystemColors.DesktopBrushなどの静的プロパティを通して直接取得することもできるが、これをStaticResourceマークアップ拡張などでリソース参照するためのキーとして、SystemColors.DesktopBrushKeyなどの静的プロパティが用意されている。

　例えば、List 8に示すようなXAMLコードでデスクトップの背景色を利用できる。

<Window x:Class="WpfApplication1.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="MainWindow" Width="200" Height="200">

  <Grid Background=
    "{DynamicResource {x:Static SystemColors.DesktopBrushKey}}">
  </Grid>

</Window>
List 8: システム・リソースの利用例（デスクトップの背景色の取得）

　この例ではDynamicResourceマークアップ拡張を利用しているが、こうすることで、アプリケーション起動中にエンド・ユーザーがデスクトップの背景色を変更した際に、その変更がアプリケーションに即座に反映される。

　例えば、List 8の表示結果はFigure 3のようになる。この例では、デスクトップの背景色を灰色からピンクに変更している。

Figure 3: List 8の表示結果（システム設定の変更を即座に反映）


　INDEX
　 ［連載］WPF入門
　 第4回　WPFの「リソース、スタイル、テンプレート」を習得しよう
  1．リソース
　   2．スタイル
　   3．コントロール・テンプレート

インデックス・ページヘ 　「WPF入門」

TechTargetジャパン

Insider.NET フォーラム 新着記事
  • Kinectが切り開く“夢の近未来” （2012/2/2）
    　日本を含めた世界中でKinect for Windowsセンサー商用版とSDK正式版がリリース。未来のコンピューティングはどう変化するのか？
  • 3つの視点でネイティブと.NETの適材適所を考察 （2012/1/31）
    　アプリ開発は「ネイティブ」と「.NET」、どちらが最良？ その問いには「適材適所」と答えるしかない。では、“適所”は一体どこかを考察する
  • SQL Azure Data Sync入門 （2012/1/30）
    　SQL Azure／SQL Serverデータベース間のデータ同期を簡単に実現するサービスとは？ その仕組みや使用手順を解説
  • Windows Phoneアプリ市場の現状を分析する （2012/1/27）
    　Windows Phone のアプリ・ストアに日々登録されている多種多様なアプリ。カテゴリ別のアプリ数は？ 市場の現状を明らかにする

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

は.NET開発者中心に生まれ変わりました

.NET開発者中心コーナー

- PR -

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH