带有圆角的 WPF 图像剪辑 - C#

在 WPF 中，可以使用 Clip 属性对元素进行剪辑，以显示出圆角矩形。以下是如何使用 WPF 剪辑元素并创建带有圆角的图像的示例代码。

步骤 1 - 建立 WPF 窗口

创建一个 WPF 窗口，用于显示图像和圆角矩形。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
        
</Window>

步骤 2 - 添加图像控件

在 WPF 窗口中添加一个 Image 控件，并设置其 Source 属性为图像的路径。

<Image Source="Image.png"
       Stretch="UniformToFill"
       HorizontalAlignment="Center"
       VerticalAlignment="Center"
       Width="300"
       Height="300" />

步骤 3 - 添加圆角矩形

添加一个 Rectangle 控件，并将其放置在图像控件上方。设置 Fill 属性为 Transparent，这将使圆角矩形透明。在 Rectangle 控件中，添加 CornerRadius 属性，并设置其值为所需的圆角半径。

<Grid>
    <Rectangle Fill="Transparent"
               StrokeThickness="2"
               Stroke="Red"
               Width="300"
               Height="300"
               CornerRadius="50"
               Margin="10" />
    
    <Image Source="Image.png"
           Stretch="UniformToFill"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           Width="300"
           Height="300" />
</Grid>

步骤 4 - 剪辑图像

将图像控件的 Clip 属性设置为圆角矩形，这将对图像进行剪辑，并使其显示为圆角矩形。

<Grid>
    <Image Source="Image.png"
           Stretch="UniformToFill"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           Width="300"
           Height="300"
           Clip="{Binding ElementName=rectangle}" />

    <Rectangle x:Name="rectangle"
               Fill="Transparent"
               StrokeThickness="2"
               Stroke="Red"
               Width="300"
               Height="300"
               CornerRadius="50"
               Margin="10" />
</Grid>

这就是使用 WPF 剪辑和圆角矩形的示例代码。