如何在WPF中使用 Fluent 主题

Fluent 主题

从 .NET 9 开始，WPF 附带了一个新主题-Fluent主题，它为 WPF 应用提供全新的现代 Windows 11 美学。它包括集成的浅色和深色模式，以及系统主题色支持。

Fluent主题是为 WPF 做的仿 Fluent 设计的皮肤。Fluent设计是微软的新式UI设计风格，WinUI3实现了这种风格。

Fluent设计

关于Fluent设计，可以参考以下链接

https://fluent2.microsoft.design/get-started/whatisnew

以下为WPF Fluent主题的官方示例截图，我的测试环境是Windows 10 1903

浅色模式

深色模式

Fluent主题实现

Fluent主题是WPF自带样式，这些样式定义在 PresentationFramework.Fluent中，所以在使用时不需要安装其它库。

代码结构

Fluent样式实现

如何在WPF中使用

1、新建一个WPF工程(.NET 9以上版本)

2、在App.Xaml中添加资源字典

复制代码

 1 <Application x:Class="WPF_FluentDemo.App"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:local="clr-namespace:WPF_FluentDemo"
 5              StartupUri="MainWindow.xaml">
 6     <Application.Resources>
 7         <ResourceDictionary>
 8             <ResourceDictionary.MergedDictionaries>
 9                 <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
10             </ResourceDictionary.MergedDictionaries>
11         </ResourceDictionary>
12     </Application.Resources>
13 </Application>

3、正常使用即可

这里我们添加一个Slider控件

复制代码

1   <Grid>
2       <Slider Width="100" VerticalAlignment="Center"></Slider>
3   </Grid>

运行效果还是非常不错的，如下所示。

因为这是一套主题，所以我们直接使用WPF自带的控件即可，但是Fluent也增加了一些额外的组件，

可以访问 https://apps.microsoft.com/detail/9ndlx60wx4kq 下载官方Demo，来查看所有示例的源码。

4、设置主题模式

Fluent主题支持以下主题模式

Light--- 应用浅色 Fluent 主题。
Dark- 应用深色 Fluent 主题。
System- 根据用户的当前 Windows 设置应用浅色或深色 Fluent 主题。
None--- （默认值）使用 Aero2 主题。

在XAML中设置主题模式

复制代码

1 <Application x:Class="WPF_FluentDemo.App"
2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4              xmlns:local="clr-namespace:WPF_FluentDemo"
5              StartupUri="MainWindow.xaml"
6              ThemeMode="Light">

在代码中设置主题模式

注意：此 API 是实验性的，可能会更改。如果要在代码中使用，需要抑制WPF0001错误

复制代码

1             // 设置整个应用程序的主题模式
2 #pragma warning disable WPF0001 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。
3             Application.Current.ThemeMode = ThemeMode.Light;
4 #pragma warning restore WPF0001 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。
5 
6             // 设置当前窗口的主题模式
7 #pragma warning disable WPF0001 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。
8             ThemeMode = ThemeMode.Light;
9 #pragma warning restore WPF0001 // 类型仅用于评估，在将来的更新中可能会被更改或删除。取消此诊断以继续。

使用Windows主题色

从Windows 10开始，引入了用户选择的主题色，用于提供个人触摸或调用特定视觉元素。 Fluent 支持用户选择的主题色。

Fluent主题已经帮我们定义好了Brush，直接像使用动态资源那样使用它就可以了

复制代码

1   <Grid>
2       <Border Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Bottom" Background="{DynamicResource AccentFillColorDefaultBrush}"></Border>
3   </Grid>

运行效果

完整的Brush/Color定义，可以参考Demo里的Colors页面

参考链接：

https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/whats-new/net90#fluent-theme

示例代码(.NET 10)

https://github.com/zhaotianff/cnblog-demo-code/tree/main/WPF_FluentDemo