WPF 设计稿还原完整指南MaterialDesignInXamlToolkit 把 Figma 稿子直接变界面【免费下载链接】MaterialDesignInXamlToolkitGoogles Material Design in XAML WPF, for C# VB.Net.项目地址: https://gitcode.com/gh_mirrors/ma/MaterialDesignInXamlToolkitMaterialDesignInXamlToolkit 把 Material Design 的配色体系、控件样式与图标集整体打包给 WPF让 Figma 设计稿到界面代码的还原从逐像素比对变成照单引用。场景周五傍晚的还原任务设计师交来一版用户中心页面的 Figma 稿紫色主色、圆角卡片、浮动标签的输入框、右侧一排线性图标。照着画布属性面板手写颜色值与字号初版界面总差一口气——按压态、聚焦动画、阴影层级全对不上。换成 MaterialDesignInXamlToolkit 之后思路反过来了不再描述控件长什么样而是声明这是卡片、这是主按钮外观由主题资源统一供给设计稿与代码之间只剩布局与数据。三分钟接入 MaterialDesignInXamlToolkit 主题NuGet 装包一行Install-Package MaterialDesignThemes。主题资源字典相当于应用的配色皮肤全部挂在 App.xaml 里Application x:ClassDemo.App xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:materialDesignhttp://materialdesigninxaml.net/winfx/xaml/themes Application.Resources ResourceDictionary ResourceDictionary.MergedDictionaries materialDesign:BundledTheme BaseThemeInherit PrimaryColorDeepPurple SecondaryColorLime / ResourceDictionary Sourcepack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml / /ResourceDictionary.MergedDictionaries /ResourceDictionary /Application.Resources /Application两段合并字典各管一事BundledTheme 声明基底BaseTheme取Light、Dark或Inherit跟随系统加主色、辅助色Defaults 字典注入全套控件样式。主色支持 DeepPurple、Teal 等命名色也接受任意 ARGB 字符串。 主题与配色Material Design 调色板与运行时热切换用 BundledTheme 三行定下全局配色命名色之外主题会派生一整套画刷PrimaryHueLightBrush、PrimaryHueMidBrush、PrimaryHueDarkBrush及 SecondaryHue 系列。XAML 里一律用DynamicResource引用换肤时界面自动重着色设计稿上主色-700这类色阶标注直接映射到对应画刷取用即可。PaletteHelper 运行时热切换配色var paletteHelper new PaletteHelper(); var theme paletteHelper.GetTheme(); theme.SetPrimaryColor(Colors.Teal); theme.SetSecondaryColor(Colors.Amber); paletteHelper.SetTheme(theme);GetTheme取回当前主题对象SetPrimaryColor、SetSecondaryColor换色后SetTheme写回所有DynamicResource引用的画刷即时生效——日夜模式 换肤两个需求一个类就够实现在 src/MaterialDesignThemes.Wpf/PaletteHelper.cs。 核心控件与样式按钮、文本框卡片的关键写法三行 XAML 出卡片Card是独立控件自带圆角与默认投影内容自由排布。设计稿里的卡片无论装列表还是图文都用它当容器不必再手写 Border 加阴影。HintAssist 一行给文本框加浮动提示TextBox materialDesign:HintAssist.Hint用户名 Style{StaticResource MaterialDesignTextBox} / Button Content主操作 Style{StaticResource MaterialDesignRaisedButton} / Button Content次操作 Style{StaticResource MaterialDesignFlatButton} /Hint 文本未聚焦时占位、聚焦后上浮成标签正是 Material Design 文本域的标准交互。按钮同理样式键的后缀区分层级MaterialDesignRaisedButton、MaterialDesignFlatButton、MaterialDesignToolButton、MaterialDesignFloatingActionMiniButton分别对应不同视觉权重。 图标、布局与辅助组件PackIcon 一行引入 Material Design 图标PackIcon的Kind属性绑定PackIconKind枚举上千个线性/填充图标按名取用尺寸跟随FontSize颜色吃Foreground可直接替换设计稿里的矢量图标。布局上不需要额外辅助Grid 加星号列还原等宽分栏WrapPanel 处理卡片流。真正辅助的是 Ripple 波纹、Snackbar 轻提示、PopupBox 气泡这类反馈组件设计稿里出现的微交互大多能直接对上。实战走查用户资料卡的还原过程设计稿上这张资料卡有四个信息位96px 圆形头像、姓名、职位、主按钮。落到 XAML 时头像有个易错点——WPF 的 Ellipse 没有 Child 属性把 Image 塞进去不会自动裁圆正确做法是把图片当画刷填进Ellipse.Fill姓名与职位引用排版样式键而不是手写字号保持与整体字体尺度一致按钮用MaterialDesignRaisedButton继承主色。materialDesign:Card MaxWidth300 Margin16 StackPanel Margin16 Ellipse Width96 Height96 HorizontalAlignmentCenter Ellipse.FillImageBrush ImageSourceResources/ProfilePic.jpg //Ellipse.Fill /Ellipse TextBlock TextJohn Doe Margin0,16,0,4 FontWeightBold HorizontalAlignmentCenter / TextBlock Text高级开发工程师 HorizontalAlignmentCenter / Button Content联系我 Margin0,16,0,0 HorizontalAlignmentCenter Style{StaticResource MaterialDesignRaisedButton} / /StackPanel /materialDesign:Card这段代码里没有一处颜色值与像素字号全部来自主题换肤时卡片随全局一起变——声明式还原省下的正是这份维护成本。⚠️ 踩坑与调优还原差异、DPI 与 MD2/MD3 选择还原差一截用 Snoop 类工具点选控件看实际命中的资源与画刷常见原因是某处StaticResource锁死了旧主题或引用了旧画刷名可用 MaterialDesignTheme.ObsoleteBrushes.xaml 兼容。Figma 按 96dpi 标注WPF 单位即 DIP建议 125%/150% 缩放下逐屏走查字号统一走MaterialDesignHeadline5TextBlock、MaterialDesignBody1等排版样式键避免手写 FontSize。MD2 与 MD3 只换一行资源字典MaterialDesign2.Defaults.xaml或MaterialDesign3.Defaults.xaml设计稿基于哪版规范就用哪版。性能画刷等 Freezable 对象离屏生成后Freeze长列表里避免每行套多层 Border 与阴影细节见 docs/ 下的优化文档。延伸入口控件样式集中在 src/MaterialDesignThemes.Wpf/Themes/按控件名查 XAML 键即可演示工程 src/MainDemo.Wpf/ 每一页都是一个可运行的还原样例对照设计稿逐页翻是最快的上手路径。【免费下载链接】MaterialDesignInXamlToolkitGoogles Material Design in XAML WPF, for C# VB.Net.项目地址: https://gitcode.com/gh_mirrors/ma/MaterialDesignInXamlToolkit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考