如何在图像控件上添加单独的圆角

Question

关于如何单独设置图像控件（或 Window 控件内的任何控件）的角，我遇到了问题。使用 <Border> 标签在外边框内添加另一个像素或边框，这与我想要的相反 - 外边框和内边框应该在重叠的地方合并。

我试过哪个确实能给我单独的角尺寸。但是，它在外边框下方添加了另一层边框 - 我宁愿它 overlaps/merges 与外层一起使用，以便我保持其厚度大小。然而，为 <Image> 控件尝试 <Image.Clip> 并不能给我修改单个角的自由。

下面的代码在 <Image> 控件下使用 <Image.Clip> 产生上述结果：

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Image Height="200" Width="400" Source="D:\_\Downloads\shutterstock_389224732-1200x627.jpg" RenderTransformOrigin="0.5,0.5" Canvas.Left="-100" Canvas.Top="100" Stretch="Fill">
            <Image.Clip>
                <RectangleGeometry Rect="0,0,400,200" RadiusX="10" RadiusY="10" />
            </Image.Clip>

            <Image.RenderTransform>
                <TransformGroup>
                    <RotateTransform Angle="90"/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
    </Canvas>
</Border>

下面的代码使用环绕控件（例如）产生上述结果：

<Border CornerRadius="10" BorderBrush="White" BorderThickness="1">
    <Canvas Background="Transparent">
        <!--Acrylic Background-->
        <Rectangle
            Fill="White" Opacity="0.4"
            Height="400" Width="600">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0,0,600,400" RadiusX="9" RadiusY="9" />
            </Rectangle.Clip>
        </Rectangle>

        <Border CornerRadius="9,0,0,9" BorderBrush="Red" BorderThickness="1">
            <Canvas Height="398" Width="198">

            </Canvas>
        </Border>
    </Canvas>
</Border>

注意下面来自代码 A 和 B 的缩放结果：

这表明 <Image.Clip> 自动将所有四个角（左上角、右上角、左下角、右下角）圆角化，而无需添加额外的边框像素。虽然使用 <Border> 我可以自由地手动选择圆角（左上角，左下角），但它会添加另一个边框像素（如您所见的白色和红色像素）。

我正在寻找 <Image.Clip> 的功能，但可以自由地手动 select 剪辑哪些角，同时也不会添加额外的角像素，因为我正在努力实现以下 [=52] =]:

所以从技术上讲，我试图只剪裁图像的左上角和左下角以匹配 window 左侧的角。

干杯！

Answer 1

 <Grid
        Width="400"
        Height="600"
        Margin="0,0,0,0"
        HorizontalAlignment="Left"
        VerticalAlignment="Top">

        <!--  Add rounded corners here  -->
        <Border
            Name="Mask"
            Grid.RowSpan="2"
            Margin="-5"
            Background="Black"
            CornerRadius="18 0 0 18" />

        <!--  Image  -->
        <Grid Grid.RowSpan="2">
            <Grid.OpacityMask>
                <VisualBrush Visual="{Binding ElementName=Mask}" />
            </Grid.OpacityMask>

            <Image
                Margin="-5"
                Source="{StaticResource UsmanImageSource}"
                Stretch="UniformToFill" />
        </Grid>

    </Grid>

如何在图像控件上添加单独的圆角

How to add individual rounded corners on an Image Control

c#

wpf

rounded-corners