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

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

第 6 回リソース

更新日: 2010 年 12 月 13 日

Zip File ダウンロード (XPS、992 KB | PDF、969 KB)

XAML は、もともとXML (eXtensible Markup Language) という記述言語を元に拡張されたものです。XML では「<タグ名>～</タグ名>」で表される要素の定義を組み合わせることで、データを表現します。タグにはしばしば「属性」を指定します。

要素は階層的に表現することができ、たとえば、ウィンドウの上にレイアウトパネルを配置し、レイアウトパネルの上にコントロールを配置するといった場合は、ウィンドウの開始タグ (<タグ名>) と終了タグ (</タグ名>) の間にレイアウトパネルの要素を定義し、レイアウトパネルを定義する開始タグと終了タグの間にコントロールを定義する開始タグから終了タグを記述します。

典型的な XAML の定義を次に示します。

ウィンドウをあらわす Window タグには、コードビハインドとして動作する C# プログラムのクラス定義 (x:Class) や XML の名前空間に関する定義 (xmlns、xmlns:x) が指定されています。さらに、ウィンドウ自身のタイトルや大きさも属性として指定されています。

ユーザーインターフェイスと XAML の関係を以下に示します。

図 2

ここで、ウィンドウ (Window) にはタイトル (Title) や大きさ (Height、Width) の属性が指定されており、ボタンには配置場所との間隔 (Margin) が属性として指定されています。

属性は、開始タグを記述する中 (<> の間) ではなく、次のように書くこともできます。

<Window x:Class="WpfApplication6.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Title>MainWindow</Window.Title>
    <Window.Height>240</Window.Height>
    <Window.Width>360</Window.Width>
    <Grid>
        <Button>
            <Button.Margin>40</Button.Margin>
            BIG BUTTON
        </Button>
    </Grid>
</Window>

属性が文字列や数値の場合は、開始タグの中に記述する方が簡単です。複雑な場合は、上記のように記述しなければならないことがあります。今回学ぶリソースは、このような記述が必要です。

ページのトップへ

3. リソースの定義

最初に述べたとおり、リソースとはユーザーインターフェイスを定義するときに使うデータをあらかじめ XAML の記述の中に埋め込んでおくものです。リソースは、1) とくにプログラム中で何度も使われるデータに名前を付けて利用しやすくする、2) 後で修正するかもしれないデータをまとめて定義しておくといった目的があります。リソースは、ほとんどのコントロールに対して割り当てることができ、割り当てたコントロールや、その上に配置されているコントロールなどで使うことができます。

以下に簡単なリソースの使用例を示します。

<Window x:Class="WpfApplication6.MainWindow"
            xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="240" Width="360">
    <Window.Resources>
        <SolidColorBrush x:Key="MyBrush">LightGreen</SolidColorBrush>
    </Window.Resources>
    <Grid>
        <Button Margin="40" Background="{StaticResource MyBrush}">
            BIG BUTTON
        </Button>
    </Grid>
</Window>

ここでは、ウィンドウ (Window) 要素にリソース (Resources) を割り当て、単一色のブラシを意味する SolidColorBrush のリソースを定義しています。リソースは、通常の要素と同じく開始タグ～終了タグで定義します。ただし、参照するための名前として「キー (x:Key) 」を指定する必要があります。ここでは、Button の Background プロパティでブラシリソースを参照しています。StaticResource は「静的なリソース」として参照するという意味で、アプリケーションの実行中にリソースの値が変わらないことを前提としています。

このプログラムを実行した様子を示します。

図 3

ここで、MyBrush リソースの定義を次のように変更します。LinearGradientBrush は、グラデーションスタイルのブラシを定義するためのものです。

<Window.Resources>
    <LinearGradientBrush x:Key="MyBrush">
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.15" />
        <GradientStop Color="Yellow" Offset="0.30" />
        <GradientStop Color="LimeGreen" Offset="0.50" />
        <GradientStop Color="Blue" Offset="0.70" />
        <GradientStop Color="DarkBlue" Offset="0.85" />
        <GradientStop Color="Magenta" Offset="1.0" />
    </LinearGradientBrush>
</Window.Resources>

すると、このリソースを使用しているボタンは次のように表示されます。

図 4

リソースとして定義されたブラシは、そのリソースが定義されているコントロールの中にあるものであれば、どこでも利用できます。

前述の例で、<Grid>～</Grid> を次の内容に置き換えてみます。

<StackPanel>
    <Button Height="50" Margin="10"
                Background="{StaticResource MyBrush}">BUTTON</Button>
    <Button Height="50" Margin="10"
                BorderBrush="{StaticResource MyBrush}">BUTTON</Button>
    <Ellipse Height="50" Margin="10"
                Fill="{StaticResource MyBrush}" />
</StackPanel>

StackPanel に配置されているコントロールについて、それぞれボタンの背景 (Background プロパティ)、ボタンの輪郭 (BorderBrush プロパティ)、楕円の塗りつぶし (Fill プロパティ) として、MyBrush リソースが割り当てられています。

このプログラムを実行すると次のようになります。

図 5

MyBrush リソースは、ウィンドウ (Window) のリソースとして定義されているため、Window 内であればどこでも使えます。ただし、Window の開始タグは、リソース定義よりも前にあるため、開始タグの中で参照することはできません。

たとえば、ウィンドウの背景としてこのブラシを使いたい場合は、次のように記述できます。

...
</Window.Resources>
<Window.Background>
<StaticResource ResourceKey="MyBrush" />
</Window.Background>
<StackPanel>
...

このプログラムを実行すると次のように表示されます。

図 6

ダイナミックリソース

ここまで、リソースを参照する際には StaticResource を使っていました。これは、リソースの定義が静的 (変化しない) ことを前提にしていたためです。プログラム中でリソースの定義を変更する場合には、リソースを参照する際に DynamicResource を使います。

まず、前述の例で、以下のように StaticResource を DynamicResource に変更します。

...
    <Window.Background>
        <DynamicResource ResourceKey="MyBrush" />
    </Window.Background>
    <StackPanel>
        <Button Height="50" Margin="10"
                Background="{DynamicResource MyBrush}">BUTTON</Button>
        <Button Height="50" Margin="10"
                BorderBrush="{DynamicResource MyBrush}">BUTTON</Button>
        <Ellipse Height="50" Margin="10"
                Fill="{DynamicResource MyBrush}" />
    </StackPanel>
</Window>

WPF デザイナーでボタンをダブルクリックするか、プロパティウィンドウを使って、いずれかの Button コントロールのイベントハンドラーを次のように記述します。

private void Button_Click(object sender, RoutedEventArgs e)
{
this.Resources["MyBrush"] = new SolidColorBrush(Colors.Cyan);
}

ここでは、ウィンドウ自身に関連付けられている MyBrush リソースに、新たに作成する Cyan 色のブラシを代入しています。プログラムを実行してボタンを押すと、ブラシ部分が水色になることがわかります。

図 7

ページのトップへ

4. アプリケーションの定義とリソース

個々のウィンドウではなく、アプリケーション全体でリソースを共有したい場合もあります。この場合は、ソリューションエクスプローラーで App.xaml をダブルクリックして開きます (App.xaml は、ユーザーインターフェイスの定義ではないため、常に XAML エディターが開き、WPF デザイナーは使われません)。App.xaml の既定の状態を示します。

StartupUri は最初に起動するウィンドウを指定するプロパティです。XAML エディター中のカーソルを Application の定義に移動すると、プロパティウィンドウで ShutdownMode プロパティを変更したり、[イベント] タブで起動時 (Startup イベント) や終了時 (Exit イベント) に対するイベントハンドラーを割り当てたりすることができます。

この App.xaml では、ウィンドウの場合と同じようにリソースを定義できます。ここで定義したリソースは、アプリケーションのすべてのウィンドウから参照できます。さきほどの MyBrush をアプリケーションのリソースとして定義する場合は、次のように記述します。このとき、ウィンドウのリソース定義 (Window.Resources) は削除しておきます。

リソースディクショナリ

ある程度の規模のアプリケーションでは、アプリケーション全体に共通する膨大なリソースを必要とする場合があります。このときは、App.xaml にすべてのリソースを定義する代わりに、リソースを定義した外部ファイルを参照する方が便利です。このために、リソースディクショナリという独立したファイルでリソースを定義し、これを App.xaml やウィンドウ用の .xaml から参照できます。

プロジェクトにリソースディクショナリを追加するには、ソリューションエクスプローラーでプロジェクト名を右クリックし、[追加] - [新しい項目] で「リソースディクショナリ」を選びます。

図 8

ここでは、MyDictionary.xaml という名前で追加します。App.xaml で定義したリソースを、次のように MyDictionary.xaml に移します。

<ResourceDictionary xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
    <LinearGradientBrush x:Key="MyBrush" >
        <GradientStop Color="Red" Offset="0.0" />
        <GradientStop Color="Orange" Offset="0.15" />
        <GradientStop Color="Yellow" Offset="0.30" />
        <GradientStop Color="LimeGreen" Offset="0.50" />
        <GradientStop Color="Blue" Offset="0.70" />
        <GradientStop Color="DarkBlue" Offset="0.85" />
        <GradientStop Color="Magenta" Offset="1.0" />
    </LinearGradientBrush>
</ResourceDictionary>

App.xaml　には、このファイルを読み込むように、リソースディクショナリの記述を追加します。

これで、さきほどと同じようにアプリケーションが動作します。

リソースディクショナリは、ウィンドウやコントロールのリソースで使うこともできます。ただし、1 つの Resources の中には、1 つの ResourceDictionary しか記述できません。複数のリソースディクショナリを読み込むためには、次のように MergedDictionaries 属性で指定する必要があります。

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="MyDictionary.xaml" />
            <ResourceDictionary Source="(リソースディクショナリ名)" />
            ...
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

ページのトップへ

5. まとめ

今回は、ユーザーインターフェイスのためのデータを共有するリソースについて学びました。今回は、リソースの題材としてブラシを取り上げましたが、次回以降に説明するスタイルやテンプレートでもリソースは大いに活用できます。

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

ページのトップへ

次の方法で共有

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

第 6 回リソース

目次

1. リソースと XAML