WPF中Canvas无CornerRadius属性时如何实现圆角边框效果

Canvas 本身没有内置 CornerRadius 属性，实现圆角边框效果可以用以下两种方案：

方案1：外层嵌套Border（推荐） #

这是实现成本最低、适配性最好的方案，WPF原生的Border控件原生支持圆角、边框、背景设置，只需要把Canvas作为Border的子元素，把背景、圆角、边框参数都配置在Border上即可。
注意不要给内层Canvas设置非透明的Background，否则Canvas的矩形背景会遮挡Border的圆角效果，如果需要Canvas响应命中测试，将其Background设为Transparent即可。

对应实现代码：

<Border Background="White" 
        Width="250" 
        Height="200"
        CornerRadius="15" <!-- 修改为你需要的圆角数值 -->
        BorderBrush="#DCDCDC" <!-- 不需要边框可以删除BorderBrush、BorderThickness两行配置 -->
        BorderThickness="1">
    <Canvas Background="Transparent">
        <TextBlock Text="LOW" Foreground="Black" FontSize="30" TextAlignment="Center" Margin="10"/>
        <TextBlock FontSize="40" Padding="0, 0, 300, 0" Margin="74" Text="11" Foreground="Black"/>
    </Canvas>
</Border>

方案2：通过Clip属性裁剪Canvas #

如果不想新增额外的容器层级，可以直接给Canvas设置Clip裁剪区域，用圆角矩形几何裁掉Canvas超出圆角范围的部分，如果需要描边，在Canvas内部放一个同尺寸的透明填充圆角矩形即可。
如果Canvas尺寸是固定的，这个方案也非常轻量；如果Canvas尺寸会动态变化，需要额外写逻辑同步修改裁剪几何的参数，自适应成本比方案1高。

对应实现代码：

<Canvas Background="White" Width="250" Height="200">
    <!-- 圆角裁剪区域，尺寸和Canvas保持一致 -->
    <Canvas.Clip>
        <RectangleGeometry Rect="0,0,250,200" RadiusX="15" RadiusY="15"/>
    </Canvas.Clip>

    <!-- 不需要边框可以删掉这个Rectangle -->
    <Rectangle Width="250" Height="200" RadiusX="15" RadiusY="15" 
               Stroke="#DCDCDC" StrokeThickness="1" Fill="Transparent"/>

    <TextBlock Text="LOW" Foreground="Black" FontSize="30" TextAlignment="Center" Margin="10"/>
    <TextBlock FontSize="40" Padding="0, 0, 300, 0" Margin="74" Text="11" Foreground="Black"/>
</Canvas>

内容的提问来源于stack exchange，提问作者adaEstms