WPFプログラミング備忘録

WPF スタイル定義ファイルの共通化

WPF
2021.11.02

この記事ではスタイルを定義したファイルをプロジェクト全体で使用できるように共通化する手順を確認します。

はじめに.NET FrameworkのWPFアプリケーションプロジェクトを作成しておいてください。

今回の開発環境は以下のとおりです。

オペレーティングシステムWindows10 x64
Visual StudioMicrosoft Visual Studio Community 2019 Version 16.11.2
.NET Framewrok4.7.2

新規フォルダの作成とリソースディクショナリの追加

まずスタイル定義ファイルを格納する共通フォルダを作成します。

プロジェクトを右クリック –> 追加 –> 新しいフォルダ

でフォルダ名をCommonとします。

次に作成したCommonフォルダにリソースディクショナリ(WPF)を追加します。

Commonフォルダを右クリック –> 追加 –> リソースディクショナリ(WPF)

でファイル名をCommonStyle.xamlとします。

スタイルの定義

CommonStyle.xamlに以下のようにスタイルを定義します。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="sizeStyle" TargetType="FrameworkElement">
        <Setter Property="Width" Value="120" />
        <Setter Property="Height" Value="40" />
    </Style>
    <Style x:Key="baseButtonStyle" TargetType="Button" BasedOn="{StaticResource sizeStyle}">
        <Setter Property="FontFamily" Value="MS UI Gothic" />
        <Setter Property="FontSize" Value="20" />
    </Style>
    <Style TargetType="Button" BasedOn="{StaticResource baseButtonStyle}">
        <!-- x:Key属性を削除 -->
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="SkyBlue" />
                    <GradientStop Offset="1" Color="GreenYellow" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

このスタイルの内容については以下の記事をご確認ください。

>>デフォルトのスタイルの適用について

App.xamlの編集

以下のようにApp.xamlファイルのApplication.Resources要素にリソースディクショナリを追加します。

ResourceDictionary要素のSourceプロパティにCommonStyle.xamlへのパスを指定します。

<Application x:Class="WpfDefaultStyle.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfDefaultStyle"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Common/CommonStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xamlファイルに以下のように９つのボタンを定義します。

<Window x:Class="WpfDefaultStyle.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:WpfDefaultStyle"
        mc:Ignorable="d"
        Title="DefaultStyleSample" Height="450" Width="800">
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        
        <Button Grid.Row="0" Grid.Column="0" Content="ボタン１" />
        <Button Grid.Row="0" Grid.Column="1" Content="ボタン２" />
        <Button Grid.Row="0" Grid.Column="2" Content="ボタン３" />
        <Button Grid.Row="1" Grid.Column="0" Content="ボタン４" />
        <Button Grid.Row="1" Grid.Column="1" Content="ボタン５" />
        <Button Grid.Row="1" Grid.Column="2" Content="ボタン６" />
        <Button Grid.Row="2" Grid.Column="0" Content="ボタン７" />
        <Button Grid.Row="2" Grid.Column="1" Content="ボタン８" />
        <Button Grid.Row="2" Grid.Column="2" Content="ボタン９" />
    </Grid>
</Window>

これで完成です。プログラムを実行すると全てのボタンにデフォルトのスタイルが適用されていることが分かります。

今回はスタイルを定義したファイルをプロジェクト全体で適用できるように共通化する手順を確認しました。

以上です。

コメント