File Access and Picker in Windows Store Apps

Introduction

Today we explain how to access or pick a local drive file in Windows Store apps. In this example we are using "FileOpenPicker" to pick file a from a local drive and after accessing the file bind a UI control with the file for displaying the information about the file.

Step 1

Open Visual Studio 2012 and start a new Windows Store apps project.

Step 2

Now go to Solution Explorer and double-click on "MainPage.xaml" to open it.

Step 3

In the "MainPage.xaml" page add the following code.

<Page

    x:Class="FileAccessAndPicker.MainPage"

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

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

    xmlns:local="using:FileAccessAndPicker"

    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}">

        <Button Content="GetPhotoButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="646,546,0,0" Click="Button_Click_1"/>

        <Image HorizontalAlignment="Left" Height="300" x:Name="Img"  VerticalAlignment="Top" Width="300" Margin="594,263,0,0"/>

        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="20" VerticalAlignment="Top" Margin="674,615,0,0"/>

        <TextBlock HorizontalAlignment="Left" FontSize="20" TextWrapping="Wrap" x:Name="FileName" VerticalAlignment="Top" Margin="950,256,0,0"/>

        <TextBlock HorizontalAlignment="Left" FontSize="20" TextWrapping="Wrap" x:Name="FilePath" VerticalAlignment="Top" Margin="974,421,0,0"/>

        <TextBlock HorizontalAlignment="Left" FontSize="20" TextWrapping="Wrap" x:Name="DateCreated" VerticalAlignment="Top" Margin="952,339,0,0"/>

    </Grid>

</Page>

Step 4

And for the click of "Button" write the following code:

private async void Button_Click_1(object sender, RoutedEventArgs e)

        {

            if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped ||

                 Windows.UI.ViewManagement.ApplicationView.TryUnsnap() == true)

            {

                Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();

                openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;

                openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;

 

                openPicker.FileTypeFilter.Clear();

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

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

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

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

 

                Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();

 

                if (file != null)

                {

                    Windows.Storage.Streams.IRandomAccessStream fileStream =

                        await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

                    Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =

                        new Windows.UI.Xaml.Media.Imaging.BitmapImage();

                    bitmapImage.SetSource(fileStream);

                    Img.Source = bitmapImage;

                    this.DataContext = file;

                }

            }

        }

Step 5

Now run the program; the selected image will be displayed.

Step 6

If you want to bind file information to the UI control then select the "FileName" Text Block and go to the properties window. In the properties window click on the text binding and select "Create new binding".

Step 7

The Data binding window will be opened. Type "Name" in the path and click on "OK". It will bind the file name with the selected UI control. Repeat this step for other controls. Use "Path" for the display file path and "DateCretated" for the display created date of the file.

Step 8

Now run you project. The result will show as in the following: