拓冰网站定制 
UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载RectangleAttach 是 HandyControl 中专为 WPFRectangle图形元素设计的附加属性类核心解决给 Rectangle 设置圆角、甚至快速变成正圆形这一高频 UI 需求。本文以官方文档 rectangleAttach/index.md 为主线结合 RectangleAttach.cs 源码与配套转换器讲清属性用法、实现原理与样式化实践帮助你在不写一行 C# 代码的情况下完成矩形到圆角/圆形的转换。一、认识 RectangleAttachRectangle 专用附加属性在 HandyControl 的附加属性体系中命名约定是有明确分工的以Element结尾的类如BorderElement、IconElement可以为所有控件设置共有属性而以Attach结尾的类只能为一种控件设置相关属性见 attach/index.md。RectangleAttach正是后者——它的名字、命名空间HandyControl.Controls以及源码中针对Rectangle类型做类型判断的写法都说明它只服务于 WPF 的Rectangle形状元素。在 XAML 中通过hc:RectangleAttach.xxx前缀使用hc即clr-namespace:HandyControl.Controls的命名空间别名。属性一览文档中给出的属性表如下| 名称 | 用途 | |-|-| | CornerRadius | 设置 Rectangle 圆角值 |这里需要特别说明一个文档与源码的对应关系属性表以语义化的CornerRadius圆角值描述功能而实际实现的附加属性名为Circular布尔开关。从源码看RectangleAttach类中注册的唯一附加属性就是CircularProperty它通过动态计算并绑定Rectangle.RadiusX / RadiusY来达到设置圆角、乃至形成正圆的效果。换句话说hc:RectangleAttach.CircularTrue就是开启圆角圆形渲染的开关圆角的具体数值由内部根据 Rectangle 的实际宽高自动推导无需手工指定。二、使用案例一行 XAML 实现圆形 Rectangle文档给出的示例非常简洁仅需在Rectangle上挂载一个附加属性Rectangle FillRed Width100 Height60 hc:RectangleAttach.CircularTrue/这段代码的效果是一个宽 100、高 60 的红色矩形四个角会自动变为圆弧且由于宽高不同最终呈现出的是胶囊形两端半圆而非正圆——因为圆角半径被计算为宽高中较小值的一半详见下文原理部分。如果想让 Rectangle 变成正圆形只需保证宽高相等即可例如Rectangle FillOrangeRed Width100 Height100 hc:RectangleAttach.CircularTrue/当宽高相等100×100时圆角半径等于100 / 2 50矩形自然退化为正圆。需要说明的是Rectangle本身在 WPF 中就内置了RadiusX、RadiusY两个依赖属性用于控制圆角你完全可以手动赋值Rectangle FillRed Width100 Height60 RadiusX15 RadiusY15/RectangleAttach.Circular的价值在于它免去了手工维护圆角数值的麻烦让圆角始终与元素当前的实际尺寸保持联动即使运行时宽高发生变化圆角也会自动跟随缩放适合头像、指示点、胶囊按钮背景等需要始终保持圆形/胶囊的场景。三、原理剖析MultiBinding 转换器的动态圆角方案要真正用好这个属性有必要看懂它背后的实现。RectangleAttach的完整源码位于 Controls/Attach/RectangleAttach.cs核心逻辑如下注册附加依赖属性CircularProperty为bool类型默认值false使用ValueBoxes.FalseBox做值缓存并挂接属性变更回调OnCircularChanged。开启圆形时建立多值绑定当Circular被设为true回调会构造一个MultiBinding同时绑定 Rectangle 的ActualWidth与ActualHeight并通过RectangleCircularConverter把这两个值转换成一个圆角半径然后一次性赋给Rectangle.RadiusXProperty和Rectangle.RadiusYProperty。这解释了为什么圆角能跟随尺寸自动变化——它本质上是两条数据绑定在驱动。关闭圆形时清理绑定当Circular被设为false或取消回调会调用BindingOperations.ClearBinding依次清理ActualWidth、ActualHeight、RadiusX、RadiusY上的绑定恢复 Rectangle 的默认圆角行为。而半径的具体算法藏在配套转换器 Tools/Converter/RectangleCircularConverter.cs 中if (values.Length 2 values[0] is double width values[1] is double height) { if (width double.Epsilon || height double.Epsilon) { return .0; // 宽或高为 0未布局完成时返回 0 半径 } var min Math.Min(width, height); return min / 2; // 取宽高较小值的一半作为圆角半径 }即圆角半径 min(实际宽度, 实际高度) / 2。这个最小边的一半公式正是胶囊形/正圆形态的来源——ConvertBack方法被明确标记为NotSupportedException说明该绑定是单向的仅用于展示不允许反向写回。另外在 WPF 布局早期ActualWidth/ActualHeight可能尚未确定转换器对 0 值返回0.0半径避免出现非法圆角待布局完成后绑定值更新圆角会自动修正。四、样式化用法配合内置 Style 快速套用除了直接在 XAML 上写附加属性HandyControl 还在主题样式层提供了配套的 Style位于 Themes/Styles/Rectangle.xamlStyle x:KeyRectangleCircular TargetTypeRectangle Setter Propertyhc:RectangleAttach.Circular ValueTrue/ /Style使用时只需引用样式无需重复书写附加属性Rectangle Style{StaticResource RectangleCircular} FillDodgerBlue Width80 Height80/该样式文件还定义了另外两个与圆形相关的样式RectangleFocusVisualRectangle 焦点视觉样式包含-2边距、0.6透明度、SnapsToDevicePixels、动态资源SecondaryBorderBrush描边、虚线1 1等设置RectangleFocusVisualCircular在RectangleFocusVisual基础上叠加hc:RectangleAttach.CircularTrue用于需要圆形焦点框的场景。这两个焦点样式被广泛复用于 HandyControl 各控件的基础样式中例如 Button.xaml、Calendar.xaml、ToggleButtonBaseStyle.xaml、TagBaseStyle.xaml 等通过{StaticResource RectangleFocusVisualCircular}引用实现按钮、开关、标签等控件在键盘聚焦时的圆形虚线高亮。由此可见RectangleAttach不仅是给使用者提供的便捷属性也是 HandyControl 自身控件主题体系的基础设施。五、依赖的资源与注意事项转换器资源注册RectangleCircularConverter已在主题资源中注册为全局可用见 Themes/Basic/Converters.xaml第 25 行converter:RectangleCircularConverter x:KeyRectangleCircularConverter/这意味着任何引用 HandyControl 主题资源的窗口/页面都能直接使用该转换器例如自定义需要根据尺寸动态计算圆角的绑定场景。使用边界与注意事项综合文档与源码使用时有几点需要留意仅适用于 RectangleRectangleAttach的回调内部通过d is Rectangle做类型判断非Rectangle对象挂载该属性不会产生任何圆角效果。同类需求若目标是Border等控件应改用BorderElement.Circular/CornerRadius见 borderElement/index.md。Circular 是布尔开关文档属性表中的CornerRadius描述的是功能语义实际 API 形态是hc:RectangleAttach.Circular布尔值圆角半径由源码自动推导不支持手动指定具体半径值如需精确控制圆角数值请直接使用Rectangle原生的RadiusX/RadiusY属性。自动跟随尺寸圆角基于ActualWidth/ActualHeight的绑定计算元素尺寸变化时圆角自动更新无需额外处理。主题样式引用若项目未合并 HandyControl 完整主题Theme.xaml使用RectangleCircular等样式资源前需确保主题已被加载否则会出现资源解析错误。六、总结RectangleAttach用一个布尔附加属性 一个多值转换器 两条数据绑定的极简组合替开发者解决了 Rectangle 圆角/圆形化的动态计算问题hc:RectangleAttach.CircularTrue即开即用圆角半径恒等于宽高最小边的一半天然适配圆形头像、胶囊按钮、焦点指示等常见 UI 需求。无论是直接写在 XAML 上还是通过RectangleCircular、RectangleFocusVisualCircular样式批量套用它都能让代码保持简洁、效果保持稳定。相关资源索引官方文档doc/source/handycontrol/attach/rectangleAttach/index.md附加属性实现src/Shared/HandyControl_Shared/Controls/Attach/RectangleAttach.cs半径计算转换器src/Shared/HandyControl_Shared/Tools/Converter/RectangleCircularConverter.cs配套主题样式src/Shared/HandyControl_Shared/Themes/Styles/Rectangle.xaml转换器资源注册src/Shared/HandyControl_Shared/Themes/Basic/Converters.xaml附加属性体系说明doc/source/handycontrol/attach/index.md赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl BorderElement 附加属性完全指南圆角与圆形边框的灵活实现HandyControl BorderElement 附加属性完全指南圆角与圆形边框的灵活实现 HandyControl 提供的 BorderElementUI组件桌面应用HandyControl 附加属性体系完全指南Element 通用附加属性与 Attach 控件专用附加属性实战详解HandyControl 附加属性体系完全指南Element 通用附加属性与 Attach 控件专用附加属性实战详解 导读 HandyControl 作为一套UI组件桌面应用Facebook Fresco 图像处理圆角与圆形图片的实现详解Facebook Fresco 图像处理圆角与圆形图片的实现详解 概述 在现代移动应用开发中非矩形图像展示已成为UI设计的重要元素。Facebook Fre移动开发图像处理上一篇Proxmark3Iceman ForkNG 变长帧格式主机-设备通信协议的设计、API 与实现剖析下一篇Mermaid 在线编辑器使用指南写几行文本3 分钟生成专业图表创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HandyControl RectangleAttach 附加属性详解：让 Rectangle 一键实现圆角与正圆
UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载RectangleAttach 是 HandyControl 中专为 WPFRectangle图形元素设计的附加属性类核心解决给 Rectangle 设置圆角、甚至快速变成正圆形这一高频 UI 需求。本文以官方文档 rectangleAttach/index.md 为主线结合 RectangleAttach.cs 源码与配套转换器讲清属性用法、实现原理与样式化实践帮助你在不写一行 C# 代码的情况下完成矩形到圆角/圆形的转换。一、认识 RectangleAttachRectangle 专用附加属性在 HandyControl 的附加属性体系中命名约定是有明确分工的以Element结尾的类如BorderElement、IconElement可以为所有控件设置共有属性而以Attach结尾的类只能为一种控件设置相关属性见 attach/index.md。RectangleAttach正是后者——它的名字、命名空间HandyControl.Controls以及源码中针对Rectangle类型做类型判断的写法都说明它只服务于 WPF 的Rectangle形状元素。在 XAML 中通过hc:RectangleAttach.xxx前缀使用hc即clr-namespace:HandyControl.Controls的命名空间别名。属性一览文档中给出的属性表如下| 名称 | 用途 | |-|-| | CornerRadius | 设置 Rectangle 圆角值 |这里需要特别说明一个文档与源码的对应关系属性表以语义化的CornerRadius圆角值描述功能而实际实现的附加属性名为Circular布尔开关。从源码看RectangleAttach类中注册的唯一附加属性就是CircularProperty它通过动态计算并绑定Rectangle.RadiusX / RadiusY来达到设置圆角、乃至形成正圆的效果。换句话说hc:RectangleAttach.CircularTrue就是开启圆角圆形渲染的开关圆角的具体数值由内部根据 Rectangle 的实际宽高自动推导无需手工指定。二、使用案例一行 XAML 实现圆形 Rectangle文档给出的示例非常简洁仅需在Rectangle上挂载一个附加属性Rectangle FillRed Width100 Height60 hc:RectangleAttach.CircularTrue/这段代码的效果是一个宽 100、高 60 的红色矩形四个角会自动变为圆弧且由于宽高不同最终呈现出的是胶囊形两端半圆而非正圆——因为圆角半径被计算为宽高中较小值的一半详见下文原理部分。如果想让 Rectangle 变成正圆形只需保证宽高相等即可例如Rectangle FillOrangeRed Width100 Height100 hc:RectangleAttach.CircularTrue/当宽高相等100×100时圆角半径等于100 / 2 50矩形自然退化为正圆。需要说明的是Rectangle本身在 WPF 中就内置了RadiusX、RadiusY两个依赖属性用于控制圆角你完全可以手动赋值Rectangle FillRed Width100 Height60 RadiusX15 RadiusY15/RectangleAttach.Circular的价值在于它免去了手工维护圆角数值的麻烦让圆角始终与元素当前的实际尺寸保持联动即使运行时宽高发生变化圆角也会自动跟随缩放适合头像、指示点、胶囊按钮背景等需要始终保持圆形/胶囊的场景。三、原理剖析MultiBinding 转换器的动态圆角方案要真正用好这个属性有必要看懂它背后的实现。RectangleAttach的完整源码位于 Controls/Attach/RectangleAttach.cs核心逻辑如下注册附加依赖属性CircularProperty为bool类型默认值false使用ValueBoxes.FalseBox做值缓存并挂接属性变更回调OnCircularChanged。开启圆形时建立多值绑定当Circular被设为true回调会构造一个MultiBinding同时绑定 Rectangle 的ActualWidth与ActualHeight并通过RectangleCircularConverter把这两个值转换成一个圆角半径然后一次性赋给Rectangle.RadiusXProperty和Rectangle.RadiusYProperty。这解释了为什么圆角能跟随尺寸自动变化——它本质上是两条数据绑定在驱动。关闭圆形时清理绑定当Circular被设为false或取消回调会调用BindingOperations.ClearBinding依次清理ActualWidth、ActualHeight、RadiusX、RadiusY上的绑定恢复 Rectangle 的默认圆角行为。而半径的具体算法藏在配套转换器 Tools/Converter/RectangleCircularConverter.cs 中if (values.Length 2 values[0] is double width values[1] is double height) { if (width double.Epsilon || height double.Epsilon) { return .0; // 宽或高为 0未布局完成时返回 0 半径 } var min Math.Min(width, height); return min / 2; // 取宽高较小值的一半作为圆角半径 }即圆角半径 min(实际宽度, 实际高度) / 2。这个最小边的一半公式正是胶囊形/正圆形态的来源——ConvertBack方法被明确标记为NotSupportedException说明该绑定是单向的仅用于展示不允许反向写回。另外在 WPF 布局早期ActualWidth/ActualHeight可能尚未确定转换器对 0 值返回0.0半径避免出现非法圆角待布局完成后绑定值更新圆角会自动修正。四、样式化用法配合内置 Style 快速套用除了直接在 XAML 上写附加属性HandyControl 还在主题样式层提供了配套的 Style位于 Themes/Styles/Rectangle.xamlStyle x:KeyRectangleCircular TargetTypeRectangle Setter Propertyhc:RectangleAttach.Circular ValueTrue/ /Style使用时只需引用样式无需重复书写附加属性Rectangle Style{StaticResource RectangleCircular} FillDodgerBlue Width80 Height80/该样式文件还定义了另外两个与圆形相关的样式RectangleFocusVisualRectangle 焦点视觉样式包含-2边距、0.6透明度、SnapsToDevicePixels、动态资源SecondaryBorderBrush描边、虚线1 1等设置RectangleFocusVisualCircular在RectangleFocusVisual基础上叠加hc:RectangleAttach.CircularTrue用于需要圆形焦点框的场景。这两个焦点样式被广泛复用于 HandyControl 各控件的基础样式中例如 Button.xaml、Calendar.xaml、ToggleButtonBaseStyle.xaml、TagBaseStyle.xaml 等通过{StaticResource RectangleFocusVisualCircular}引用实现按钮、开关、标签等控件在键盘聚焦时的圆形虚线高亮。由此可见RectangleAttach不仅是给使用者提供的便捷属性也是 HandyControl 自身控件主题体系的基础设施。五、依赖的资源与注意事项转换器资源注册RectangleCircularConverter已在主题资源中注册为全局可用见 Themes/Basic/Converters.xaml第 25 行converter:RectangleCircularConverter x:KeyRectangleCircularConverter/这意味着任何引用 HandyControl 主题资源的窗口/页面都能直接使用该转换器例如自定义需要根据尺寸动态计算圆角的绑定场景。使用边界与注意事项综合文档与源码使用时有几点需要留意仅适用于 RectangleRectangleAttach的回调内部通过d is Rectangle做类型判断非Rectangle对象挂载该属性不会产生任何圆角效果。同类需求若目标是Border等控件应改用BorderElement.Circular/CornerRadius见 borderElement/index.md。Circular 是布尔开关文档属性表中的CornerRadius描述的是功能语义实际 API 形态是hc:RectangleAttach.Circular布尔值圆角半径由源码自动推导不支持手动指定具体半径值如需精确控制圆角数值请直接使用Rectangle原生的RadiusX/RadiusY属性。自动跟随尺寸圆角基于ActualWidth/ActualHeight的绑定计算元素尺寸变化时圆角自动更新无需额外处理。主题样式引用若项目未合并 HandyControl 完整主题Theme.xaml使用RectangleCircular等样式资源前需确保主题已被加载否则会出现资源解析错误。六、总结RectangleAttach用一个布尔附加属性 一个多值转换器 两条数据绑定的极简组合替开发者解决了 Rectangle 圆角/圆形化的动态计算问题hc:RectangleAttach.CircularTrue即开即用圆角半径恒等于宽高最小边的一半天然适配圆形头像、胶囊按钮、焦点指示等常见 UI 需求。无论是直接写在 XAML 上还是通过RectangleCircular、RectangleFocusVisualCircular样式批量套用它都能让代码保持简洁、效果保持稳定。相关资源索引官方文档doc/source/handycontrol/attach/rectangleAttach/index.md附加属性实现src/Shared/HandyControl_Shared/Controls/Attach/RectangleAttach.cs半径计算转换器src/Shared/HandyControl_Shared/Tools/Converter/RectangleCircularConverter.cs配套主题样式src/Shared/HandyControl_Shared/Themes/Styles/Rectangle.xaml转换器资源注册src/Shared/HandyControl_Shared/Themes/Basic/Converters.xaml附加属性体系说明doc/source/handycontrol/attach/index.md赞分享UI组件桌面应用【免费下载链接】HandyControlContains some simple and commonly used WPF controls项目地址https://gitcode.com/gh_mirrors/ha/HandyControl点击查看免费下载相关推荐HandyControl BorderElement 附加属性完全指南圆角与圆形边框的灵活实现HandyControl BorderElement 附加属性完全指南圆角与圆形边框的灵活实现 HandyControl 提供的 BorderElementUI组件桌面应用HandyControl 附加属性体系完全指南Element 通用附加属性与 Attach 控件专用附加属性实战详解HandyControl 附加属性体系完全指南Element 通用附加属性与 Attach 控件专用附加属性实战详解 导读 HandyControl 作为一套UI组件桌面应用Facebook Fresco 图像处理圆角与圆形图片的实现详解Facebook Fresco 图像处理圆角与圆形图片的实现详解 概述 在现代移动应用开发中非矩形图像展示已成为UI设计的重要元素。Facebook Fre移动开发图像处理上一篇Proxmark3Iceman ForkNG 变长帧格式主机-设备通信协议的设计、API 与实现剖析下一篇Mermaid 在线编辑器使用指南写几行文本3 分钟生成专业图表创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考