WPF 中使用附加属性，将任意 UI 元素或控件裁剪成圆形（椭圆）

不知从什么时候开始，头像流行使用圆形了，于是各个平台开始追逐显示圆形裁剪图像的技术。WPF 作为一个优秀的 UI 框架，当然有其内建的机制支持这种圆形裁剪。

不过，内建的机制仅支持画刷，而如果被裁剪的元素支持交互，或者拥有普通画刷无法达到的显示效果，那么就需要本文介绍的更加通用的解决方法了。

---

UWP 的圆形裁剪请左转参考：UWP 将图片裁剪成圆形（椭圆）。

WPF 的 UIElement 提供了 Clip 依赖项属性，可以使用一个 Geometry 来裁剪任意的 UIElement。由于 Geometry 几乎可以表示任意形状，这意味着我们可以才建成任意想要的样子。

于是，我们可以利用这一点，使用 EllipseGeometry 将任意 UIElement 裁剪成圆形或者椭圆形。比如，写成下面这样：

<Grid>
    <Grid.Clip>
        <EllipseGeometry Center="120 180" RadiusX="120" RadiusY="180" />
    </Grid.Clip>
    <Image Source="demo.jpg" Stretch="Fill" />
    <TextBlock Text="https://walterlv.github.io" Foreground="White" Margin="171,172,51,21"/>
</Grid>

最终可以出现如下的效果。