Create Circular Image Xaml

Question

In windows phone 8 I want to put an Image in a circle. Is there a container like grid which have a circular form? I know that there is ellipse bit it is not a container

Answer 1

Another option to mleroy's answer (since if I remember right WP is based on silverlight and I often run into a lack of brush availability to do stuff like that.) You could do this using the Clip property.

For example;

<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, cheers

Edit Addition: You could also bind your radius X/Y to the width/height of the image for more flexibility on dynamic sized images.

Answer 2

Here 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 to the same size as your ellipse.