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
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.