The Image control can be used to display images of the following file formats:

• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)
• Bitmap (BMP)
• Graphics Interchange Format (GIF)
• Tagged Image File Format (TIFF)
• JPEG XR
• Icons (ICO)

The Source property can be an HTTP or ms-appx-based URI to the image resource.

Example: The following code snippets point to the same image in the app's Assets folder:

<Image Source="Assets/Picture.jpg" />
 
<Image Source="/Assets/Picture.jpg" />
 
<Image Source="ms-appx:///Assets/Picture.jpg" />

Example: Set the Source of an image programmatically:

<Image x:Name="Image1" />

using Windows.UI.Xaml.Media.Imaging;
...
BitmapImage bitmap = new BitmapImage();
bitmap.UriSource = new Uri("ms-appx:///Assets/Logo.png");
Image1.Source = bitmap;

Example: Display an image located in the LocalFolder:

<Image x:Name="Image1" Loaded="Image1_Loaded" />

private async void Image1_Loaded(object sender, RoutedEventArgs e)
{
    StorageFolder localFolder = ApplicationData.Current.LocalFolder;
    StorageFile file = await localFolder.GetFileAsync("test.png");
 
    // Open a stream for the selected file.
    IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
 
    // Set the image source.
    BitmapImage bitmap = new BitmapImage();
    bitmap.SetSource(stream);
    Image1.Source = bitmap;
}

Example: Set the image source to a stream obtained from an array of bytes:

<Image x:Name="Image1" Loaded="Image1_Loaded" />

using System;
...
private async void Image1_Loaded(object sender, RoutedEventArgs e)
{
    var image = sender as Image;
 
    byte[] buffer = await GetImageData();
 
    BitmapImage bitmap = new BitmapImage();
    image.Source = bitmap;
    using (MemoryStream stream = new MemoryStream(buffer))
    {
        await bitmap.SetSourceAsync(stream.AsRandomAccessStream());
    }
}
 
// GetImageData returns an array of bytes that represents an image. This method is just for demonstration
// purposes. An array of bytes could be obtained from other sources such as a web service.
private async Task<byte[]> GetImageData()
{
    StorageFolder localFolder = ApplicationData.Current.LocalFolder;
    StorageFile file = await localFolder.GetFileAsync("test.png"); // may throw FileNotFoundException
 
    byte[] data;
 
    IBuffer buffer = await FileIO.ReadBufferAsync(file);
    using (DataReader reader = DataReader.FromBuffer(buffer))
    {
        data = new byte[buffer.Length];
        reader.ReadBytes(data);
    }
 
    return data;
}

Loading an image in the Loaded event handler may be useful when the image is the part of a DataTemplate:

<AutoSuggestBox QueryIcon="Find"
                QuerySubmitted="AutoSuggestBox_QuerySubmitted">
    <AutoSuggestBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Border Height="80" Width="100" Margin="4" 
                        BorderThickness="2" BorderBrush="Gray">
                    <Image Loaded="Image1_Loaded" />
                </Border>
                <TextBlock Text="{Binding ImageTitle}" VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </AutoSuggestBox.ItemTemplate>
</AutoSuggestBox>

• If you need to display a large bitmap in an Image control that is smaller than the bitmap's size, you should set the bitmap's DecodePixelWidth or DecodePixelHeight property to the ActualWidth or ActualHeight of your Image control. The values of these properties are passed directly to the format-specific codec.

• When you use a URI as an Image's Source, you are tapping into the Windows resource system. This means that Windows will search directories looking for the file based on the user's culture, contrast settings, and display DPI information. More info here.

Obtain a WriteableBitmap object from an image file:

StorageFolder localFolder = ApplicationData.Current.LocalFolder;
StorageFile file = await localFolder.GetFileAsync("test.png");
 
IRandomAccessStreamWithContentType stream = await file.OpenReadAsync();
var bitmap = new WriteableBitmap(1, 1);
bitmap.SetSource(stream);
bitmap.Invalidate();

Use an ImageBrush when you need an image rendered in a non-rectangular way, for example a circle. An ImageBrush can paint shapes, controls, text, etc.

• If you create an ImageBrush programmatically, set its ImageSource property to a BitmapImage.
• If your source is a stream, use the SetSourceAsync method to initialize the image.
• If your source is a URI, use the BitmapImage constructor that takes a URI.

Example: Draw an Ellipse with an ImageBrush:

<Ellipse Width="500" Height="300">
    <Ellipse.Fill>
        <ImageBrush Stretch="Fill"
                    ImageSource="http://www.wisenheimerbrainstorm.com/images/automata/instruction01.png" />
    </Ellipse.Fill>
</Ellipse>

Example: Set an ImageBrush programmatically:

<Ellipse Width="500" Height="300" Loaded="OnLoaded" />

using Windows.UI.Xaml.Shapes;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Media;
...
private void OnLoaded(object sender, RoutedEventArgs args)
{
    Ellipse ellipse = sender as Ellipse;
    BitmapImage img = new BitmapImage();
    img.UriSource = new Uri("http://www.wisenheimerbrainstorm.com/images/automata/instruction01.png");
    ImageBrush brush = new ImageBrush();
    brush.ImageSource = img; // set the ImageSource property to a BitmapImage object
    ellipse.Fill = brush;
}