winui3开发笔记（二）自定义标题栏

news2024/11/29 10:53:25

参考文章链接：https://www.programminghunter.com/article/46392310600/

注意事项

获取 AppWindowTitleBar 的实例并设置其颜色属性时，InitializeTitleBar(AppWindow.TitleBar);，只适用于Windows App SDK 1.2及以上，所以如果用win10开发，最多1.0，之前一直没有发现时开发系统环境问题，根本运行不了。所以改成win11开发就可以了
官方文档说明链接：https://learn.microsoft.com/zh-cn/windows/apps/develop/title-bar?tabs=wasdk

代码：

App.xaml.cs：

using Microsoft.UI;
using Microsoft.UI.Windowing;
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.Storage;
using WinRT.Interop;

namespace App1
{
    public partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();
        }
        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
        {
            m_window = new MainWindow();
            _windowHandle = WindowNative.GetWindowHandle(m_window);
            var windowId = Win32Interop.GetWindowIdFromWindow(_windowHandle);
            AppWindow = AppWindow.GetFromWindowId(windowId);
            AppWindow.TitleBar.ExtendsContentIntoTitleBar = true;
            InitializeTitleBar(AppWindow.TitleBar);
            m_window.Activate();
        }

        private IntPtr _windowHandle;
        public static AppWindow AppWindow { get; private set; }// 应用窗口对象.
        public static Window m_window { get; private set; }// 主窗口.
        public static void InitializeTitleBar(AppWindowTitleBar bar)
        {
            bar.ExtendsContentIntoTitleBar = true;
            // 设置成自己预期的颜色即可
            bar.ButtonBackgroundColor = ColorHelper.FromArgb(0, 240, 243, 249);
            bar.ButtonForegroundColor = Colors.Black;
            bar.ButtonHoverBackgroundColor = ColorHelper.FromArgb(0, 240, 243, 249);
            bar.ButtonHoverForegroundColor = Colors.Black;
            bar.ButtonPressedBackgroundColor = ColorHelper.FromArgb(0, 240, 243, 249);
            bar.ButtonPressedForegroundColor = Colors.Black;
            bar.ButtonInactiveBackgroundColor = ColorHelper.FromArgb(0, 240, 243, 249);
            bar.ButtonInactiveForegroundColor = Colors.Black;
        }
    }
}

AppTitleBar.xaml

<Grid Height="48" Padding="16,0,0,0" Background="#F0F3F9" RequestedTheme="Light">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition x:Name="SearchColumn" Width="*" />
        <ColumnDefinition Width="120" />
    </Grid.ColumnDefinitions>

    <StackPanel VerticalAlignment="Center" Orientation="Horizontal" Spacing="16">
        <TextBlock VerticalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}"
    Text="DeskTop" />
    </StackPanel>
</Grid>

MainWindow.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <!--删除border，改换titlebar-->
    <local1:AppTitleBar />
    <Frame x:Name="frame" Grid.Row="1"></Frame>
</Grid>