WinUI 3项目实战：手把手教你用C#和Windows App SDK打造一个Fluent Design风格的应用界面

WinUI 3项目实战用C#构建Fluent Design风格应用界面在当今追求极致用户体验的时代Windows应用开发正迎来全新的设计范式。Fluent Design System作为微软推出的现代化设计语言通过光影、深度、动效和材质等元素为用户带来更自然、更沉浸的交互体验。而WinUI 3作为Windows App SDK的核心UI框架为开发者提供了实现这些设计理念的最佳工具集。本文将带领您从零开始使用C#和WinUI 3构建一个完整的待办事项应用深入探索Fluent Design在实际项目中的应用技巧。1. 环境准备与项目创建1.1 开发环境配置要开始WinUI 3开发之旅首先需要确保开发环境准备就绪。以下是必需的组件清单Visual Studio 2022推荐17.4或更高版本.NET 6或更高版本WinUI 3项目默认使用Windows App SDK扩展通过Visual Studio安装器获取**Windows 10 SDK (10.0.19041.0)**或更高版本安装时在Visual Studio安装器的工作负载选项卡中勾选以下选项[√] .NET桌面开发 [√] Windows App SDK C#模板 [√] 通用Windows平台开发 [√] C (v143) 通用Windows平台工具1.2 创建WinUI 3项目打开Visual Studio后按照以下步骤创建新项目选择文件→新建→项目在搜索框中输入WinUI选择Blank App, Packaged (WinUI 3 in Desktop)设置项目名称如TodoApp和解决方案位置点击创建按钮项目创建完成后解决方案资源管理器中将显示以下关键文件TodoApp/ ├── App.xaml # 应用入口点 ├── App.xaml.cs # 应用逻辑代码 ├── MainWindow.xaml # 主窗口定义 └── MainWindow.xaml.cs # 主窗口逻辑提示选择Packaged项目模板意味着应用将通过MSIX打包分发这可以简化部署并支持自动更新。如果需要在企业环境中使用旁加载方式分发可以选择Blank App, Packaged with WAP模板。2. Fluent Design核心元素实现2.1 应用主题与色彩系统Fluent Design强调通过色彩传达信息层次。WinUI 3提供了完善的主题系统我们可以轻松实现深色/浅色模式切换。在App.xaml中添加以下资源字典Application.Resources ResourceDictionary ResourceDictionary.MergedDictionaries XamlControlsResources xmlnsusing:Microsoft.UI.Xaml.Controls / !-- 自定义颜色 -- ResourceDictionary Color x:KeySystemAccentColor#0063B1/Color SolidColorBrush x:KeyAppBackgroundBrush Color{ThemeResource SystemChromeLowColor} / /ResourceDictionary /ResourceDictionary.MergedDictionaries /ResourceDictionary /Application.Resources在MainWindow.xaml中设置背景Grid Background{StaticResource AppBackgroundBrush} !-- 其他内容 -- /Grid2.2 亚克力材质与阴影效果Fluent Design的标志性特性之一是亚克力Acrylic材质效果。在待办事项应用中我们可以为侧边导航栏添加亚克力效果NavigationView PaneDisplayModeLeftCompact NavigationView.PaneBackground AcrylicBrush BackgroundSourceHostBackdrop TintColor{ThemeResource SystemChromeHighColor} TintOpacity0.8 FallbackColor{ThemeResource SystemChromeMediumColor}/ /NavigationView.PaneBackground !-- 导航项 -- /NavigationView为任务卡片添加深度感应的阴影效果Border Background{ThemeResource CardBackgroundFillColorDefaultBrush} CornerRadius8 Margin8 Padding12 Border.Translation CompositeTransform3D TranslateZ16/ /Border.Translation !-- 卡片内容 -- /Border2.3 流畅动画与微交互良好的动效可以显著提升用户体验。WinUI 3提供了Connected Animation来实现元素间的流畅过渡。例如在任务列表和详情视图之间添加动画// 列表项点击时 private void OnItemClick(object sender, ItemClickEventArgs e) { var container listView.ContainerFromItem(e.ClickedItem) as ListViewItem; ConnectedAnimationService.GetForCurrentView() .PrepareToAnimate(forwardAnimation, container); Frame.Navigate(typeof(DetailPage), e.ClickedItem); } // 详情页加载时 protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); var animation ConnectedAnimationService.GetForCurrentView() .GetAnimation(backAnimation); if (animation ! null) { animation.TryStart(destinationElement); } }3. 构建待办事项应用核心功能3.1 数据模型设计首先定义任务项的数据模型在Models文件夹下创建TodoItem.cspublic class TodoItem : INotifyPropertyChanged { private string _title; private bool _isCompleted; private DateTime _dueDate; public string Title { get _title; set { _title value; OnPropertyChanged(); } } public bool IsCompleted { get _isCompleted; set { _isCompleted value; OnPropertyChanged(); } } public DateTime DueDate { get _dueDate; set { _dueDate value; OnPropertyChanged(); } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }3.2 使用x:Bind实现高效数据绑定WinUI 3的x:Bind提供了编译时类型检查和高性能绑定。在MainWindow.xaml中实现任务列表ListView ItemsSource{x:Bind ViewModel.TodoItems} SelectionModeSingle ListView.ItemTemplate DataTemplate x:DataTypemodels:TodoItem Grid Padding12 CheckBox IsChecked{x:Bind IsCompleted, ModeTwoWay} VerticalAlignmentCenter/ TextBlock Text{x:Bind Title} Margin36,0,0,0 Style{ThemeResource BodyStrongTextBlockStyle} VerticalAlignmentCenter/ TextBlock Text{x:Bind DueDate.ToShortDateString()} HorizontalAlignmentRight Style{ThemeResource CaptionTextBlockStyle} Foreground{ThemeResource TextFillColorSecondaryBrush}/ /Grid /DataTemplate /ListView.ItemTemplate /ListView3.3 命令栏与上下文菜单为应用添加Fluent风格的命令操作CommandBar DefaultLabelPositionRight AppBarButton IconAdd Label新建任务 ClickOnAddTask/ AppBarButton IconDelete Label删除已完成 ClickOnDeleteCompleted/ AppBarButton IconFilter Label筛选 AppBarButton.Flyout MenuFlyout MenuFlyoutItem Text全部 ClickOnFilterAll/ MenuFlyoutItem Text仅未完成 ClickOnFilterActive/ MenuFlyoutItem Text仅已完成 ClickOnFilterCompleted/ /MenuFlyout /AppBarButton.Flyout /AppBarButton /CommandBar4. 高级特性与性能优化4.1 响应式布局与多设备适配WinUI 3提供了强大的自适应布局能力。使用VisualStateManager实现不同窗口尺寸下的布局变化Grid VisualStateManager.VisualStateGroups VisualStateGroup VisualState x:NameNarrowState VisualState.StateTriggers AdaptiveTrigger MinWindowWidth0/ /VisualState.StateTriggers VisualState.Setters Setter TargetMainNavView.PaneDisplayMode ValueLeftMinimal/ Setter TargetDetailContent.Visibility ValueCollapsed/ /VisualState.Setters /VisualState VisualState x:NameWideState VisualState.StateTriggers AdaptiveTrigger MinWindowWidth800/ /VisualState.StateTriggers VisualState.Setters Setter TargetMainNavView.PaneDisplayMode ValueLeftCompact/ Setter TargetDetailContent.Visibility ValueVisible/ /VisualState.Setters /VisualState /VisualStateGroup /VisualStateManager.VisualStateGroups !-- 布局内容 -- /Grid4.2 虚拟化列表优化性能对于可能包含大量项目的待办列表使用ItemsRepeater实现高效虚拟化ScrollViewer ItemsRepeater ItemsSource{x:Bind ViewModel.TodoItems} ItemsRepeater.Layout UniformGridLayout ItemsStretchFill MinItemWidth300 MinRowSpacing8/ /ItemsRepeater.Layout ItemsRepeater.ItemTemplate DataTemplate x:DataTypemodels:TodoItem !-- 任务项模板 -- /DataTemplate /ItemsRepeater.ItemTemplate /ItemsRepeater /ScrollViewer4.3 使用Win2D实现自定义绘制对于需要特殊视觉效果的元素可以集成Win2D进行高性能自定义绘制private void OnDrawCanvas(ICanvasAnimatedControl sender, CanvasAnimatedDrawEventArgs args) { using (var session args.DrawingSession) { // 绘制自定义背景 var gradient new CanvasLinearGradientBrush(sender, Colors.Transparent, Color.FromArgb(30, 255, 255, 255)); session.FillRectangle(0, 0, (float)sender.Size.Width, (float)sender.Size.Height, gradient); // 绘制动态元素 foreach (var item in _animatedItems) { session.FillCircle(item.Position, item.Radius, item.Color); } } }5. 应用打包与部署5.1 配置应用清单在Package.appxmanifest中设置应用元数据Package xmlnshttp://schemas.microsoft.com/appx/manifest/foundation/windows10 xmlns:uaphttp://schemas.microsoft.com/appx/manifest/uap/windows10 xmlns:rescaphttp://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities Identity NameTodoApp PublisherCNYourName Version1.0.0.0 / Properties DisplayName待办事项/DisplayName PublisherDisplayNameYour Company/PublisherDisplayName LogoAssets\StoreLogo.png/Logo /Properties Capabilities rescap:Capability NamerunFullTrust / /Capabilities /Package5.2 生成MSIX包在解决方案资源管理器中右键单击打包项目选择发布→创建应用包选择分发方式Microsoft Store或旁加载设置版本号并选择生成配置点击创建按钮生成安装包注意如果要支持Windows 10版本1809及以上需在项目属性中设置Target Platform Version为10.0.18362.0或更高。5.3 测试与调试技巧开发过程中可以使用以下方法提高效率热重载修改XAML后无需重新编译即可查看变化实时可视化树调试运行时UI结构XAML绑定故障诊断在输出窗口中查看绑定错误性能分析器监控CPU、内存和GPU使用情况// 在App.xaml.cs中启用调试跟踪 public App() { this.InitializeComponent(); #if DEBUG this.DebugSettings.BindingFailed (sender, args) { Debug.WriteLine($Binding failed: {args.Message}); }; #endif }在实际项目中我发现WinUI 3的NavigationView控件在实现响应式布局时特别有用通过合理设置PaneDisplayMode属性可以轻松适应从手机到桌面各种尺寸的设备。另一个实用技巧是使用TeachingTip控件引导用户发现新功能这比传统的对话框更符合Fluent Design的理念。