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

Question

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?

Answer 1

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>

Answer 2

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>