WPFDevelopers 实战：主题切换、颜色选择与圆形菜单一站式集成

发布时间：2026/7/23 12:16:56

WPFDevelopers 实战：主题切换、颜色选择与圆形菜单一站式集成
目录一、ColorSwitchBtn —— 主题色切换按钮1.1 效果1.2 XAML 结构1.3 C# 后台代码1.4 三步接入你自己的项目二、CircleMenu —— 圆形弹出菜单2.1 效果2.2 XAML 结构2.3 常用依赖属性一览2.4 路由事件2.5 后台处理命令示例2.6 拖动 点击判定2.7 动画实现原理三、组合使用建议四、完整最小示例一、ColorSwitchBtn —— 主题色切换按钮1.1 效果点击标题栏上的调色板图标按钮弹出一个Popup内含ColorPicker颜色选择器用户挑选好颜色后点Apply即可实时切换整个应用的主题色点Cancel则关闭弹层不应用。1.2 XAML 结构wd:Window.TitleBarLayout StackPanel HorizontalAlignmentRight wd:PanelHelper.Spacing2 OrientationHorizontal wd:SwitchButton x:NameThemeSwitchBtn Width30 Height30 ClickThemeSwitchBtn_Click wd:SwitchButton.UncheckedContent /wd:SwitchButton.UncheckedContent wd:SwitchButton.CheckedContent /wd:SwitchButton.CheckedContent /wd:SwitchButton wd:SwitchButton x:NameColorSwitchBtn Width30 Height30 wd:SwitchButton.UncheckedContent wd:PathIcon Data... ForegroundWhite / /wd:SwitchButton.UncheckedContent wd:SwitchButton.CheckedContent wd:PathIcon Data... ForegroundWhite / /wd:SwitchButton.CheckedContent /wd:SwitchButton Popup AllowsTransparencyTrue HorizontalOffset-200 IsOpen{Binding IsChecked, ElementNameColorSwitchBtn, ModeTwoWay} PlacementBottom PlacementTarget{Binding ElementNameColorSwitchBtn} StaysOpenFalse Border Margin10 Background{DynamicResource WD.BackgroundBrush} BorderBrush{DynamicResource WD.BaseBrush} BorderThickness1 CornerRadius4 Effect{StaticResource WD.PopupShadowDepth} StackPanel Margin4 wd:ColorPicker x:NameThemeColorPicker / StackPanel HorizontalAlignmentRight wd:PanelHelper.Spacing4 OrientationHorizontal Button ContentApply Style{StaticResource WD.PrimaryButton} ClickColorPicker_Apply / Button ContentCancel Style{StaticResource WD.DefaultButton} ClickColorPicker_Cancel / /StackPanel /StackPanel /Border /Popup /StackPanel /wd:Window.TitleBarLayout关键点wd:SwitchButton自带Checked/Unchecked两态内容可直接当作开关图标。Popup.IsOpen双向绑定到ColorSwitchBtn.IsChecked点击按钮自动弹出点外部自动收起。ColorPicker控件来自 WPFDevelopers开箱即用。1.3 C# 后台代码private void OnMainWindow_Loaded(object sender, RoutedEventArgs e) { SetThemeSource(); // 用当前主题色初始化颜色选择器 ThemeColorPicker.SelectedColor ThemeManager.Instance.PrimaryColor; } private void ColorPicker_Apply(object sender, RoutedEventArgs e) { ColorSwitchBtn.IsChecked false; // 关闭 Popup ThemeManager.Instance.SetColor(ThemeColorPicker.SelectedColor); } private void ColorPicker_Cancel(object sender, RoutedEventArgs e) { ColorSwitchBtn.IsChecked false; // 仅关闭 Popup }1.4 三步接入你自己的项目在窗口顶部或任意容器放置wd:SwitchButtonwd:ColorPickerPopup。Popup.IsOpen双向绑定到按钮IsChecked。在 Apply 按钮事件中调用ThemeManager.Instance.SetColor(picker.SelectedColor)。二、CircleMenu —— 圆形弹出菜单2.1 效果悬浮在窗口右下角的圆形按钮点击中心按钮后子菜单项沿圆形轨迹向外展开带 0.4s 动画点击某一项触发命令再次点击中心按钮则收回。整个圆形菜单还可拖动。2.2 XAML 结构wd:CircleMenu Grid.Column2 Width100 Height100 Margin20 HorizontalAlignmentRight VerticalAlignmentBottom ItemClickCommand{Binding CircleMenuItemClickCommand, RelativeSource{RelativeSource AncestorTypeWindow}} wd:CircleMenuItem x:NameScreenShot ToolTipScreenShot wd:SvgViewer Sourcepack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/ScreenShot.svg / /wd:CircleMenuItem wd:CircleMenuItem x:NameGithub ToolTipGithub wd:SvgViewer Sourcepack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/Github.svg / /wd:CircleMenuItem wd:CircleMenuItem x:NameGrayscale ToolTipGrayscale wd:SvgViewer x:NameGrayscaleSvg Sourcepack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/EnableGrayscale.svg / /wd:CircleMenuItem wd:CircleMenuItem x:NameTheme ToolTipTheme wd:SvgViewer x:NameThemeSvg Sourcepack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/Sun.svg / /wd:CircleMenuItem wd:CircleMenuItem x:NameCode ToolTipMainWindow Code wd:SvgViewer Sourcepack://application:,,,/WPFDevelopers.Samples;component/Resources/Svg/Code.svg / /wd:CircleMenuItem wd:CircleMenuItem x:NameClearToast ToolTipClear Toast wd:PathIcon Width10 Height10 KindWindowClose / /wd:CircleMenuItem /wd:CircleMenu2.3 常用依赖属性一览属性类型说明ItemsCircleMenuItemCollection子项集合也可直接在 XAML 中写子元素IsExpandedbool控制展开/收起支持 TwoWay 绑定ItemClickCommandICommand子项点击命令参数为被点击的CircleMenuItemSelectedIndex/SelectedItemint/object选中项默认双向绑定SectorBackgroundBrush扇区背景色SectorDualBackgroundBrush奇数项扇区交替色SelectedBackgroundBrush选中扇区背景色MinItemsint子项最小数量低于此值自动隐藏默认 2CanDragbool是否允许拖动整个菜单默认 true2.4 路由事件wd:CircleMenu ItemClickCircleMenu_ItemClick ... /private void CircleMenu_ItemClick(object sender, RoutedEventArgs e) { var item e.OriginalSource as CircleMenuItem; // 处理点击... }ItemClick和ItemClickCommand会同时触发MVVM 推荐用 Command复杂交互可用事件。2.5 后台处理命令示例public ICommand CircleMenuItemClickCommand new RelayCommand(param { if (param isnot CircleMenuItem item) return; switch (item.Name) { caseScreenShot: // 截图... break; caseGithub: Process.Start(new ProcessStartInfo(https://github.com/...) { UseShellExecute true }); break; caseTheme: var isDark ThemeSvg.Source.Contains(Moon); App.Theme isDark ? ThemeType.Dark : ThemeType.Light; ThemeManager.Instance.SetTheme(App.Theme); break; caseCode: CodeDrawer.IsOpen !CodeDrawer.IsOpen; break; caseClearToast: Toast.ClearAll(); break; } });2.6 拖动 点击判定CanDragTrue默认时拖动菜单会在父容器范围内移动光标变为 SizeAll。当按下到抬起的水平/垂直位移都小于 3 像素时判定为点击触发IsExpanded翻转。2.7 动画实现原理展开/收起基于ItemsPresenter.Clip的EllipseGeometry.RadiusX/RadiusY配合CubicEase(EaseOut)展开 0.4s、收起 0.3s。子项角度在UpdateAllAnglesCore()中按360 / Items.Count均分计算。三、组合使用建议位置CircleMenu一般放在窗口角落如示例的右下角ColorSwitchBtn适合放在TitleBarLayout。主题联动CircleMenu 中的Theme项可与ThemeSwitchBtn共享同一套ThemeManager逻辑保证 UI 一致。MVVM所有交互尽量通过ItemClickCommandRelayCommand处理后台只保留视图层必要的绑定如IsChecked、Source切换。子项数量建议 3–8 个超过 8 个扇区会过于拥挤。MinItems默认为 2可根据业务调整。资源示例使用wd:SvgViewer加载 SVG 图标也支持wd:PathIcon等任意UIElement作为子项内容。四、完整最小示例wd:Window xmlns:wdhttps://github.com/WPFDevelopersOrg/WPFDevelopers ... wd:Window.TitleBarLayout StackPanel HorizontalAlignmentRight OrientationHorizontal wd:SwitchButton x:NameColorSwitchBtn Width30 Height30 wd:SwitchButton.UncheckedContent wd:PathIcon Data... ForegroundWhite / /wd:SwitchButton.UncheckedContent wd:SwitchButton.CheckedContent wd:PathIcon Data... ForegroundWhite / /wd:SwitchButton.CheckedContent /wd:SwitchButton Popup IsOpen{Binding IsChecked, ElementNameColorSwitchBtn, ModeTwoWay} PlacementBottom PlacementTarget{Binding ElementNameColorSwitchBtn} StaysOpenFalse StackPanel wd:ColorPicker x:NameThemeColorPicker / Button ContentApply ClickColorPicker_Apply / /StackPanel /Popup /StackPanel /wd:Window.TitleBarLayout Grid wd:CircleMenu Width100 Height100 HorizontalAlignmentRight VerticalAlignmentBottom ItemClickCommand{Binding MenuClickCmd} wd:CircleMenuItem ToolTipItem 1 wd:PathIcon KindHome / /wd:CircleMenuItem wd:CircleMenuItem ToolTipItem 2 wd:PathIcon KindSettings / /wd:CircleMenuItem /wd:CircleMenu /Grid /wd:Windowprivate void ColorPicker_Apply(object sender, RoutedEventArgs e) { ColorSwitchBtn.IsChecked false; ThemeManager.Instance.SetColor(ThemeColorPicker.SelectedColor); }引入地址

相关新闻

人教版七年级英语教学资源数字化处理与平台集成技术指南

人教版七年级英语教学资源数字化处理与平台集成技术指南

对于初中英语教学资源的技术性整理和数字化应用，教育工作者和技术支持团队需要一套清晰的方法来管理、验证和优化这些材料。虽然输入材料主要围绕人教版七年级英语上册的视频和PDF资源，但实际项目中更关键的是如何确保这些资源的完整性、可访问性以及在教…

2026/7/23 12:15:56 阅读更多 →
上虞实体门店数字化找谁？探访数享智创完整业务

上虞实体门店数字化找谁？探访数享智创完整业务

当下上虞各大商圈、乡镇实体门店普遍遭遇数字化经营难题：多平台门店信息杂乱，AI 检索难以抓取品牌信息；短视频、直播、宣传物料制作消耗大量人力；线上多渠道流量割裂，缺少稳定私域承接载体。不少本地经营者都在寻找适配…

2026/7/23 12:15:56 阅读更多 →
科研自动化工具解析：EvoScientist与Auto-claude应用实践

科研自动化工具解析：EvoScientist与Auto-claude应用实践

1. 自动化科研项目概述最近两年，科研自动化工具正在经历爆发式增长。作为一名长期关注科研工具发展的从业者，我观察到2023年至今涌现的自动化科研项目数量已经超过了过去五年的总和。这些工具正在从根本上改变科研工作者的日常研究模式——从文献检索、实…

2026/7/23 12:15:55 阅读更多 →

最新新闻

9 大工具、双端交互、Skills 扩展：用 Java 打造的 AI Coding Agent 长什么样？

9 大工具、双端交互、Skills 扩展：用 Java 打造的 AI Coding Agent 长什么样？

AgentScope Java 2.0 | Spring Boot 4.1 | HarnessAgent | ReAct 模式 | Web CLI 双端 | Skills 可扩展 你是否想过自己拥有一个 AI 编程助手——不是调用别人的 API，而是完全自主可控、可扩展、能读写代码、能执行命令、能联网搜索的 Coding Agent？ 市…

2026/7/23 12:35:07 阅读更多 →
深入解析MSPM0 TIMB基础定时器：从原理到PWM生成的实战指南

深入解析MSPM0 TIMB基础定时器：从原理到PWM生成的实战指南

1. TIMB基础定时器：嵌入式系统的时间脉搏在嵌入式系统的世界里，时间就是一切。无论是让一个LED灯以精确的1Hz频率闪烁，还是测量一个按键按下的时长，亦或是生成一个控制电机的PWM信号，其背后都离不开一个核心组件——定…

2026/7/23 12:35:07 阅读更多 →
wujie的fiber属性很关键

wujie的fiber属性很关键

无界的很多疑难杂症和fiber有关，有时候高德地图无法渲染就和fiber设置为false有关；1.官方文档解析如下：js 的执行模式，由于子应用的执行会阻塞主应用的渲染线程，当设置为true时js采取类似react fiber的模式方式间断执行…

2026/7/23 12:35:07 阅读更多 →
多模态交互全解析，深度拆解Gemini 2.0最新API调用链与避坑清单

多模态交互全解析，深度拆解Gemini 2.0最新API调用链与避坑清单

更多请点击： https://codechina.net 第一章：多模态交互全解析与Gemini 2.0演进全景 多模态交互正从“感知融合”迈向“语义协同”新范式——文本、图像、音频、视频乃至传感器信号不再简单拼接，而是在统一表征空间中实现跨模态对齐、推理与生…

2026/7/23 12:35:07 阅读更多 →
深度解析：车联网自动驾驶路测中 TDengine 查询优化实践的写入优化

深度解析：车联网自动驾驶路测中 TDengine 查询优化实践的写入优化

感知算法迭代依赖车辆状态与传感器时序数据的精确对齐。当算法在某一路段出现误检或漏检时，研发人员需要快速调取该时段所有传感器数据和控制日志，进行问题定位和模型优化。从数据特征看，车联网 领域 自动驾驶路测 业务的核心诉求是高吞吐写入…

2026/7/23 12:35:06 阅读更多 →
AE模板制作复古VHS监控画面效果全解析

AE模板制作复古VHS监控画面效果全解析

1. 项目概述：打造复古VHS监控画面效果 这个AE模板项目能帮你快速实现90年代老式监控摄像头的视觉效果。作为一名有十年影视后期经验的从业者，我经常遇到需要制作复古监控画面的需求——无论是悬疑短片的闪回镜头，还是音乐MV的特殊转场&#x…

2026/7/23 12:34:06 阅读更多 →

日新闻

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击： https://intelliparadigm.com 第一章：从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表） 当AI副业主理人不再仅满足于单次服务交付，而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25 阅读更多 →
AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

更多请点击： https://codechina.net 第一章：AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析 在对2,346篇跨行业AI生成文案的A/B测试数据进行聚类分析后，我们发现&#xff1…

2026/7/23 0:01:26 阅读更多 →
Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具 【免费下载链接】chitchatter Secure peer-to-peer chat that is serverless, decentralized, and ephemeral 项目地址: https://gitcode.com/gh_mirrors/ch/chitchatter Chitchatter是一款革命性的安…

2026/7/23 0:01:26 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/22 8:58:19 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 19:43:43 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/22 12:54:44 阅读更多 →

月新闻