UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载圆形布局CirclePanel是 HandyControl 提供的一种自定义Panel它会把所有子元素等间距地排列在一个圆周上同时让每个子元素沿圆周切线方向旋转形成放射状或车轮状的功能菜单。本指南以 HandyControl 官方文档为骨架结合 CirclePanel.cs 源码与 Demo 工程完整讲解其三个核心属性、底层布局算法以及如何用 8 个按钮快速搭建一个可用的圆形功能菜单。读完本文你将能独立配置圆形布局的直径、角度偏移与元素朝向并复现官方 Demo 的完整样式。圆形布局的适用场景圆形布局常用作方向按钮、功能按钮的容器原文定义。例如游戏方向摇杆、导航返回/前进键、环形快捷工具栏等。与传统的StackPanel/WrapPanel线性排列不同CirclePanel 将元素均匀分布在圆周上视觉上更具方向感和对称性尤其适合围绕中心点操作的交互界面。public class CirclePanel : Panel在 WPF 侧CirclePanel直接继承自System.Windows.Controls.Panel见 CirclePanel.cs这意味着它完全符合 WPF 的布局系统契约通过重写MeasureOverride和ArrangeOverride两个方法完成对子元素的测量与排布。属性详解官方文档给出了三个核心属性下表为完整说明默认值取自源码注册信息属性用途默认值说明Diameter直径170.0控制圆周的大小子元素圆心排列在直径为Diameter的圆上KeepVertical元素是否保持垂直false为false时每个元素沿圆周切线旋转为true时元素始终保持正立OffsetAngle整体的角度偏移0单位为角度°将整个圆周上的元素整体旋转该角度三个属性都是依赖属性DependencyProperty且均以FrameworkPropertyMetadataOptions.AffectsMeasure注册CirclePanel.cs意味着只要任一属性发生变化面板就会重新测量并排列子元素布局会自动刷新。Diameter决定圆周大小Diameter同时决定两件事面板自身的测量尺寸以及元素分布的圆周半径。从源码可见测量阶段返回值是new Size(diameter, diameter)CirclePanel.cs即面板的期望尺寸等于以Diameter为边长的正方形排列阶段radius Diameter / 2CirclePanel.cs子元素中心落在半径为直径一半的圆上。直径必须为正值否则布局结果没有实际意义。KeepVertical元素朝向当KeepVertical false默认时每个子元素会绕自身中心旋转到与圆周切线方向一致的角度——这正是圆形方向按钮效果的关键8 个箭头按钮会像表盘刻度一样各自指向不同的方向。当KeepVertical true时所有子元素保持竖直正立仅圆心位置绕圆周分布适合不希望内容旋转的图标菜单。源码中的旋转逻辑var transform new RotateTransform { CenterX centerX, // 子元素自身宽度的一半 CenterY centerY, // 子元素自身高度的一半 Angle keepVertical ? 0 : angle }; element.RenderTransform transform;CirclePanel.cs旋转中心取子元素自身尺寸的中点(DesiredSize.Width / 2, DesiredSize.Height / 2)这样旋转时元素以自身中心为轴不会产生位移错位。OffsetAngle整体角度偏移OffsetAngle以度为单位作用于每个元素的最终角度angle perDeg * i offsetAngle。默认起点在 0°即第一个元素位于圆的正右侧角度 0 对应 x 轴正方向。如需让第一个元素位于正上方或正下方可分别设置OffsetAngle -90或90便于对齐界面上的固定参照物。底层布局算法等分圆周原理理解 CirclePanel 的排列方式对精确掌控布局至关重要。ArrangeOverride的核心逻辑可以归纳为三步CirclePanel.cs过滤不可见元素只对Visibility ! Collapsed的UIElement参与布局隐藏元素不占位。均分角度perDeg 360.0 / 可见子元素数量每个元素分配相同的圆心角。计算位置与旋转对第i个元素其中心角度为perDeg * i offsetAngle换算弧度后通过三角函数求出圆周坐标var r Math.PI * angle / 180.0; // 角度转弧度 var x radius * Math.Cos(r); var y radius * Math.Sin(r); var rectX x finalSize.Width / 2 - centerX; var rectY y finalSize.Height / 2 - centerY; element.Arrange(new Rect(rectX, rectY, element.DesiredSize.Width, element.DesiredSize.Height));CirclePanel.cs位置以面板中心为原点x、y是相对于圆心的偏移量再减去子元素自身尺寸的一半使子元素中心恰好落在圆周上。由这段源码可以推断出几个实用结论子元素数量动态变化时布局自动重新均分从 4 个按钮增删到 8 个间距会自动从 90° 变为 45°无需手动计算。元素可以是任意大小的面板只保证中心在圆周上元素自身的尺寸由测量阶段决定元素间可能互相重叠例如元素过大时需要自行控制尺寸。默认起点在右侧3 点钟方向且角度随索引顺时针按数学坐标系递增。实战案例8 按钮圆形方向菜单官方文档附带一个完整的 XAML 案例用 8 个按钮等距排成圆形每个按钮是带方向箭头的水滴形造型鼠标悬停/按下/禁用时透明度变化。这个案例在 Demo 工程中可直接找到完整源码CirclePanelDemo.xaml 和对应的按钮样式 Style.xaml。第一步定义按钮样式按钮样式基于 HandyControl 内置的ButtonCustom关闭布局舍入并固定尺寸77 × 36.06模板内用两个Path叠加出箭头图形Style x:KeyCirclePanelButton BasedOn{StaticResource ButtonCustom} TargetTypeButton Setter PropertyUseLayoutRounding ValueFalse/ Setter PropertyHeight Value77/ Setter PropertyWidth Value36.06/ Setter PropertyTemplate Setter.Value ControlTemplate TargetTypeButton hc:SimplePanel Path Data{StaticResource CirclePanelDemoGeometry} Fill{DynamicResource PrimaryBrush} Height77 Width36.06/ Path Data{StaticResource CirclePanelRightGeometry} StretchUniform Margin12 FillWhite/ /hc:SimplePanel ControlTemplate.Triggers Trigger PropertyIsMouseOver ValueTrue Setter PropertyOpacity Value.9/ /Trigger Trigger PropertyIsPressed ValueTrue Setter PropertyOpacity Value.6/ /Trigger Trigger PropertyIsEnabled ValueFalse Setter PropertyOpacity Value0.4/ /Trigger /ControlTemplate.Triggers /ControlTemplate /Setter.Value /Setter /Style模板中引用的两个几何图形资源定义在 Geometries.xamlCirclePanelDemoGeometry是一个水滴/箭头形状的 Path 数据填充PrimaryBrush主色CirclePanelRightGeometry是一个向右的箭头白色填充两者叠加即构成指向圆周外缘的方向键。需要注意UseLayoutRounding必须设为False旋转后的元素若开启布局舍入会出现锯齿或位置偏移。第二步放入 CirclePanel将 8 个按钮放进CirclePanel并设置直径 170hc:CirclePanel Margin64 Diameter170 Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ Button Style{StaticResource CirclePanelButton}/ /hc:CirclePanel8 个按钮按每 45°360 / 8均匀分布在直径为 170 的圆周上。默认KeepVertical false因此每个按钮会自动旋转使其箭头指向所在位置的圆周切线方向——这正是圆形方向菜单的核心效果。Margin64为面板留出四周空间避免按钮贴边。在官方 Demo 中这段 XAML 还包裹了一层 hc:TransitioningContentControl用于页面切换时的过渡动画与圆形布局本身无关可按需取舍。第三步可选调整朝向与起点若希望按钮始终竖直例如放置图标而非方向箭头将KeepVertical设为True若希望第一个按钮从正上方开始追加OffsetAngle-90hc:CirclePanel Diameter170 KeepVerticalTrue OffsetAngle-90 !-- 子元素 -- /hc:CirclePanelAvalonia 版本对照HandyControl 同时维护了 Avalonia 实现位于 src/Avalonia/HandyControl_Avalonia/Controls/Panel/CirclePanel.cs。两者 API 完全一致Diameter、KeepVertical、OffsetAngle仅存在平台差异WPF 使用DependencyPropertyAvalonia 使用StyledProperty默认值分别为170.0和0见 CirclePanel.cs。测量/排列算法相同Avalonia 侧通过AffectsMeasureCirclePanel(...)声明布局影响并额外设置了RenderTransformOriginCirclePanel.cs。Demo 侧的按钮样式从 WPF 的Style换成了 Avalonia 的ControlTheme且把IsMouseOver/IsPressed/IsDisabled触发器改写为^:pointerover等选择器见 CirclePanelDemo.axaml。因此本文的用法说明同样适用于 Avalonia 工程只需注意 XAML 命名空间与样式语法差异。总结与使用建议CirclePanel 适合做方向按钮、功能按钮的环形容器三个属性即可完成绝大多数布局需求Diameter控制大小、KeepVertical控制元素朝向、OffsetAngle控制起始角度。元素间距由子元素数量自动均分360° / N增删元素无需手动重算默认第一个元素从右侧 0° 起排。子元素最好使用固定尺寸如 Demo 中的77 × 36.06配合UseLayoutRoundingFalse避免旋转后出现渲染瑕疵。按钮样式可直接复用 Demo 工程中的 CirclePanelButton 及其几何资源 Geometries.xaml也可以自定义Template替换为任意图标核心布局逻辑不受影响。赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐LifeOS SystemsThinking 技能深度解读十大系统基模Systems Archetypes反馈回路结构与干预杠杆完全指南LifeOS SystemsThinking 技能深度解读十大系统基模Systems Archetypes反馈回路结构与干预杠杆完全指南 本指南以 LifUI组件桌面应用HandyControl的布局与面板控件HandyControl的布局与面板控件 HandyControl 提供了多种强大的布局控件如 FlexPanel、RelativePanel、HoneycoUI组件桌面应用GoJS布局算法终极指南树形、力导向、圆形布局深度解析GoJS布局算法终极指南树形、力导向、圆形布局深度解析 GoJS是一个功能强大的JavaScript图表库专为交互式流程图、组织结构图、设计工具、规划工具和前端数据可视化UI组件图形学上一篇Flet 模态路由Modal Routes实战基于 Router 与 fullscreen_dialog 构建可深链的覆盖层视图下一篇语音接口革命SenseVoice如何用标准化API统一多语言语音处理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考