CODEWITHSUNDEEP
xamlwindows-phone-8
atticus3000
atticus3000

Reputation: 409

How to make a squared image to a round image on Windows Phone

Is it possible to make a round image from a squared image on a Windows phone? I have a lot of images which should be displayed as a circle. But how can I do this?

Upvotes: 18

Views: 22509

Answers (3)

robwirving
robwirving

Reputation: 1798

In XAML you want to make the circle using an Ellipse control. Then give it an ImageBrush fill.

<Ellipse Height="100" Width="100">
    <Ellipse.Fill>
        <ImageBrush ImageSource="YourImage.png"/>
    </Ellipse.Fill>
</Ellipse>

Upvotes: 59

MatDev8
MatDev8

Reputation: 976

You can use Image.Clip but i prefer the @robwirving solution. But you need to choice now! Information here => http://msdn.microsoft.com/fr-fr/library/system.windows.uielement.clip(v=vs.110).aspx

Upvotes: 0

Swift Sharp
Swift Sharp

Reputation: 2623

My idea is very simple: 

<Image Source="ImagePath" Width="326" Height="188">
    <Image.Clip>
        <EllipseGeometry Center="170,90" RadiusX="90" RadiusY="90" />
    </Image.Clip>
</Image>

Or you can apply an OpacityMask to an Image to create a variety of opacity-related photo masking 

<Image Source="ImagePath" >
       <Image.OpacityMask>
              <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">                          
                            <GradientStop Color="#ffffffff" Offset="0.5" />
                            <GradientStop Color="#00ffffff" Offset="0.8" />
               </RadialGradientBrush>
       </Image.OpacityMask>
</Image>

Upvotes: 17

Related Questions