Step By Step Creation Of File Picker In Universal Windows App

Introduction to File Picker UI

A File Picker displays the information for orienting the users and to provide a consistent experience when users open or save files. That information includes -

• The current location
• The item/items that the user picked
• A tree of locations that the user can browse to. These locations include file system locations, such as - the Music or Downloads folder - as well as apps that implement the File Picker contract (such as - Camera, Photos, and Microsoft OneDrive).

Prerequisites

• Visual Studio 2015

Now, let's get started with the following steps -

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and click File -> New -> Project Option for New Universal App.



Step 2 - Giving the Project Name

Then, New Project window will open. There, select Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank App (Universal Windows).

Type the Project Name as FilePickerApp and click the OK button.



Step 3 - Setting the platform Versions

Here, we choose the Target Version and Minimum Version for our Universal Windows application. Click OK button,



Step 4 - Choose Designer Window



Now, go to the Solution Explorer and open the MainPage.xaml for design.

Step 5 - Designing the App

In the MainPage.xaml designing page, drag the Textblock button control from the tool box. Then, go to the Property window and change the Text as Select File.



Next, drag the button control from the tool box. Go to the Property window and change the Name as buttonfilepick and change content as Choose File.



Now, drag the Textblock button control from the tool box for output and change the Name as TextBlockoutput and Text as Empty.



Step 6 - Add the Coding

To add the coding, double click on the Button Control and add the mentioned source code.

private async void buttonfilepick_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.Thumbnail;
    openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    openPicker.FileTypeFilter.Add(".jpg");
    openPicker.FileTypeFilter.Add(".jpeg");
    openPicker.FileTypeFilter.Add(".png");
    StorageFile file = await openPicker.PickSingleFileAsync();
    if (file != null)
    {
        TextBlockoutput.Text = "Selected File:" + file.Name;
    } else {
        TextBlockoutput.Text = "Try Again..";
    }
}

Now, add the Header File.

using System.Threading.Tasks;
using Windows.Storage.Pickers;
using Windows.Storage;

Step 7 - Run the Application

Now, we are ready to run our Project. So, click the Local Machine for running the Application.



Output







Conclusion - I hope you understood File Picker in Universal Window and how to run it.