ダークモード時にWinUI 3 アプリケーションのタイトルバーを暗い色にしたい - WinUI

ダークモード時にWinUI 3 アプリケーションのタイトルバーを暗い色にするコードを紹介します。

概要

WinUI 3アプリケーションをダークモードで起動した場合、タイトルバーの色が白のままです。 ダークモードで起動した際には、タイトルバーに暗い色を設定して全体を暗い色にしたいです。



タイトルバーの背景色を設定するには、AppWindow オブジェクトの TitleBar.BackgroundColor に設定したいカラーを代入します。

プログラム

コード

以下のコードを記述します。

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

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </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;
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>
  /// 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();

      IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(this);
      Microsoft.UI.WindowId windowId = Microsoft.UI.Win32Interop.GetWindowIdFromWindow(hwnd);
      Microsoft.UI.Windowing.AppWindow appWindow = Microsoft.UI.Windowing.AppWindow.GetFromWindowId(windowId);

      UISettings us = new UISettings();
      appWindow.TitleBar.BackgroundColor = us.GetColorValue(UIColorType.Background);
    }

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

実行結果

ダークモードでプロジェクトを実行します。タイトルバーがウィンドウの背景色と同じ色になります。
ただし、閉じるボタンの色はライトモードのカラーのままなので注意が必要です。


ライトモードで実行した場合は下図の表示になります。こちらも、タイトルバーがウィンドウの背景色と同じ色になります。