[WPF/xaml]リソースディクショナリを作って、画面のコントロールのstyleを変える

7801 ワード
Xaml C# WPF C# テキストリンク

やりたいこと

コントロールの見た目をいろいろ変えたいときに、画面のxamlにいじくったstyleを書いているとごちゃごちゃしてしまうので、別のファイルにstyleだけまとめて書きたい。

サンプルコード

ディクショナリのコード。
styleの中身は今回の肝ではないので、途中省略している。
もとになったstyleは、以前作成したコードなので、こちらを参照。

Dictionary1.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfAnimation">

    <!-- 1つ目のチェックボックスのスタイル -->
    <Style TargetType="CheckBox" x:Key="MyCheckboxStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                             ・
                             ・
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- 2つ目のチェックボックスのスタイル -->
    <Style TargetType="CheckBox" x:Key="MyCheckboxStyle2">
        <Setter Property="Background" Value="Red"/>
    </Style>
</ResourceDictionary>

ディクショナリを使う画面のxamlのコード。

MainWindows.xaml
<Window x:Class="WpfAnimation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAnimation"
        mc:Ignorable="d"
        Title="MainWindow" Height="150" Width="150" Background="Gray">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Dictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <StackPanel Margin="20">
            <CheckBox Style="{StaticResource MyCheckboxStyle}"/>
            <CheckBox Style="{StaticResource MyCheckboxStyle2}" IsChecked="True"/>
        </StackPanel>
    </Grid>
</Window>

実装の流れ

プロジェクトを右クリックして[追加] > [新しい項目]を選択し、[リソースディクショナリ(WPF)]を選択する。(名前は適当につける)

先日作った(こちら参照)、チェックボックスのstyleをそのディクショナリに切り取りして移し、スタイルに、画面のxamlから参照できるようにKey名を付ける。

Dictionary1の一部.xaml
<Style TargetType="CheckBox" x:Key="MyCheckboxStyle">
と
<Style TargetType="CheckBox" x:Key="MyCheckboxStyle2">

リソースを使う側(ここではMainWindow.xaml)で、ディクショナリの参照先を記述する。

MainWindowの一部.xaml
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <!-- ここで、作ったDictionaryを参照しにいっている -->
            <ResourceDictionary Source="/Dictionary1.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

で、配置したCheckBoxのstyleに、スタイルを指定してやる。

MainWindowの一部.xaml
<CheckBox Style="{StaticResource MyCheckboxStyle}"/>
<CheckBox Style="{StaticResource MyCheckboxStyle2}" IsChecked="True"/>

結果

上のが一個目のスタイル。下のが二個目のスタイル。