如何添加上的图像控制个人圆角

Question

我在我如何能单独地设置图像控制（或者说是在窗口控制内部的任何控制）的角部的问题。使用<Border>标签添加外边框这是我想的正好相反内的另一个像素或边界 - 内，外边框应该合并哪里会重叠。

我已经试过这确实给我个人的角落的大小。然而，它的外边界下添加边界的另一个层 - 这我宁愿它重叠/与外层这样我保持其厚度尺寸汇合。尝试了<Image.Clip>控制<Image>然而，不给我自由，修改个别边角。

以下代码是产生上述结果<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>

以下代码是使用卷绕控制（例如），它产生上述结果：

<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>的功能，但可以自由手动选择，而我想实现下面的UI也没有增加角落的额外像素剪辑，角落：

因此从技术上讲，我试图裁剪图像的只有左上角和左下角以匹配窗口的左侧。

干杯!

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>