システムで設定されているカラーテーマと異なるテーマを明示的に指定する (OSがダークカラーの場合でもアプリケーションは強制的にライトカラーにしたい) - WinUI

WinUI3アプリケーションで、システムで設定されているカラーテーマと異なるテーマを明示的に指定するコードを紹介します。

概要

WinUI 3アプリケーションでは、デフォルトの設定ではシステムのカラーテーマに応じてウィンドウの背景色や コントロールのカラーが設定されます。
しかし、アプリケーションによっては、システムで設定されているカラーテーマと異なるカラーテーマをアプリケーションに設定したい場合があります。
具体的な例では、OSがダークカラーの場合でもアプリケーションは強制的にライトカラーにしたい。OSがライトカラーでもアプリケーションはダークカラーにしたいなどです。

この記事では、WinUI 3アプリケーションにシステムのカラーテーマと異なるカラーテーマを明示的に指定する方法を紹介します。

デフォルトの動作

デフォルトのアプリケーション設定では、 ライトのカラーテーマがシステムに設定されている場合は、WinUI 3のアプリケーションもライトカラーテーマで表示されます。


システムのカラーテーマがダークテーマの場合はWinUI 3アプリケーションのカラーもダークカラーで表示されます。

対応方法

明示的にからテーマを指定する場合は、App.xamlファイルの Application タグ内に RequestedTheme 属性を追加し設定したいカラーテーマを指定します。

書式

RequestedTheme="(カラーテーマ名)"

記述例

明示的にライトカラーテーマを指定する場合の例

<Application
    x:Class="SetColorTheme.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SetColorTheme"
    RequestedTheme="Light">
<!-- 以下略 -->

明示的にダークカラーテーマを指定する場合の例

<Application
    x:Class="SetColorTheme.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SetColorTheme"
    RequestedTheme="Dark">
<!-- 以下略 -->

プログラム例

WinUI3プロジェクトを作成し、以下のコードを記述します。

コード

App.xaml
<Application
    x:Class="SetColorTheme.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SetColorTheme"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->
        </ResourceDictionary>
    </Application.Resources>
</Application>
MainWindow.xaml
<Window
    x:Class="SetColorTheme.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SetColorTheme"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
    <ComboBox SelectionChanged="ComboBox1_SelectionChanged" Header="Product" PlaceholderText="選んでね" Width="200">
      <x:String>ぺんぎんクッキー</x:String>
      <x:String>らくだキャラメル</x:String>
      <x:String>しろくまアイス</x:String>
      <x:String>かるがもサブレ</x:String>
    </ComboBox>
    <CheckBox x:Name="CheckBox1" Content="Two-state CheckBox" Checked="CheckBox1_checked" Unchecked="CheckBox1_unchecked" />
    <Slider AutomationProperties.Name="simple slider" Width="200"/>
    <Button x:Name="myButton" Style="{StaticResource AccentButtonStyle}" Click="myButton_Click">Click Me</Button>
    <TextBox AutomationProperties.Name="simple TextBox" Width="320"/>
  </StackPanel>
</Window>
MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace SetColorTheme
{
  /// <summary>
  /// An empty window that can be used on its own or navigated to within a Frame.
  /// </summary>
  public sealed partial class MainWindow : Window
  {
    public MainWindow()
    {
      this.InitializeComponent();
    }

    private void myButton_Click(object sender, RoutedEventArgs e)
    {
      myButton.Content = "Clicked";
    }

    private void CheckBox1_checked(object sender, RoutedEventArgs e)
    {
    }
    private void CheckBox1_unchecked(object sender, RoutedEventArgs e)
    {
    }

    private void ComboBox1_SelectionChanged(object sender, RoutedEventArgs e)
    {
    }
  }
}

実行結果

プロジェクトを実行します。システムのカラーテーマはダークカラーですが、ウィンドウがライトカラーテーマで表示されます。

App.xaml.csのコードで設定する方法

上記で紹介した方法は、App.xaml のApplication タグの属性にRequestedTheme を記述しましたが、App.xaml.csのコードで設定する方法もあります。 App.xaml.csで設定する場合は以下のコードを追記します。
this.RequestedTheme = ApplicationTheme.Light;
変更後のコードは以下の通りです。
App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ViewManagement;

// To learn more about WinUI, the WinUI project structure,
// and more about our project templates, see: http://aka.ms/winui-project-info.

namespace TitleBarChangeColor
{
  /// <summary>
  /// Provides application-specific behavior to supplement the default Application class.
  /// </summary>
  public partial class App : Application
  {


    /// <summary>
    /// Initializes the singleton application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
      this.InitializeComponent();
      this.RequestedTheme = ApplicationTheme.Light;
    }

    /// <summary>
    /// Invoked when the application is launched normally by the end user.  Other entry points
    /// will be used such as when the application is launched to open a specific file.
    /// </summary>
    /// <param name="args">Details about the launch request and process.</param>
    protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
    {
      m_window = new MainWindow();
      m_window.Activate();
    }

    private Window m_window;
  }
}
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2022-11-27
作成日: 2022-08-10
iPentec all rights reserverd.