6
9

More than 5 years have passed since last update.

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

Posted at

やりたいこと

コントロールの見た目をいろいろ変えたいときに、画面の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)]を選択する。(名前は適当につける)
image.png

先日作った(こちら参照)、チェックボックスの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"/>

結果

image.png

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

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9