WinUI3_设置原生态标题栏样式

简介

Windows原生态标题栏是基于Windows SDK自带的样式标题栏,非用户自定义标题栏,当用户使用ExtendsContentIntoTitleBar时Windows会将窗口区域(也就是客户区内容)里的内容样式扩展到标题栏里,也就是替换掉Windows原生态标题栏的样式了,标题和图标会消失但关闭按钮、最大化按钮、最小化按钮并不会,因为最大化和最小化、关闭按钮在Windows里被定义为属于非客户区内容,这几个组件会被保留,但是动画效果就没了。因为当你使用ExtendsContentIntoTitleBar接管标题栏区域后它的动画样式也一并被接管了,系统只保留非客户区的三个组件最大化最小化和关闭按钮以外的所有系统样式都会被取消,也就出现当我们使用ExtendsContentIntoTitleBar之后最大化最小化和关闭按钮没有淡入淡出动画了,也就是视觉效果后退了。
最好的解决方案是使用PreferredHeightOption将属性设置为Collapsed然后自己完全绘制最大化最小化和关闭按钮,这样动画效果也就有了,但是自己定义的话需要自己去实现snap layouts,这个较为麻烦,但还有一种方法,就是在你窗口使用系统主题色时,将标题栏样式也更改为主题色,这样既让Windows帮我们处理原生态动画和snap layouts也能让整体看起来更协调美观。

Tips
使用此方法需要确保你的Windows SDK版本在1.7以上,可以通过NuGet升级

使用方法

下面代码是一个开启mica效果的窗口
在这里插入图片描述
可以看到标题栏样式非常不融洽,接下来使用PreferredTheme修改一下标题栏样式,我的系统主题是深色:
首先需要包含对应的头文件:

#include <winrt/Microsoft.UI.Windowing.h>
#include <winrt/impl/Microsoft.UI.Windowing.0.h>
using namespace winrt::Microsoft::UI::Windowing;

然后使用PreferredTheme修改一下主题色:

this->AppWindow().TitleBar().PreferredTheme(TitleBarTheme::Dark);

效果如下:
在这里插入图片描述
可以看到非常融洽,如果想要跟随主题色可以使用UseDefaultAppMode来自适应主题色。
同时snap layouts布局也支持
在这里插入图片描述

Tips
该效果在Mica Alt下不是很和谐,Mica Alt主要是深色,而系统标题栏仅支持默认的Dark和Light,如果使用Mica Alt的话标题栏看起来会有层次感
其主要原因是因为窗口区域使用的是Mica Alt,而标题栏则是使用的是Base Mica在这里插入图片描述

### 实现 WinUI3 应用程序标题栏中的返回按钮 在 WinUI 3 中,可以通过自定义 `TitleBar` 来添加返回按钮。这涉及到几个关键步骤: #### 设置可扩展的 TitleBar 首先,在 XAML 文件中启用应用程序窗口的自定义标题栏支持。为此,需要获取系统的标题栏并将其设置为可扩展模式。 ```xml <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...> <!-- 启用自定义标题栏 --> <Window.ExtendsContentIntoTitleBar> True </Window.ExtendsContentIntoTitleBar> <Grid> ... </Grid> </Window> ``` #### 添加返回按钮到 TitleBar 接着,在页面顶部放置一个按钮作为返回按钮,并调整其位置使其位于标题栏区域。还需要编写相应的点击事件处理器逻辑以便响应用户的交互操作。 ```xml <!-- 定义返回按钮 --> <Button Name="BackButton" Click="GoBack_Click"> <FontIcon Glyph=""/> </Button> <!-- 将按钮定位在左上角 --> <Viewbox Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Left"> <StackPanel Orientation="Horizontal"> <Button Style="{StaticResource CaptionButtonStyle}" /> <TextBlock Text="我的应用" FontSize="16" Margin="8,0,0,0"/> </StackPanel> </Viewbox> ``` #### 处理返回按钮点击事件 最后一步是在代码隐藏文件 (`.cs`) 中实现当用户点击返回按钮时触发的动作。通常情况下,这意味着导航回前一页或关闭当前页面视图。 ```csharp private void GoBack_Click(object sender, RoutedEventArgs e) { if (this.Frame.CanGoBack) { this.Frame.GoBack(); } } ``` 以上方法展示了如何利用 WinUI 3 提供的功能来自定义应用程序窗口的外观和行为,从而实现在标题栏内集成返回按钮的效果[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

17岁boy想当攻城狮

感谢打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值