Load Image Dynamically From Application Uri in Windows Store Apps

This article describes a simple concept that I was looking for. You all know that in ASP.NET it is simple to load an image dynamically in code-behind from an application Uri. In the other words we can easily set the source of an image from the application folder dynamically.

But, in Windows Store Apps that is very common. I was looking for that and finally found a solution of how to load an image from an application URI in code-behind using C#.

Here is the solution.

Step 1

Create a Blank Windows Store Application using C#.

Step 2

Now, let's create XAML markup for designing the page.

<Page

    x:Class="LoadImageUsingPixelBuffer.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:LoadImageUsingPixelBuffer"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">

            <StackPanel>

                <Button x:Name="LoadImage" Content="Load Image" Click="LoadImage_Click_1" ></Button>
                <Image x:Name="LoadImageDynam" />
            </StackPanel>
        </Grid>
    </Grid>
</Page>

Here I define one button and an Image control in which I load the image dynamically.

Step 3

Now, suppose you have a folder named Image in the application folder that contains the images like that.



If you want to load an image in code-behind to the UI, you need to get the path of the application where the image resides.

Step 4

In this step I retrieve the path of the application where the image exists; see:
 

StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Image/ Tulips.jpg"));

In the preceding step I get the image file in the StorageFile.

Step 5

Now, we need to open the file into a stream, so that it can be given to the Image Control.

IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)

Step 6

Here, I use the BitmapImage class to create an image from that stream and set the source of the Image control.
 

BitmapImage image = new BitmapImage();

image.SetSource(fileStream);

LoadImageDynam.Source = image;

Complete Code.
 

using System;

using System.Collections.Generic;

using System.IO;

using Windows.Foundation;

using Windows.Storage;

using Windows.Storage.Streams;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Media.Imaging;

using Windows.UI.Xaml.Navigation;

 

namespace LoadImageUsingPixelBuffer

{ 

    public sealed partial class MainPage : Page

    {

        public MainPage()

        {

            this.InitializeComponent();

        }     

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {                              

        }
        private async void LoadImage_Click_1(object sender, RoutedEventArgs e)
        {
            StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Image/Tulips.jpg"));
            using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
            {
                BitmapImage image = new BitmapImage();
                image.SetSource(fileStream);
                Scenario4Image.Source = image;
            }   
        }
    }

}

Step 7

Now, run the application and click on the button to load the image dynamically. You will be displaying an image that resides in the application folder.