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

Question

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

我尝试过，这确实给了我个人的角落尺寸。但是，它在外部边框下添加了另一层边框 - 我宁愿它与外层重叠/合并，以便我保持其厚度大小。然而，尝试控制并不能让我自由地修改各个角落。<Image.Clip><Image>

代码结果 A

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

<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>

代码结果 B

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

<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>

我正在寻找的功能，但可以自由地手动选择要剪辑的角，同时也不会添加额外的角像素，因为我试图实现以下UI：<Image.Clip>

Answer 1

&nbsp;<Grid&nbsp; &nbsp; &nbsp; &nbsp; Width="400"&nbsp; &nbsp; &nbsp; &nbsp; Height="600"&nbsp; &nbsp; &nbsp; &nbsp; Margin="0,0,0,0"&nbsp; &nbsp; &nbsp; &nbsp; HorizontalAlignment="Left"&nbsp; &nbsp; &nbsp; &nbsp; VerticalAlignment="Top">&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; Add rounded corners here&nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <Border&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Name="Mask"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Grid.RowSpan="2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Margin="-5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Background="Black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CornerRadius="18 0 0 18" />&nbsp; &nbsp; &nbsp; &nbsp; <!--&nbsp; Image&nbsp; -->&nbsp; &nbsp; &nbsp; &nbsp; <Grid Grid.RowSpan="2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.OpacityMask>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <VisualBrush Visual="{Binding ElementName=Mask}" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.OpacityMask>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Margin="-5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Source="{StaticResource UsmanImageSource}"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Stretch="UniformToFill" />&nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; </Grid>