企业官网建设流程全解析

WPF UI 4.0 使用教程：用系统主题跟随和侧边导航做出现代界面

【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfui

WPF UI 是面向 WPF 框架的 Fluent 风格控件库。借助 WPF UI 4.0，你可以在三步之内给 WPF 应用加上侧边导航、系统主题跟随和一批现代化 UI 控件。本文按"安装 → 跑通窗口 → 套用主题与导航"的顺序讲解，全程最小代码，跟着做即可验证。

快速安装：给项目添加 WPF UI 4.0 并跑出第一个窗口

本文提到的所有能力都来自 NuGet 包Wpf.Ui的 4.0.0 版本，用 .NET CLI 一条命令即可添加：

dotnet add package Wpf.Ui --version 4.0.0

包管理控制台里等价于Install-Package Wpf.Ui -Version 4.0.0。安装完成后无需注册或额外配置，直接写 XAML。

要做出第一个现代外观的窗口，只需把主窗口换成ui:Window，标题栏和窗口边框立刻换成 Fluent 风格：

<ui:Window x:Class="MyApp.MainWindow" xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml" Title="第一个 WPF UI 应用" Height="450" Width="800"> <ui:NavigationView /> </ui:Window>

运行后你会看到 Fluent 风格的标题栏、圆角窗口和标准边框——这正是"WPF 现代化 UI 控件"要解决的事，不用自己画一个像素。完整的新项目流程可参考 docs/documentation/getting-started.md。

一行代码让应用跟随系统主题 🌗

一个很现实的诉求：系统已经切了深色模式，应用却还是白的。4.0 新增的SystemThemeWatcher会实时监控系统外观变化，并同步调整应用的背景效果与配色方案，这是实现 WPF 深色主题跟随的核心组件。

在窗口的代码后置中调用一次即可：

SystemThemeWatcher.Watch(this, WindowBackdropType.Mica, true);

三个参数依次是：当前窗口实例、背景效果类型（Mica即云母效果，窗体背后呈半透明磨砂质感）、是否自动跟随系统强调色。系统切深色，应用跟着变暗；系统换了强调色，应用配色跟着变，无需重启、无需监听事件。

主题系统的完整实现位于 src/Wpf.Ui/Appearance/ 目录，涵盖从系统提取颜色到应用主题样式的全部逻辑。细节可阅读 docs/documentation/system-theme-watcher.md 和 docs/documentation/themes.md。

三步给应用加侧边导航栏：用 XAML 配置 NavigationView 🧭

导航是应用的骨架。4.0 对导航系统做了重构，NavigationView支持在 XAML 里声明完整导航结构，配合 MVVM 几乎不用写代码后置。最小配置如下：

<ui:NavigationView x:Name="RootNavigation"> <ui:NavigationView.MenuItems> <ui:NavigationViewItem Content="仪表盘" TargetPageType="{x:Type pages:DashboardPage}"> <ui:NavigationViewItem.Icon> <ui:SymbolIcon Symbol="Home24" /> </ui:NavigationViewItem.Icon> </ui:NavigationViewItem> </ui:NavigationView.MenuItems> </ui:NavigationView>

每个NavigationViewItem对应一个入口：Content是文字，TargetPageType指向要打开的页面类型，Icon属性挂一个SymbolIcon图标（如 Home24）。导航状态、页面切换动画、布局展开收起都由控件托管。

核心实现在 src/Wpf.Ui/Controls/NavigationView/ 目录，文档见 docs/documentation/navigation-view.md；完整的 MVVM 集成可以直接对照示例项目 samples/Wpf.Ui.Demo.Mvvm/。

15+ 新增控件：现代化组件清单

4.0 还新增了一批符合现代设计规范、全部支持主题切换的控件，其中上手即用价值较高的几个：

• MicaWindow：支持云母（Mica）/ 亚克力（Acrylic）背景效果的窗口；
• TabView：支持拖拽重排的标签页控件；
• CommandBar：上下文感知的命令工具栏；
• NavigationView：自适应布局的导航菜单，上一节已演示。

想逐个看实际效果，建议跑一遍 src/Wpf.Ui.Gallery/ 项目——它是官方演示合集，每个控件都有可交互的演示页和示例代码，比单看文档效率高得多。

常见问题

WPF UI 4.0 怎么用？按本文顺序做四件事：安装包 → 用ui:Window建窗口 → 调用SystemThemeWatcher.Watch→ 配置NavigationView。每一步跑一遍就能验证。

从 3.x 升级要注意什么？官方迁移清单在 docs/migration/v4-migration.md，主要三处：控件统一收进Wpf.Ui.Controls命名空间；ThemeManager改名为ApplicationThemeManager；旧版Navigation控件被NavigationView取代。新建项目则无需关心。

怎么验证深色主题跟随生效了？把系统外观切成深色模式，窗口背景与文字颜色应当立即变化，不需要重启应用。

效果和自己预期的不一致？打开 Gallery 演示项目找到对应控件的页面，逐条对照自己的 XAML 配置。

继续学习：去哪里求助，以及接下来做什么

• 官方文档入口：docs/，入门教程在 docs/documentation/getting-started.md。
• 示例项目合集：samples/，包含 MVVM 集成、对话框演示等完整应用。
• 问题反馈与贡献：遇到 bug 或有功能建议，通过项目仓库的 Issues 渠道提交，贡献流程见 CONTRIBUTING.md。

明确的下一步：先用上面的命令装好包，把 Gallery 示例项目完整跑一遍，熟悉控件的手感；然后把自己项目的主窗口换成ui:Window，加上主题跟随那一行调用。当深色模式切换时窗口跟着变色，就说明基础已经搭好，剩下的只是把对应章节复制到你的项目里。

【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfui