MaterialDesignInXamlToolkit 设计稿还原：5 步把 Figma 卡片从图纸搬进 WPF

MaterialDesignInXamlToolkit 设计稿还原5 步把 Figma 卡片从图纸搬进 WPF【免费下载链接】MaterialDesignInXamlToolkitGoogles Material Design in XAML WPF, for C# VB.Net.项目地址: https://gitcode.com/gh_mirrors/ma/MaterialDesignInXamlToolkit按钮发灰、卡片没阴影、字号差两号——你照着 Figma 逐属性抄出来的 WPF 界面一打开就像串味了。问题往往不在代码而在于主题资源没接对地方。这篇文章用 MaterialDesignInXamlToolkit 把 Figma 到 WPF 的设计稿还原跑成一条流水线先接主题再套控件最后拼布局全程 5 步。MaterialDesignInXamlToolkit 能力速览先说清楚这个库能替你干哪些活后面每一步都用得上能力说明MD2 / MD3 两套样式字典一行 XAML 切换兼容两代 Material Design 规范全量控件样式按钮、输入框、Card、DialogHost、Snackbar 等开箱即用完整图标包PackIcon 控件引用 Material Design Icons 全部字形运行时换肤PaletteHelper 类可在不重启的情况下热切主色可运行 Demo 工程每种控件都有对照页面还原时直接抄作业三行代码配好主题WPF 主题配置设计稿的颜色体系主色、强调色落地靠的是BundledTheme主题资源聚合元素一行生成整套刷色资源。在 App.xaml 的 MergedDictionaries 里写materialDesign:BundledTheme BaseThemeLight PrimaryColorDeepPurple SecondaryColorLime /主色和强调色直接用色板名就行不用查十六进制值。紧接着引一行默认样式字典ResourceDictionary Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml / 如果你的设计稿是 Material Design 3 风格大圆角、更柔和的阴影把上面这行字典里的MaterialDesign2改成MaterialDesign3就能切其余代码不用动。跑通这一步再往下此时随便放一个Button它已经自动带上了主题色和涟漪效果。WPF 按钮与输入框样式、PackIcon 图标控件样式不需要自己写 Style直接引现成的 x:Key。输入框配合HintAssist浮动提示附加属性就是设计稿里输入框上方那个小标签TextBox materialDesign:HintAssist.HintUsername Style{StaticResource MaterialDesignOutlinedTextBox} / Button ContentSign in Style{StaticResource MaterialDesignRaisedButton} /图标用 PackIcon 控件矢量图标控件Kind 指定图标名materialDesign:PackIcon KindAccountCircle Foreground{DynamicResource PrimaryHueDarkBrush} /这里有个容易混淆的点TextBlock 的排版样式键名要带TextBlock后缀比如MaterialDesignHeadline5TextBlock。写键名时对着 Demo 工程里 Fields.xaml 这类页面抄比自己猜快得多。拼装用户卡片从设计稿到代码前面接的主题、控件、图标现在串成一个 Figma 里最常见的场景头像 姓名 职位 联系按钮的用户卡片。外层用Card容器自带阴影和圆角的卡片控件内部 StackPanel 纵向堆叠Card Style{StaticResource MaterialDesignElevatedCard} StackPanel Margin16 TextBlock TextJohn Doe Style{StaticResource MaterialDesignHeadline5TextBlock} / /StackPanel /Card头像用 Ellipse 加 Clip 裁圆图片路径指向 Resources 下的 ProfilePic.jpg按钮用MaterialDesignRaisedButton并加Margin拉开间距。整体布局参考 Demo 里 Cards.xaml 的排布方式间距数值直接从 Figma 的 inspect 面板读通常对齐 8 的倍数。设计稿还原容易忽略的 4 个细节⚠️ 这几条是还原走样的高发区逐条过MD2 和 MD3 的排版键名不同。MD2 是MaterialDesignHeadline5TextBlock这种命名MD3 换成MaterialDesignTitleMediumTextBlock一套。键找不到报错时先查你引的是哪份 Defaults 字典。别写死颜色值。设计稿取色后尽量映射到PrimaryHueDarkBrush、MaterialDesignDivider这类 DynamicResource 刷色换主题和深浅色切换才不会翻车。卡片阴影交给控件。Card 自带阴影系统手动套 Border 描边容易和设计稿的投影层错位圆角调UniformCornerRadius一个属性就够。注意 DPI 基准。Figma 按 96 DPI 出图Windows 缩放 125% 时所有像素值视觉放大约 1/4还原前先确认系统缩放设置一致。下一步建议把仓库克隆下来git clone https://gitcode.com/gh_mirrors/ma/MaterialDesignInXamlToolkit直接运行 src/MainDemo.Wpf/ 里的对照页面把你手上那张 Figma 稿逐控件比对调参想切到 Material Design 3 就换 src/MaterialDesign3.Demo.Wpf/ 参照。主题样式源码集中在 src/MaterialDesignThemes.Wpf/优化类问题可以翻 docs/ 目录下的几篇性能文档。【免费下载链接】MaterialDesignInXamlToolkitGoogles Material Design in XAML WPF, for C# VB.Net.项目地址: https://gitcode.com/gh_mirrors/ma/MaterialDesignInXamlToolkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考