🎯 C# Fluent Design UI 入门教程

你好！如果你是编程新手，这个教程正是为你设计的。我们会一步一步地教你如何使用C#创建一个美观的Fluent Design界面应用。即使你从未写过一行代码，按照本教程也能完成一个漂亮的程序！

📚 教程介绍

欢迎来到C# Fluent Design UI开发教程！本教程专为编程初学者设计，即使你从未写过代码，也能跟随教程创建一个漂亮的Fluent Design应用程序。

什么是Fluent Design？Fluent Design是微软推出的设计语言，特点是使用光影、动效、材质等元素创造更直观、美观的用户界面。

🔧 环境准备

步骤1：下载并安装 Visual Studio 2022

访问 https://visualstudio.microsoft.com/zh-hans/downloads/

选择"Community"版本（免费）

下载并运行安装程序

步骤2：安装必要的工作负载

启动Visual Studio安装程序

选择"通用Windows平台开发"工作负载

确保勾选".NET 桌面开发"

点击"安装"按钮

💡 小贴士：安装过程可能需要30分钟到1小时，取决于你的网络速度和电脑性能。

💡 Fluent Design 核心概念

在开始编程前，了解Fluent Design的几个核心概念：

光感 (Light) - 使用光影效果增强界面层次

深度 (Depth) - 通过阴影和层级创造立体感

动效 (Motion) - 流畅的动画让界面更生动

材质 (Material) - 如亚克力(Acrylic)效果创造质感

缩放 (Scale) - 适应不同设备和屏幕尺寸

📝 创建第一个Fluent Design项目

步骤1：创建新项目

打开Visual Studio

点击"创建新项目"

搜索"UWP"或"通用Windows"

选择"空白应用(通用Windows)"模板

设置项目名称（如"MyFluentApp"）

点击"下一步"

步骤2：配置项目

目标版本选择最新版本（如Windows 10, version 2004）

最低版本选择Windows 10, version 1809

点击"创建"

💻 编写Fluent Design界面代码

打开"MainPage.xaml"文件，将以下代码替换原有内容：

<Page x:Class="MyFluentApp.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MyFluentApp"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions>

<!-- 顶部标题区域 -->

<StackPanel Grid.Row="0"

Padding="20,40,20,20"

HorizontalAlignment="Center">

<TextBlock Text="欢迎使用Fluent Design"

Style="{StaticResource TitleTextBlockStyle}"

HorizontalAlignment="Center"

Foreground="White"/>

<TextBlock Text="这是你的第一个Fluent应用程序"

Style="{StaticResource SubtitleTextBlockStyle}"

HorizontalAlignment="Center"

Foreground="White"

Opacity="0.9"/>

</StackPanel>

<!-- 主要内容区域 -->

<StackPanel Grid.Row="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="20">

<!-- 卡片式按钮 -->

<Button x:Name="GreetButton"

Content="点击问候"

Width="200"

Height="50"

Background="{ThemeResource AccentButtonBackground}"

Foreground="White"

FontSize="16"

Click="GreetButton_Click">

<Button.Flyout>

<Flyout>

<TextBlock Text="这是一个弹出提示！"

FontSize="14"

TextWrapping="Wrap"/>

</Flyout>

</Button.Flyout>

</Button>

<!-- 结果显示文本 -->

<TextBlock x:Name="ResultText"

Text="点击按钮查看效果"

FontSize="18"

HorizontalAlignment="Center"

Foreground="White"

TextAlignment="Center"

Width="300"/> <!-- 滑块控件 --> <Slider x:Name="SizeSlider" Minimum="10"

Maximum="50" Value="20" Width="300"

ValueChanged="SizeSlider_ValueChanged"/>

<!-- 颜色选择器 --> <ColorPicker x:Name="ColorPicker"

Color="Blue" Width="300"

ColorChanged="ColorPicker_ColorChanged"/> </StackPanel>

<!-- 底部信息 --> <TextBlock Grid.Row="2"

Text="© 2026 我的第一个Fluent应用"

HorizontalAlignment="Center"

VerticalAlignment="Bottom"

Margin="0,0,0,20"

Foreground="White"

Opacity="0.7"/>

</Grid> </Page>

⚙️ 添加交互功能

打开"MainPage.xaml.cs"文件，替换代码为：

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Runtime.InteropServices.WindowsRuntime; using Windows.Foundation; using Windows.Foundation.Collections; using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Data; using Windows.UI.Xaml.Input; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Navigation;

namespace MyFluentApp { public sealed partial class MainPage :

Page { public MainPage() { this.InitializeComponent(); }

private void GreetButton_Click(object sender, RoutedEventArgs e) {

// 改变结果文本

ResultText.Text = "你好！你成功创建了Fluent Design应用！";

// 临时改变按钮文本

var button = sender as Button;

button.Content = "已问候";

// 1.5秒后恢复按钮文本 var timer = new DispatcherTimer();

timer.Interval = TimeSpan.FromSeconds(1.5); timer.Tick += (s, args) =>

{ button.Content = "点击问候"; timer.Stop(); };

timer.Start(); }

private void SizeSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)

{

// 根据滑块值改变结果文本的字体大小 if (ResultText != null)

{ ResultText.FontSize = e.NewValue; } }

private void ColorPicker_ColorChanged(ColorPicker sender, ColorChangedEventArgs args)

{ // 根据颜色选择器改变结果文本的颜色 if (ResultText != null)

{ ResultText.Foreground = new SolidColorBrush(args.NewColor); }

} } }

🚀 运行和测试应用

步骤1：构建项目

点击菜单栏"生成" → "生成解决方案"

确保没有错误信息

步骤2：运行应用

点击工具栏上的"本地计算机"按钮（绿色三角形）

等待应用启动

应用功能说明：

点击"点击问候"按钮会显示问候语

滑动滑块可以改变文本大小

使用颜色选择器改变文本颜色

按钮有弹出提示功能

🎨 Fluent Design 控件介绍

Fluent Design包含许多现代化控件，以下是一些常用的：

Button - 按钮控件，支持多种样式

TextBox - 文本输入框

Slider - 滑块控件

ColorPicker - 颜色选择器

ListView - 列表视图

NavigationView - 导航视图

CardControl - 卡片控件

🔧 扩展功能示例

想要添加更多功能？尝试在XAML中添加以下控件：

<!-- 添加一个复选框 --> <CheckBox Content="记住我"

IsChecked="True"/> <!-- 添加一个文本框 -->

<TextBox PlaceholderText="请输入用户名" Width="300"/>

<!-- 添加一个组合框 --> <ComboBox Width="300" Header="选择选项">

<ComboBoxItem Content="选项1"/>

<ComboBoxItem Content="选项2"/>

<ComboBoxItem Content="选项3"/> </ComboBox>

🔍 常见问题解决

💡 编译错误：检查XAML语法是否正确，确保所有标签都有对应的结束标签。

💡 设计器不显示：保存文件后重新加载，或重启Visual Studio。

💡 运行时错误：检查C#代码中的命名是否与XAML中的x:Name一致。

📈 下一步学习建议

恭喜你完成了第一个Fluent Design应用！接下来可以尝试：

学习更多XAML布局控件（Grid, StackPanel, RelativePanel）

探索动画和过渡效果

学习数据绑定技术

创建多页面应用程序

研究WinUI 3（最新版本的Fluent Design）

🎉 恭喜！你已经成功创建了第一个Fluent Design应用程序。继续练习，你会越来越熟练！

📖 参考资源

微软官方文档：https://docs.microsoft.com/zh-cn/windows/uwp/design/

Fluent Design系统：https://www.microsoft.com/design/fluent/

UWP开发指南：https://docs.microsoft.com/zh-cn/windows/uwp/get-started/