CODEWITHSUNDEEP
c#xamlwindows-phone-8
asitis
asitis

Reputation: 3031

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 .

enter image description here

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

Upvotes: 3

Views: 3330

Answers (3)

Igor Kulman
Igor Kulman

Reputation: 16361

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.

Upvotes: 8

user1593950
user1593950

Reputation:

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.

Upvotes: 0

Depechie
Depechie

Reputation: 6142

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

Upvotes: 2

Related Questions