Create Xaml Circle Image

Question

On a Windows 8 phone, I want to put an image in a circle. Is there a container like a grid that has a circular shape? I know there is an ellipse bit, this is not a container

Answer 1

This is how I do it.

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

As a best practice, consider setting DecodePixelWidth and DecodePixelHeight the same size as your ellipse.

Answer 2

Another answer is mleroy (because if I remember that the correct WP is based on silverlight, and I often encounter a lack of brush to do such things.) You can do this using the Clip property.

For instance:

 <Image Source="blah\yourpicture.jpg" Width="100" Height="100"> <Image.Clip> <EllipseGeometry RadiusX="100" RadiusY="100" Center="100,100"/> </Image.Clip> </Image> 

Hope this helps, greetings

Edit add-on: you can also snap your X / Y radius to the width / height of the image for more flexibility on images with dynamic size.