[アーティクル]
10/20/2021

Visual Studio 2010 自習書～ Do-It-Yourself シリーズ～
XAML による Windows アプリケーション開発の基礎

第 5 回リソース

更新日: 2011 年 1 月 13 日

XAML では、アプリケーションで使用するデータ、ブラシなどの描画オブジェクト、外見を記述したスタイルなどをリソースとして扱います (スタイルについては次回で学習します)。XAML でリソースを記述する利点は、リソースとして定義したオブジェクトを XAML ファイル内で共有できる点です。

WPF で利用可能なほとんどのコントロールは、コントロール内で使用するリソースを保持するための Resources プロパティを持っています。Resources プロパティには複数のリソースを格納できます。

ページのトップへ

2. ブラシによる塗りつぶし

例えばアプリケーションでグラデーションを使ったブラシを使用したいとします。通常、コントロールの背景を塗りつぶしたり、外枠 (Border) の部分を描画したりするにはブラシ (Brush) を使用します。

グラデーション効果のあるブラシは、次のようにして定義します。LinearGradientBrush は、線形グラデーション描画を行うブラシで、以下の記述では、描画領域の左上から右下にかけて、Yellow、Red、Blue、LimeGreen の色でグラデーションを描画します。

リソースを用いずに、これを Rectangle (矩形) の内側の塗りつぶしに利用する場合は、次のように記述します。この場合には Fill プロパティにブラシを設定しますから、XAML の記述では、<Rectangle.Fill> 要素の中に記述することになります。

図 1

ページのトップへ

3. リソースの記述

これに対して、ウィンドウに複数のコントロールを配置し、それぞれのコントロールで同じブラシを使って描画するような場合は、ブラシをリソースとして定義し、それを使い回すことができます。

上で説明した矩形を表示するアプリケーションで、ブラシをリソースとして記述し、それにより矩形を塗りつぶすには次のように記述します。

実行結果は前述の XAML の場合と変わりませんが、ここでは <Window> 要素の Resources プロパティにブラシ (LinearGradientBrush) を記述しています。

コントロールに直接ブラシを記述する場合と異なるのは、x:Key 属性を使ってこのブラシの定義に名前を付けている点です (x:Key="myBrush")。これによって <Window> 要素の下位にあるコントロールは、プロパティに "myBrush" を指定することで、このブラシが利用できるようになります。

そして <Rectangle> 要素では、myBrush を利用することを示すために、Fill プロパティに、

Fill="{StaticResource myBrush}"

という記述を行います。これは、領域の塗りつぶしに "myBrush" を利用することを示しています。

"StaticResource" は上記のリストで示すような、XAML ファイル内で定義したリソースを指定する場合に使うものと考えてよいでしょう。それに対して "DynamicResource" としてリソースを参照する場合があります。これは、アプリケーションのコードビハインド部分のロジックで実行時に追加したリソースや、システムフォント、システムカラーなど実行時のシステムに関連するリソースを指定する場合に使います。

続いて、リソースとして記述したグラデーションブラシを使って、ウィンドウに配置した 2 つのボタンと矩形の外見を変更してみましょう。最初の Button は外枠に、2 番目の Rectangle は内部の塗りつぶしに、3 番目の Button はボタンの背景に、このブラシを使用しています。

<Window x:Class="WpfApplication5.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="210" Width="300">
    <Window.Resources>
        <LinearGradientBrush x:Key="myBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop Color="Red" Offset="0.25" />
            <GradientStop Color="Blue" Offset="0.75" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </Window.Resources>
    <StackPanel >
        <Button Margin="10" DockPanel.Dock="Top" Width="200" Height="40" BorderBrush="{StaticResource myBrush}">グラデーションのボタン</Button>
        <Rectangle Width="200" Height="50" Fill="{StaticResource myBrush}"></Rectangle>
        <Button Margin="10" Width="200" Height="40" Background="{StaticResource myBrush}" Foreground="White">背景がグラデーションのボタン</Button>
    </StackPanel>
</Window>

図 2

リソースとして定義したブラシ (myBrush) を参照することで、3 つのコントロールでブラシを共有しています。

その他のリソース

ブラシのほかにも、XML データやスタイルなどもリソースとして利用できます。データバインディングの回では XML ファイルを読み込んで ListBox に表示しましたが、その際に XML データをリソースとして扱いました。

<Window.Resources>
<XmlDataProvider x:Key="BookData" Source="bookdata.xml" XPath="Inventory/Books"/>
</Window.Resources>

ここではXMLデータを提供する XmlDataProvider をリソースとして定義していますが、このように XAML では、さまざまな内容をリソースとして利用できます。

ページのトップへ

4. リソースの有効範囲

ここまでの例では、<Window> 要素の Resources プロパティとしてリソースを記述しました。しかし、各コントロールにも <Window> 要素と同様に Resources プロパティが用意されています。このため、パネルや、Button などのコントロールでもリソースの定義が可能です。

ただしその場合、リソースが参照できるのは、リソースを定義した要素の下位にある要素 (コントロール) のみになります。リソースを利用する主な目的は、リソースを共有することにより無駄を省くことですから、通常はルート要素である <Window> 要素にリソースを記述します。

次のリストでは、<Window> 要素で単色のブラシをリソースとして定義し、さらに StackPanel に含まれる <Grid> 要素において、同じキー名で異なる色のブラシを定義しています。

<Window x:Class="WpfApplication5.Window1"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="200" Width="300">
    <Window.Resources>
        <SolidColorBrush x:Key="myBrush" Color="LightYellow" />
    </Window.Resources>
    <StackPanel VerticalAlignment="Center">
        <Button Width="200" Height="50" Background="{StaticResource myBrush}">Button #1</Button>
        <Grid Margin="5">
            <Grid.Resources>
                <SolidColorBrush x:Key="myBrush" Color="LightGreen" />
            </Grid.Resources>
            <Button Width="200" Height="50" Background="{StaticResource myBrush}">Button #2</Button>
        </Grid>
    </StackPanel>
</Window>

実行すると、Grid の中に配置されたボタン (Button #2) は、Grid で定義されたブラシにより背景が描画されるのが分かります。

図 3

アプリケーション全体で適用されるリソース

ウィンドウ単位ではなく、アプリケーション全体でリソースを共有することも可能です。この場合は、アプリケーションの定義を行っている XAML ファイルにリソースを記述します。

Visual Studio 2008 でプロジェクトを新規作成した場合には、自動作成された App.xaml に <Application.Resources> 要素が記述されています。ここに記述したリソースはアプリケーション全体で利用できます。

このリソースを別の XAML ファイルで参照する場合にも、<Window> 要素で定義したリソースと同様に、リソース名で参照できます。

リスト App.xaml で定義したリソースを参照する

図 4

ページのトップへ

5. まとめ

今回は、リソースについて学習しました。リソースを記述する場合は、Resources プロパティで各リソースに x:Key 属性を付加し、リソースを参照する場合は、マークアップ拡張機能を用いて、x:Key 属性で設定した名前により参照します。

次回はスタイルについて学習します。

ページのトップへ

Visual Studio 2010 自習書～ Do-It-Yourself シリーズ～
XAML による Windows アプリケーション開発の基礎

第 5 回リソース

目次