The Image control can be used to display images of the following file formats:
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>
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.
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; }