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プロジェクトを作成し、以下のコードを記述します。
コード
<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>
<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>
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;
変更後のコードは以下の通りです。
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