如何屏蔽一个正方形图像与圆角的图像？ [英] How to mask a square image into an image with round corners?

问题描述

因为我想实现的圆角走投无路面膜我图片控我设计了一个控制这样

As i want to implement a Rounded Cornered Mask to my Image control i Designed a control like this

    <Border x:Name="Border1"  CornerRadius="{Binding CornerRadius,Mode=TwoWay}"  >
            <Image  x:Name="ImageSource1" Background="Transparent" >
            </Image>
    </Border> 
<Border x:Name="MaskBorder1"  BorderBrush="White"  CornerRadius="{Binding CornerRadius,Mode=TwoWay}" BorderThickness="3" />

不过，我得到一个控制用。

任何人有一个想法，以填补角落与边框颜色

Anybody have an idea to fill up corners with the Border Color ?

推荐答案

只是裁剪图像，这里是一个片段我用

Just clip the Image, here is a snippet I use

 <Image                               
                            Width="96"
                            Height="96"
                            Stretch="UniformToFill"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top">
                            <Image.Clip>
                                <EllipseGeometry
                                    Center="48,48"
                                    RadiusX="48"
                                    RadiusY="48" />
                            </Image.Clip>
                        </Image>

要使它工作，你需要中心，半径X和半径Y设置为一半的图像大小。

To make it work, you need to set Center, RadiusX and RadiusY to half the image size.

这篇关于如何屏蔽一个正方形图像与圆角的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！