MAUI 中没有直接叫“剪切蒙版”(Clipping Mask)的 UI 概念,但可以通过 Clip 属性实现等效效果——即用一个几何形状(如圆、矩形、路径)来裁剪子视图的显示区域。
Clip 属性控制可视范围
所有继承自
VisualElement的控件(比如
Image、
StackLayout、
Border)都支持 Clip 属性。它接收一个
Geometry对象,只有落在该几何区域内的内容才会被绘制,外部自动透明。 常见 Geometry 类型:RectangleGeometry、EllipseGeometry、PathGeometry Clip 不影响布局尺寸或触摸热区,只影响渲染可见部分 设置 Clip 后,子元素超出区域的部分不可见,也不会响应点击(除非显式设置
InputTransparent="False"并确保父容器未截断事件)
常用剪裁写法示例
在 XAML 中直接定义:
代码中动态设置圆形裁剪:
var circle = new EllipseGeometry { Center = new Point(100, 100), RadiusX = 100, RadiusY = 100 };
myImage.Clip = circle;
自定义路径裁剪(高级用法)
用
PathGeometry可实现不规则剪裁,比如花瓣、星形、文字轮廓等: 先用
PathFigure描述轮廓线(MoveTo + LineTo/BezierTo) 组合进
PathGeometry,赋值给 Clip 注意:坐标系以控件左上为 (0,0),需按实际尺寸计算点位
注意事项和避坑点
Clip 在某些平台(尤其是 Android 旧版本或低端设备)可能触发性能下降,尤其用于滚动列表中的频繁重绘项。
避免对动画中持续缩放/旋转的元素高频修改 Clip 不要把 Clip 和CornerRadius混用——后者是 Border 的圆角,不等价于裁剪 如果需要“带羽化边缘”的软裁剪,MAUI 原生不支持;得用 ShaderEffect 或平台原生渲染器扩展
基本上就这些。Clip 是轻量、声明式、跨平台的裁剪方案,用对了很干净。
