XAML 101: Image and ImageBrush


Source code for this sample on GitHub: https://github.com/billreiss/xamlnative/tree/master/Xaml101/008_Images

Images are very important to many Windows apps. It could be a user’s avatar, a photo app, or just a way to add some visual appeal, or a hundred other things. There are several ways to add an image, we’ll look at two of them here.

First let’s look at the Image control. We need an image to display, and this can come from the internet, can be packaged with your app, or can come from some other source. First let’s look at an internet-based image. Let’s make the MainPage.xaml Grid look like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Image Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg"/>

This is a photo of my good friend and Microsoft Evangelist Joe Healy. Check out his blog at http://devfish.net. Let’s run the app like this and see how it looks:


Notice how the image fills the available space but is centered preserving the aspect ratio. This is controlled by the Stretch property, and defaults to Uniform. There are a few other options for this, we can change it to Fill:

<Image Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg" Stretch="Fill"/>


Now it fills available space without preserving the aspect ratio. There is also UniformToFill which fills the entire space and preserves aspect ratio but any extra is cut off. There is also “None”, which centers the image in the available space but doesn’t scale it at all.

So far the image takes up all the available space, but what if we want to show it as an avatar next to a tweet or something similar. We would then want to specify its size and have it fit that size.

For this let’s change the alignment of the Image to Left and Top, and set the width and height explicitly:

<Image Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70" Source="http://xamlnative.com/wp-content/uploads/2015/09/healy.jpg" Stretch="UniformToFill"/>

Now we get something like this:


Thus far we’ve been accessing an internet resource for the image, but let’s say you want to make it available offline. One way to do this is to package it with your app. Let’s add a new folder to the project called Images, and then add an Existing Item to that new folder. In my case that is a local copy of healy.jpg.


Then in the Image control definition, I can change the Source property to not use a url, and instead use a relative path:

<Image Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70" Source="Images/healy.jpg" Stretch="UniformToFill"/>

Run the app again and you should see the same result as before.

This looks like an avatar you would see in an app, but Microsoft has decided in their design language that people should be represented as circles. When we want an Image that’s not rectangular, we can use an ImageBrush. Let’s also introduce another control, the Ellipse.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Ellipse Margin="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="70" Height="70">
            <ImageBrush ImageSource="Images/healy.jpg" />

So we have an ellipse the same size as the previous Image, and with the same properties for alignment and margin. The Ellipse has a Fill property which is similar to the Grid’s Background property. Here we specify an ImageBrush with an ImageSource where the ImageSource has the same value of our earlier Image control’s Source property. The ImageBrush also has the same Fill property options as the Image control. Here is the result:


That’s enough of Image and ImageBrush for now, we will see these again in later posts.