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

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

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