How to Make Circular Avatar in Windows 10 UWP

Once upon a time, all user's avatar used to be square. Since Apple's design, now a lot of apps and websites would use a circular avatar instead of a squre one.

This is how we used to make square avatar:

<Grid Width="200" Height="200">
    <Image Source="Assets/ndl.jpg" />
</Grid>

Starting from Windows 10, Microsoft became the biggist Apple fans, so they changed avatars to circular in Windows system. So how can we make one in XAML without acutally cropping the image? It's simple. First, use "ellipse" to draw a circle, make it's width equal to height, that makes a circle.

<Ellipse Height="200" Width="200">

Ellipse has many options on "Fill", such as solid color, gradient color, image, and web.

Here, we select ImageBrush.

<Ellipse Height="200" Width="200">
    <Ellipse.Fill>
        <ImageBrush ImageSource="Assets/ndl.jpg" />
    </Ellipse.Fill>
</Ellipse>

That's how it's done!

开发UWP的都是傻逼