WPF官方内置的Fluent主题

我来详细解释 WPF 官方内置的 Fluent 主题。

WPF Fluent 主题概述

从 .NET 6 开始，Microsoft 在 WPF 框架中内置了 Fluent Design System 主题，这是官方提供的现代化 UI 样式系统。

---

1. 启用方式

方法一：全局应用（推荐）

在 App.xaml 中引用：

<Application x:Class="WPFGallery.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- 引入 Fluent 主题 -->
                <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

方法二：局部应用

在特定窗口或控件中引用：

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

---

2. Fluent 主题特性

a) 现代化视觉设计

• 圆角边框：按钮、文本框等控件采用圆角设计
• 微妙阴影：控件具有轻微的深度效果
• 流畅动画：悬停、点击时的平滑过渡动画
• 色彩强调：使用强调色（Accent Color）突出重要元素

b) 响应式交互

<!-- 按钮在不同状态下的视觉反馈 -->
<Button Content="示例按钮"/>
<!-- 正常状态：默认样式 -->
<!-- 悬停状态：背景色变浅 -->
<!-- 按下状态：背景色加深 -->
<!-- 禁用状态：半透明灰色 -->

c) 一致的设计语言

所有控件遵循统一的设计规范：

• Button - 圆角按钮，带悬停效果
• TextBox - 带边框高亮的输入框
• ComboBox - 下拉框带动画展开
• CheckBox/RadioButton - 现代化勾选框
• Slider - 优化的滑块样式
• ProgressBar - 流畅的进度条动画
• ScrollBar - 简洁的滚动条
• Menu - 带圆角的菜单项
• ToolTip - 现代化提示框

---

3. 主题资源详解

a) 系统颜色资源

Fluent 主题提供了大量预定义的颜色资源：

<!-- 背景色 -->
<SolidColorBrush x:Key="SystemControlPageBackgroundAltHighBrush" Color="#FFFFFF"/>
<SolidColorBrush x:Key="SystemControlBackgroundBaseLowBrush" Color="#F3F3F3"/>

<!-- 前景色 -->
<SolidColorBrush x:Key="SystemControlForegroundBaseHighBrush" Color="#000000"/>
<SolidColorBrush x:Key="SystemControlForegroundBaseMediumBrush" Color="#666666"/>

<!-- 强调色（蓝色系） -->
<SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="#0078D4"/>
<SolidColorBrush x:Key="SystemControlHighlightAltAccentBrush" Color="#005A9E"/>

<!-- 边框色 -->
<SolidColorBrush x:Key="SystemControlForegroundBaseMediumLowBrush" Color="#999999"/>

使用示例：

<Grid Background="{DynamicResource SystemControlPageBackgroundAltHighBrush}">
    <TextBlock Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}" 
               Text="使用系统资源"/>
</Grid>

b) 控件样式资源

<!-- 按钮样式 -->
<Style TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}"/>

<!-- 文本框样式 -->
<Style TargetType="TextBox" BasedOn="{StaticResource DefaultTextBoxStyle}"/>

---

4. 控件样式展示

Button（按钮）

<!-- 标准按钮 -->
<Button Content="标准按钮" Width="120" Height="32"/>

<!-- 默认按钮（带强调色） -->
<Button Content="主要按钮" IsDefault="True" Width="120" Height="32"/>

<!-- 禁用按钮 -->
<Button Content="禁用按钮" IsEnabled="False" Width="120" Height="32"/>

<!-- 自定义样式按钮 -->
<Button Width="120" Height="32">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="💾" Margin="0,0,5,0"/>
        <TextBlock Text="保存"/>
    </StackPanel>
</Button>

效果：

• 圆角矩形
• 悬停时背景色变化
• 点击时有按压效果
• IsDefault=True 时使用强调色背景

TextBox（文本框）

<!-- 普通文本框 -->
<TextBox Width="250"/>

<!-- 只读文本框 -->
<TextBox Text="只读内容" IsReadOnly="True" Width="250"/>

<!-- 多行文本框 -->
<TextBox TextWrapping="Wrap" 
         AcceptsReturn="True" 
         VerticalScrollBarVisibility="Auto"
         Height="100" Width="250"/>

<!-- 密码框 -->
<PasswordBox Width="250"/>

效果：

• 聚焦时边框高亮
• 圆角边框
• 平滑的光标动画

CheckBox & RadioButton

<!-- 复选框 -->
<CheckBox Content="选项 1" IsChecked="True"/>
<CheckBox Content="选项 2"/>
<CheckBox Content="禁用选项" IsEnabled="False"/>

<!-- 单选按钮 -->
<RadioButton Content="选项 A" GroupName="Group1" IsChecked="True"/>
<RadioButton Content="选项 B" GroupName="Group1"/>

效果：

• 现代化的勾选动画
• 圆形/方形过渡效果
• 强调色的勾选状态

ComboBox（下拉框）

<ComboBox Width="200" SelectedIndex="0">
    <ComboBoxItem Content="选项 1"/>
    <ComboBoxItem Content="选项 2"/>
    <ComboBoxItem Content="选项 3"/>
</ComboBox>

效果：

• 下拉动画流畅
• 选项悬停高亮
• 圆角下拉面板

Slider（滑块）

<Slider Minimum="0" Maximum="100" Value="50" Width="300"/>

效果：

• 圆形滑块按钮
• 已填充部分使用强调色
• 拖动时平滑过渡

ProgressBar（进度条）

<!-- 确定进度 -->
<ProgressBar Value="65" Maximum="100" Height="20" Width="300"/>

<!-- 不确定进度（动画） -->
<ProgressBar IsIndeterminate="True" Height="20" Width="300"/>

效果：

• 圆角进度条
• 强调色填充
• 不确定状态时的流畅动画

ListBox & ListView

<ListBox Width="250" Height="150">
    <ListBoxItem Content="列表项 1"/>
    <ListBoxItem Content="列表项 2" IsSelected="True"/>
    <ListBoxItem Content="列表项 3"/>
</ListBox>

效果：

• 选中项使用强调色背景
• 悬停时背景高亮
• 平滑的选择动画

---

5. 深色主题支持

虽然官方 Fluent 主题默认是浅色，但可以通过覆盖颜色资源实现深色主题：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
        </ResourceDictionary.MergedDictionaries>
        
        <!-- 覆盖为深色主题 -->
        <SolidColorBrush x:Key="SystemControlPageBackgroundAltHighBrush" Color="#1E1E1E"/>
        <SolidColorBrush x:Key="SystemControlForegroundBaseHighBrush" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="SystemControlBackgroundBaseLowBrush" Color="#2D2D2D"/>
    </ResourceDictionary>
</Application.Resources>

---

6. 自定义强调色

可以通过覆盖强调色资源来更改主题色调：

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/PresentationFramework.Fluent;component/Themes/Fluent.xaml" />
        </ResourceDictionary.MergedDictionaries>
        
        <!-- 自定义强调色（例如：绿色） -->
        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" Color="#10893E"/>
        <SolidColorBrush x:Key="SystemControlHighlightAltAccentBrush" Color="#0D6D32"/>
        
        <!-- 或使用系统强调色 -->
        <SolidColorBrush x:Key="SystemControlHighlightAccentBrush" 
                         Color="{x:Static SystemParameters.WindowGlassColor}"/>
    </ResourceDictionary>
</Application.Resources>

---

7. 常用动态资源列表

<!-- 背景相关 -->
SystemControlPageBackgroundAltHighBrush
SystemControlBackgroundBaseLowBrush
SystemControlBackgroundChromeMediumLowBrush

<!-- 前景相关 -->
SystemControlForegroundBaseHighBrush
SystemControlForegroundBaseMediumBrush
SystemControlForegroundBaseLowBrush

<!-- 强调色相关 -->
SystemControlHighlightAccentBrush
SystemControlHighlightAltAccentBrush
SystemControlHighlightBaseHighBrush

<!-- 边框相关 -->
SystemControlForegroundBaseMediumLowBrush
SystemControlForegroundChromeDisabledLowBrush

<!-- 悬停相关 -->
SystemControlBackgroundListLowBrush
SystemControlHighlightListLowBrush

---

8. 优缺点分析

优点 ✅

1. 官方支持：由 Microsoft 维护，稳定可靠
2. 无需额外引用：.NET 6+ 内置，无需 NuGet 包
3. 现代化设计：符合 Fluent Design System 规范
4. 性能优秀：原生实现，性能最佳
5. 易于使用：一行代码即可全局应用
6. 兼容性好：对现有代码无侵入

局限性 ⚠️

1. 自定义受限：样式相对固定，深度定制困难
2. 功能简单：没有 Material Design 或其他第三方库丰富
3. 文档较少：官方文档不够详细
4. 仅支持 .NET 6+：旧版本 WPF 无法使用

---

9. 与第三方主题库对比

特性	Fluent (官方)	MaterialDesignInXaml	ModernWpf	HandyControl
性能	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
样式丰富度	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
自定义性	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
官方支持	✅	❌	❌	❌
学习成本	⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
额外依赖	❌	✅	✅	✅

---

10. 实际应用建议

适合使用 Fluent 主题的场景：

✅ 企业内部工具
✅ 管理后台系统
✅ 快速原型开发
✅ 追求性能和稳定性的项目
✅ 不需要复杂自定义的应用

建议使用第三方库的场景：

✅ 需要丰富的自定义控件（如时间选择器、图表等）
✅ 追求特定设计风格（Material Design、Metro 等）
✅ 需要深度定制主题
✅ 面向消费者的应用

---

11. 完整示例

让我为您当前项目添加更多 Fluent 主题的展示：

<Window x:Class="WPFGallery.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Fluent 主题完整示例" 
        Height="700" Width="1000"
        WindowStartupLocation="CenterScreen"
        Background="{DynamicResource SystemControlPageBackgroundAltHighBrush}">
    
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <StackPanel Margin="30">
            
            <!-- 标题 -->
            <TextBlock Text="WPF Fluent Theme Gallery" 
                       FontSize="32" 
                       FontWeight="Bold"
                       Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}"
                       Margin="0,0,0,30"/>
            
            <!-- 按钮组 -->
            <GroupBox Header="按钮 (Button)" Margin="0,0,0,20">
                <WrapPanel Margin="10">
                    <Button Content="标准按钮" Margin="5"/>
                    <Button Content="主要按钮" IsDefault="True" Margin="5"/>
                    <Button Content="禁用按钮" IsEnabled="False" Margin="5"/>
                </WrapPanel>
            </GroupBox>
            
            <!-- 输入控件 -->
            <GroupBox Header="输入控件 (Input)" Margin="0,0,0,20">
                <StackPanel Margin="10">
                    <TextBox Text="文本输入框" Width="300" HorizontalAlignment="Left" Margin="0,0,0,10"/>
                    <PasswordBox Width="300" HorizontalAlignment="Left" Margin="0,0,0,10"/>
                    <ComboBox Width="300" HorizontalAlignment="Left" SelectedIndex="0">
                        <ComboBoxItem Content="下拉选项 1"/>
                        <ComboBoxItem Content="下拉选项 2"/>
                    </ComboBox>
                </StackPanel>
            </GroupBox>
            
            <!-- 选择控件 -->
            <GroupBox Header="选择控件 (Selection)" Margin="0,0,0,20">
                <StackPanel Margin="10">
                    <CheckBox Content="复选框 1" IsChecked="True" Margin="0,0,0,5"/>
                    <CheckBox Content="复选框 2" Margin="0,0,0,10"/>
                    <RadioButton Content="单选按钮 1" IsChecked="True" Margin="0,0,0,5"/>
                    <RadioButton Content="单选按钮 2"/>
                </StackPanel>
            </GroupBox>
            
            <!-- 进度和滑块 -->
            <GroupBox Header="进度与滑块 (Progress & Slider)" Margin="0,0,0,20">
                <StackPanel Margin="10">
                    <Slider Value="50" Maximum="100" Width="350" HorizontalAlignment="Left" Margin="0,0,0,15"/>
                    <ProgressBar Value="65" Maximum="100" Height="8" Width="350" HorizontalAlignment="Left"/>
                </StackPanel>
            </GroupBox>
            
        </StackPanel>
    </ScrollViewer>
</Window>

---

总结

WPF 官方 Fluent 主题是一个轻量、高性能、易用的现代化 UI 解决方案。对于大多数企业应用来说，它提供了足够好的视觉效果和用户体验，同时保持了 WPF 原生的性能优势。如果您的项目不需要复杂的自定义控件，Fluent 主题是非常理想的选择！