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

But am getting an Control with .

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

回答1:

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>

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

回答2:

Don't know it this could help? But for image manipulations I always us the Writeablebitmapex library! And a good example on masking images can be found here...

Hope it helps

回答3:

Not sure about your use of CornerRadius="{Binding CornerRadius,Mode=TwoWay}" but I would be interested in seeing your implementation, after checking out Stecya's post here should it prove to be what you are looking for.

来源：https://stackoverflow.com/questions/14598375/how-to-mask-a-square-image-into-an-image-with-round-corners