Home > Metro, Windows 8 > Windows 8 New UI Apps FilePickerTarget

Windows 8 New UI Apps FilePickerTarget

The FilePicker concept is very flexible to provide apps with access to any filesystem location, while the user is still in charge of his data, because the app always requires user interaction before data from the filesystem can be accessed.

But there is more behind this concept. Developer can extend their app to not only use the FilePicker interface for loading and saving data, but also enable their app to act as source for any FilePicker operation.

This is what SkyDrive app by default does.

To see this concept in action, just use any app, e.g. tghe Music app and open a file.

Then open the list of provider from the left top and switch to SkyDrive.
This will then be on screen:
image  ==> image

After selecting a file, the original app can use this file as it would be on the local filesystem.

To enable your app to provide this kind of FilePickerTarget feature you must follow this steps:

Add the "File Open Picker" Declaration in the AppXManifest and either select "Supports any filetype" or add all filetypes you want to provide.

image

Add a new page of type  FileOpen Picker Contract to your project
image

Make sure, that the following function will be added to App.xaml.cs. The Add Page wizard does it for you., when adding the File Open Picker contract.

Inside this code make sure to activate the newly added page:

protected override void OnFileOpenPickerActivated(Windows.ApplicationModel.Activation.FileOpenPickerActivatedEventArgs args)
{
   var fileOpenPickerPage = new FilePickerTargetApp.Views.FileOpenPickerPage();
   fileOpenPickerPage.Activate(args);
}

 

I stripped down the code behind for the newly added FileOpenPickerPage to a minimum here:

The Activate function there looks like this:

public async void Activate(FileOpenPickerActivatedEventArgs args)
{
    this._fileOpenPickerUI = args.FileOpenPickerUI;
    Window.Current.Content = this;
    Window.Current.Activate();

    CreateAndReadDummyData();
}

 

CreateAndReadDummyData will create a few textfiles in the temp storage of the app and then add all this filenames to the left ListBox.

The user should then select one or more files, which will add the names to the right listbox and also add it to the given instance of _fileOpenPicker, where it will be given to the AddFile() method

 

The UI looks ugly, but the minimalistic view should help to understand the concept:

Only the grey part is coming from the FilePicker target app, the surrounding space is from the calling app, which is in this demo scenarion the same app, but usually a different one!

image

 

public sealed partial class MyFileOpenPickerPage : FilePickerTargetApp.Common.LayoutAwarePage
{
    private Windows.Storage.Pickers.Provider.FileOpenPickerUI _fileOpenPickerUI;

    public MyFileOpenPickerPage()
    {
        this.InitializeComponent();
    }

    public async void Activate(FileOpenPickerActivatedEventArgs args)
    {
        this._fileOpenPickerUI = args.FileOpenPickerUI;
        Window.Current.Content = this;
        Window.Current.Activate();

        CreateAndReadDummyData();
    }

    private async void ListFiles_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
    {
        var tempFolder = Windows.Storage.ApplicationData.Current.TemporaryFolder;
        for (int i = 0; i < e.AddedItems.Count; i++)
        {
            string filename = (e.AddedItems[i]) as String;

            // add selected file to FileOpenPicker
            StorageFile sf = await tempFolder.GetFileAsync(filename);
            this._fileOpenPickerUI.AddFile(filename, sf);

            // Update UI
            await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
            {
                SelectedFiles.Items.Add(filename);
            });
        }

    }

    private async void SelectedFiles_Tapped_1(object sender, TappedRoutedEventArgs e)
    {
        string filename = SelectedFiles.SelectedItem.ToString();

        // REMOVE selected file from FileOpenPicker
        this._fileOpenPickerUI.RemoveFile(filename);

        // Update UI
        await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
        {
            SelectedFiles.Items.Remove(filename);
        });
    }
}

 

 

The important detail is to add at least one file of the type, which was specified by the caller.

(See lines 28 and 44)

Otherwise the "Open" button at the bottom never gets active and the user can only cancel the FilePicker operation.

If the user selects a file and then  click "Open", then the selected files will be forwarded to the calling application and there they can be treated like any other regular files.

 

The nice thing is, that the target application can fake all the files, which will be displayed and only fetch the real files, when any file is selected. So the left listbox could be filled with just the filenames from a webservice and the real file could then be fetched and temporarily placed in the temporary storage, when the user has reallly selected the file.

 .

Categories: Metro, Windows 8
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: