Place a BitmapIcon in an Ellipse Element in UWP app

Question

In my UWP app, I wish to place a Bitmap Icon inside an Ellipse element. Is there any way to achieve this using the Fill property of the Ellipse, or any other way which allows me to achieve this?

I wish to use Bitmap Icon only because I need to change the colour of the icon using the Foreground property. Is there any way I can create an ImageBrush using a BitmapIcon because this would allow me to fill the Ellipse with an ImageBrush and would help me achieve the UI descibed.

Answer 1

Ellipse is a Shape object, hence cannot have content or children. But if you want to place your BitmapIcon inside an elliptic Control, then I think you should use the Border Control.

The Border control has CornerRadius property. Using that, you can turn it's shape into an elliptic one, or even a circle :

The output above was achieved with this code:

<Border
    Width="200"
    Height="200"
    CornerRadius="100"
    BorderBrush="White"
    BorderThickness="1">

    <BitmapIcon 
        UriSource="ms-appx:///Assets/StoreLogo.png"
        Foreground="DodgerBlue"/>

</Border>

Does that satisfy your need?