Loading Image From File Stream in Windows Store Apps

In this article we are going to learn how to display an image using a file stream in Windows Store Apps.

In this example I will display the image in the page using FileOpenPicker from the file stream. I will set the height and width of the image at run time depending on the user input.

Here I will convert the chosen file from the local PictureLibrary folder and open it using the IRandomAccessStream.

Here is the procedure to be followed.

Step 1

Create the UI design for MainPage.XAML.

<common:LayoutAwarePage

    x:Class="Images.Scenario2"

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

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

    xmlns:local="using:Images"

    xmlns:common="using:SDKTemplate.Common"

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

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

    mc:Ignorable="d">

 

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid x:Name="Input" Grid.Row="0">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>            <StackPanel>               

                <Grid Margin="0,50,0,0">

                    <Grid.RowDefinitions>

                        <RowDefinition />

                        <RowDefinition />

                        <RowDefinition />

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="160" />

                        <ColumnDefinition />

                    </Grid.ColumnDefinitions>

                    <TextBlock Style="{StaticResource BasicTextStyle}" Grid.Row="0" Grid.Column="0" Text="DecodePixelHeight:" />

                    <TextBox x:Name="decodePixelHeight" Grid.Row="0" Grid.Column="1" Width="100" Text="100" HorizontalAlignment="Left" />

                    <TextBlock Style="{StaticResource BasicTextStyle}" Grid.Row="1" Grid.Column="0" Text="DecodePixelWidth:" />

                    <TextBox x:Name="decodePixelWidth" Grid.Row="1" Grid.Column="1" Width="100" Text="100" HorizontalAlignment="Left" />                   

                    <Button x:Name="Button1" Content="Select image..." Margin="0,0,10,0" Grid.Row="2" Grid.Column="0" />

                </Grid>

            </StackPanel>

        </Grid>

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

            <Image x:Name="Image1" Stretch="None" />

        </Grid>       
           <
VisualStateManager.VisualStateGroups>

            <VisualStateGroup>

                <VisualState x:Name="FullScreenLandscape"/>

                <VisualState x:Name="Filled"/>

                <VisualState x:Name="FullScreenPortrait"/>

                <VisualState x:Name="Snapped">                   

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    </Grid>

</common:LayoutAwarePage>

In the above code I use two textboxes for user input to set the height and width image.

Step 2

Here is the code of the MainPage.XAML.cs file.

The code for picking a file from the PictureLibrary.
 

FileOpenPicker open = new FileOpenPicker();

open.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

open.ViewMode = PickerViewMode.Thumbnail;

open.FileTypeFilter.Clear();

open.FileTypeFilter.Add(".bmp");

open.FileTypeFilter.Add(".png");

open.FileTypeFilter.Add(".jpeg");

open.FileTypeFilter.Add(".jpg");

StorageFile file = await open.PickSingleFileAsync();

Open the file in IRandomAccessStream and create a Bitmap Image for that image.

IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) 
BitmapImage bitmapImage = new BitmapImage();       

Set the Pixelheight and PixelWidht of the Image.

bitmapImage.DecodePixelHeight = decodePixelHeight.Text;

bitmapImage.DecodePixelWidth = decodePixelWidth.Text;

Set the source of the Bitmap Image as the stream.
 

await bitmapImage.SetSourceAsync(fileStream);

Image1.Source = bitmapImage;


Here is the full code.
 

async void Button1_Click(object sender, RoutedEventArgs e)

{   

   FileOpenPicker open = new FileOpenPicker();

   open.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

   open.ViewMode = PickerViewMode.Thumbnail;

    // Filter to include a sample subset of file types

   open.FileTypeFilter.Clear();

   open.FileTypeFilter.Add(".bmp");

   open.FileTypeFilter.Add(".png");

   open.FileTypeFilter.Add(".jpeg");

   open.FileTypeFilter.Add(".jpg");
   
StorageFile file = await open.PickSingleFileAsync();
   
if (file != null)

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

      {

          BitmapImage bitmapImage = new BitmapImage();

          bitmapImage.DecodePixelHeight = decodePixelHeight.Text;

          bitmapImage.DecodePixelWidth = decodePixelWidth.Text;

          await bitmapImage.SetSourceAsync(fileStream);

          Image1.Source = bitmapImage;

      }

   }

}

Step 3

Now, run the application.

Set the height and width of the image and pick the file from the local system PictureLibrary.

File-open-picker-in-windows-store-apps.jpg

You will see that the image will be loaded with the specified height and width.

Output
Image-Control-In-Windows-Store-apps.jpg

Next Recommended Readings