企业官网建设流程全解析

实用指南：用 WPF UI 给 WPF 应用换一套 Fluent 界面

【免费下载链接】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 窗口还是默认灰底？对话框样式停留在上个年代？用户在系统里切到深色模式，你的应用纹丝不动。WPF UI 是一个面向 WPF 框架的 Fluent 控件库，主题引擎、导航视图、沉浸式控件全部原生提供，不用套 WebView2。

你可能正踩的几个坑

应用跟不上系统的深浅色切换

WPF 默认资源不感知系统主题，深浅两套配色得手工维护，强调色更是常被写死。WPF UI 的主题逻辑集中在 src/Wpf.Ui/Appearance/ 目录，包含从系统提取颜色、应用主题样式的完整链路，其中 SystemThemeWatcher 会实时监听系统主题广播，你在 Windows 设置里切深色，应用背景和强调色自动跟上，中间不需要任何代码。

导航骨架全靠手写

带侧边栏加内容区的应用，通常要自己拼导航面板、管理选中态、处理页面切换和返回逻辑。WPF UI 的 NavigationView 控件把这套结构声明化，MVVM 集成写法可直接参考 samples/Wpf.Ui.Demo.Mvvm/ 项目。

核心特性拆解

SystemThemeWatcher：系统主题实时同步

一句话定位：挂钩窗口消息循环，自动应用系统主题、强调色和窗口背景。在窗口构造函数里加一行：

// 窗口构造函数中调用，默认 Mica 背景 + 同步强调色 SystemThemeWatcher.Watch(this);

不想跟随系统强调色时传updateAccents: false即可。运行后窗口呈现半透明雾面质感，切换系统主题时外观同步变化，效果类似下图。

NavigationView：MVVM 声明式导航

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

每个导航项通过TargetPageType绑定页面类型，点击即切换页面，返回按钮、页面历史都由控件内部处理。项目用依赖注入的话，注册AddNavigationViewPageProvider()后控件会通过 DI 容器创建页面实例，状态管理逻辑在 src/Wpf.Ui/Controls/NavigationView/ 目录。

FluentWindow 与沉浸式控件

FluentWindow 是库里的窗口基类，内置圆角、Mica/Acrylic 背景和自定义标题栏，实现位于 src/Wpf.Ui/Controls/FluentWindow/ 目录。除导航外，库还提供 NumberBox、InfoBar、Snackbar、TreeGrid 等控件，语法高亮 CodeBlock 的效果见下图，所有控件都跟随主题切换。

从零跑起来

先装包：

dotnet new wpf -n MyApp dotnet add package Wpf.Ui

在 App.xaml 中合并主题与控件字典（根元素加xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"声明）：

<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ui:ThemesDictionary Theme="Dark" /> <ui:ControlsDictionary /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources>

把 MainWindow 换成 FluentWindow：

<ui:FluentWindow Title="My App" Width="900" Height="600" WindowBackdropType="Mica" WindowCornerPreference="Round" ExtendsContentIntoTitleBar="True"> <ui:TitleBar Title="My App" /> <!-- 你的内容 --> </ui:FluentWindow>

运行后你会看到一个圆角窗口：标题栏与内容区融合，Mica 毛玻璃背景生效，深色主题应用正常。最常见的报错是控件没有样式、运行时提示找不到资源，九成情况是 App.xaml 漏合并了ThemesDictionary和ControlsDictionary，顺序上主题字典在前、控件字典在后。

进阶与避坑

• 4.x 版本迁移：导航接口（INavigationAware、INavigableView）移到了独立的 Wpf.Ui.Abstractions 包，IPageService改名为INavigationViewPageProvider，变更清单见 docs/migration/v4-migration.md。
• 不要在窗口加载完成前调用UnWatch，会直接抛InvalidOperationException；Watch在未加载的窗口上调用是安全的。
• SystemThemeWatcher是全局静态机制，多窗口同时监听时以最后一次调用的参数为准，注意参数保持一致。
• Segoe Fluent Icons 是 Windows 11 系统字体，库不能随包分发，面向 Windows 10 的项目需自行内嵌字体文件。

资源汇总：

• 官方文档：docs/
• 入门教程：docs/documentation/getting-started.md
• 示例项目：samples/
• 全部控件演示源码：src/Wpf.Ui.Gallery/

建议的下一步：克隆仓库后从 samples/Wpf.Ui.Demo.Simple 跑起来，再对照 MVVM 示例看 NavigationView 的完整接法，之后就可以把项目里手写的导航骨架替换掉了。

git clone https://gitcode.com/GitHub_Trending/wp/wpfui

【免费下载链接】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