#556 – 根据Border的圆角裁剪内容（Clipping to a Border Using an Opacity Mask）

最新推荐文章于 2023-02-28 22:02:44 发布

Milo米啊米啊米

最新推荐文章于 2023-02-28 22:02:44 发布

阅读量2.6k

点赞数 1

分类专栏： WPF 文章标签： WPF 裁剪边框 Clip OpacityMask

WPF 专栏收录该内容

191 篇文章

订阅专栏

本文介绍如何在WPF中利用Border元素的圆角特性，并通过透明蒙版或Clip属性来裁剪超出边界的图像内容，实现平滑的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你为一个Border 元素指定圆角的时候，Border 所包含的内容却无法自动的根据圆角进行裁剪。

<Border BorderBrush="Black" BorderThickness="3" Margin="10"
        Width="400" Height="267" CornerRadius="40" >
    <Image Source="Images\Rocks2Small.jpg"/>
</Border>

上面的例子中，如果你想根据Border来裁剪内容，你可以在为图片用另一个border指定一个透明蒙版。这会使Image 控件中所有在第二个border外面的部分的透明度都为0。

<Border BorderBrush="Black" BorderThickness="3" Margin="10" Width="400" Height="267"
    CornerRadius="40" >
    <Grid>
        <Border  Name="myBorder" CornerRadius="40" Background="White" Margin="1"/>
    <Image Source="Images\Rocks2Small.jpg" Margin="1">
        <Image.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=myBorder}"/>
        </Image.OpacityMask>
    </Image>
    </Grid>
</Border>

原文地址：https://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/

***********************************************译者注*******************************************

要达到上面的效果还可以使用Clip属性来进行裁剪。

所有的UIElement 类以及子类都有Clip 属性，它用来规定界面元素的边框外形的几何图形。假如上例中的Image 控件命名为myImage，可以使用下面的代码设置Clip 属性：

myImage.Clip = new RectangleGeometry(new Rect(0, 0, 400, 267), 40, 40);