リソースを共通化する

XAMLリソース

XAMLによって記述されたコントロールやFrameworkElementはそのプロパティを変更することによってデザインや挙動を変更することができます。

プロパティに指定した値を複数のコントロール間で共有するためにはその値をリソースとして別の場所に定義し、複数のコントロールからそのリソースを参照することで共通化を行うことができます。

XAMLリソースには以下の2種類のリソースタイプがあります。

  • StaticResource
  • ThemeResource

StaticResourceはその名の通り静的で、アプリの実行時のリソースは常に固定されます。

それに対しThemeResourceはアプリの実行時のシステムテーマによって使用するリソースが動的に変化します。

StaticResource

現在の要素から見える範囲にあるリソースに対し、キーを指定してリソースを参照します。

例えば以下のようにPageのリソース内にbuttonContentというキーのstringリソースを配置し、buttonコントロールからはContentプロパティにStaticResourceで参照させています。

<Page>
...省略...

    <Page.Resources>
        <x:String x:Key="buttonContent">Click Me</x:String>
    </Page.Resources>

    <Grid>
        <Button x:Name="button1" Content="{StaticResource buttonContent}" />
    </Grid>
...省略...
</Page>

このようにすることで複数のボタンコントロールに対し、共通の文字列でContentプロパティを指定できます。

<Page>
...省略...

    <Page.Resources>
        <x:String x:Key="buttonContent">Click Me</x:String>
    </Page.Resources>

    <Grid>
        <Button x:Name="button1" Content="{StaticResource buttonContent}" />
        <Button x:Name="button2" Content="{StaticResource buttonContent}" />
    </Grid>
...省略...
</Page>

リソースの型は、StringやDoubleなど、基本的なプリミティブ型以外にもコントロールのプロパティに指定できる型ならリソースとして宣言可能です。

特にSolidColorBrush型はコントロールの色ブラシを定義するため、リソースとしてよく宣言します。

リソースの宣言箇所

XAMLリソースは親要素またはApp.xamlのResourceプロパティに記載されたリソースでなければ参照することができません。

例えばこのようにGridのResourceプロパティに記載したbuttonWidthリソースは範囲外であるPageのWidthプロパティからは参照できず、Grid内でしか参照できません

ですので通常は、共通のリソースを参照したい単位でリソース化します。

アプリ全体に共通化させたい場合はApp.xamlのResourceプロパティに

Pageで共通化させたい場合はPageのResourceプロパティに書きます。

リソースを外部ファイル化する

XAMLではリソースを書き込む外部ファイルのことをリソースディクショナリと言います。

VisualStudioでは新しい項目からリソースディクショナリを作成できます。

TestDictionary.xamlではtestResource1とtestResource2を宣言しておきます。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App3">
    <x:Double x:Key="testResource1">100</x:Double>
    <x:Double x:Key="testResource2">300</x:Double>
    
</ResourceDictionary>

使用するときはResourceプロパティ内のResourceDictionaryタグのSourceプロパティにリソースディクショナリのパスを指定します。

今回はAssetsフォルダにTestDictionary.xamlを入れています。

<Page>
...省略...
    <Page.Resources>
        <ResourceDictionary Source="Assets/TestDictionary.xaml" />
    </Page.Resources>
    
    <Grid>
        <Grid.Resources>
            <x:Double x:Key="buttonWidth">100</x:Double>
        </Grid.Resources>
        <Button x:Name="button1" Width="{StaticResource testResource1}" />
    </Grid>
    
    
</Page>

通常はリソースディクショナリは1つだけではなく、複数のリソースディクショナリを組み合わせます。

複数のリソースディクショナリを使う場合はResourceDictionaryのMergedDictionariesに指定する必要があります。

<Page>
...省略....
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Assets/TestDictionary.xaml" />
                <ResourceDictionary Source="Assets/TestDictionary2.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Page.Resources>
    
    <Grid>
        <Grid.Resources>
            <x:Double x:Key="buttonWidth">100</x:Double>
        </Grid.Resources>
        <Button x:Name="button1" Width="{StaticResource testResource1}" />
    </Grid>
    
    
</Page>

ThemeResource

StaticResourceとは違い、ThemeResourceはアプリケーションが起動した時のApp.RequestedThemeによって使用するリソースが決定されます。

ThemeResourceを宣言する場合はResourceDictionaryの

ThemeDictionariesの中にResourceDictionaryを複数書きます。

そのkeyによってthemeが決定しますがUWPではDefault、Light、Darkの3つのテーマが存在します。

使用するときは{ThemeResource resourceKey}とすることで使用できます。

<Page>
...省略...
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <SolidColorBrush x:Key="buttonBackground" Color="Azure" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="buttonBackground" Color="Wheat" />
                </ResourceDictionary>
                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="buttonBackground" Color="DarkBlue" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Page.Resources>

    <Grid>
        <Button x:Name="button1" Background="{ThemeResource buttonBackground}" Content="Click Me" />
    </Grid>
    
    
</Page>

テーマを指定する方法ですが、App.xamlにRequestedThemeとして指定されています。

RequestedThemeに何も指定がない場合はDefaultが選択されます。

3つもテーマを指定しているとResourceの記述が長くなるため、通常はこのように外部ファイルにResourceDictionaryとして書き出し、そのファイルを読み込んで参照します。

システム規定のThemeResource

よく使うコントロールは、システムがテーマに対する規定のリソースを用意しています。

そのリソースディクショナリはこのパスにあるgeneric.xamlです。

C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic

このリソースディクショナリに書いてあるキーをアプリ内のファイルから再定義することでコントロールの規定のthemeリソースを編集できます。 Take the higher ground and stay out of it www.cellspyapps.org

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください