---
lang: ja-jp
breaks: true
---
# WinUI 3 Window に `Theam` テーマを適用する 2022-07-27

> jingwei-a-zhang/WinAppSDK-DrumPad
> https://github.com/jingwei-a-zhang/WinAppSDK-DrumPad

## 実行結果



## App.xaml

<Application
    x:Class="App25.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App25">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
		
            <!-- Other app resources here -->
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="HomePageBackgroundBrush" Color="White"/>
                </ResourceDictionary>

                <ResourceDictionary x:Key="Dark">
                    <SolidColorBrush x:Key="HomePageBackgroundBrush" Color="Black"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>

        </ResourceDictionary>
    </Application.Resources>
</Application>

## MainWindow.xaml

<Window
    x:Class="App25.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App25"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:viewModels="clr-namespace:App25.viewModels"
    >

    <Grid
        Background="{ThemeResource HomePageBackgroundBrush}"
        Loading="Grid_Loading"
        >
        <StackPanel 
            Orientation="Vertical" 
            HorizontalAlignment="Center" 
            VerticalAlignment="Center"
            >

            <ToggleSwitch 
                AutomationProperties.Name="simple ToggleSwitch" 
                x:Name="dark_switch" 
                CornerRadius="3" 
                VerticalAlignment="Center"  
                HorizontalAlignment="Right" 
                MinWidth="0" 
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center" 
                IsOn="{x:Bind ViewModel.Dark_switch, Mode=TwoWay}"
                />
・・・
        </StackPanel>
    </Grid>
    
</Window>

## MainWindow.xaml.cs

namespace App25;

/// <summary>
/// An empty window that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainWindow : 
    Window
{
    private MainWindowViewModel ViewModel { get; init; }

    public MainWindow()
    {
        this.InitializeComponent();

        ViewModel = new MainWindowViewModel();
        ViewModel.PropertyChanged_Dark_switch += ViewModel_PropertyChanged_Dark_switch;
    }

    private void ViewModel_PropertyChanged_Dark_switch(object sender, PropertyChangedEventArgs e)
    {
        ToggleSwitch toggleSwitch = this.dark_switch;
        if (toggleSwitch != null)
        {
            ElementTheme elementTheme = ElementTheme.Default;
            if (toggleSwitch.IsOn)
            {
                elementTheme = ElementTheme.Dark;
            }
            else
            {
                elementTheme = ElementTheme.Light;
            }

            if (base.Content is FrameworkElement frameworkElement)
            {
                frameworkElement.RequestedTheme = elementTheme;
            }
        }
    }

    private void Grid_Loading(FrameworkElement sender, object args)
    {
        ApplicationTheme appTheme = Application.Current.RequestedTheme;
        switch (appTheme)
        {
            case ApplicationTheme.Light:
                ViewModel.Dark_switch = false;
                break;
            case ApplicationTheme.Dark:
                ViewModel.Dark_switch = true;
                break;
        }
    }
}

## MainWindowViewModel.cs

namespace App25.viewModels;

internal sealed class MainWindowViewModel:
    INotifyPropertyChanged
{
    public MainWindowViewModel(
        )
        : base()
    {
    }

    private bool m_dark_switch;
    /// <summary>
    ///
    /// </summary>
    /// <param name="dark_switch      "></param>
    public MainWindowViewModel(
        bool dark_switch
        )
         : base()
    {
        this.m_dark_switch = dark_switch;
    }
    /// <summary>
    ///
    /// </summary>
    /// <param name="org"></param>
    public MainWindowViewModel(
        MainWindowViewModel org
        )
         : base()
    {
        this.m_dark_switch = org.m_dark_switch;
    }
    public bool Dark_switch { get { return this.m_dark_switch; } set { if (value == this.m_dark_switch) { return; } this.m_dark_switch = value; OnPropertyChanged(nameof(Dark_switch)); } }

    public event PropertyChangedEventHandler PropertyChanged;
    public event PropertyChangedEventHandler PropertyChanged_Dark_switch;
    private void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        switch (propertyName)
        {
            case nameof(Dark_switch):
                PropertyChanged_Dark_switch?.Invoke(this, new PropertyChangedEventArgs(propertyName));
                break;
        }
    }
}

###### tags: `WinUI 3` `Theam` `テーマを適用する`