How to save and load InkCanvas gif file at fixed location without FilePicker

Question

I want to save and load InkCanvas gif file without FilePicker.

I saw a sample using FilePicker, but I want to save the gif file automatically when I click the save button.

For example, when I save 1 InkCanvas gif file,

Then the gif file is saved at in a specific folder on my C: drive.

I also want the file name grow automatically, so that I can load specific InkCanvas file.

Is this possible?

Answer 1

UWP apps run in a sandbox, so that the user can know what the app is doing and which files on her hard drive it accesses.

In case you want to save files to a location on the user's hard drive, you will have to be given access to this location first. There are several options how to achieve this:

1. FileSavePicker - the option you have discovered, but it requires the user to select the destination file each time manually. If you want to access the selected file next time the app is opened, you can utilize FutureAccessList, where you can store the StorageFile under a key, which will allow you to retrieve it again next time.
2. FolderPicker - let the user select the folder where the images should be stored using a dialog, and you will get read/write permission to this folder. You can then easily create new files there as you require. If you want to access this selected location next time the app is opened, you can utilize FutureAccessList, where you can store the StorageFolder under a key, which will allow you to retrieve it again next time.
3. Pictures library - your app can declare the picturesLibrary capability in the package.appxmanifest file and then get access to the user's pictures library for writing like this: Windows.Storage.StorageLibrary.GetLibraryAsync(Windows.Storage.KnownLibraryId.Pictures);
4. Broad file system access - this is the "ultimate" solution and requires your app to target the Spring Creators Update of Windows 10 (pending release in April 2018) or later. You must declare the broadFileSystemAccess capability in your app's manifest and then you can directly access any filesystem path the user has access to. The only problem with this is that you need to have a good reason to do this (like building a file explorer app, or similar), because this capability is checked during Microsoft Store Certification and it is possible that your app would get rejected if the presence of this capability would seem unnecessary for the type of application you are publishing.

Answer 2

I can imagine two different scenarios that could nudge you into this question:

1. The application needs to store the file for some reason, but the user doesn't need to know about it.
2. You want the user to know and to be able to access the file.

In the first scenario, I suppose you don't care which path you use, so you can use the folder where the application data are stored:

var selectedFolder = Windows.Storage.ApplicationData.Current.LocalFolder;

In the second case, you can let the user chose a path then, every time he click the "Save" button you can automatically save the image:

private async void btnSelectFolder_Click(object sender, RoutedEventArgs e)
{
     var picker = new FolderPicker();
     picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.Desktop;
     picker.FileTypeFilter.Add("*");

     selectedFolder = await picker.PickSingleFolderAsync();

     TxbFolder.Text = selectedFolder.Path;
}

In the click event handler of the Save button, you change only where you retrieve the file, the rest remains as in the example:

private async void btnSave_Click(object sender, RoutedEventArgs e)
{
     // Get all strokes on the InkCanvas.
     IReadOnlyList<InkStroke> currentStrokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();

     // Strokes present on ink canvas.
     if (currentStrokes.Count > 0)
     {
         var file = await selectedFolder.CreateFileAsync("InkSample.gif", CreationCollisionOption.GenerateUniqueName);

         if (file != null)
         {
             // The rest remains the same as in the example
             // ...
         }
      }
}

In the following there is the XAML code and the main page constructor modified:

private StorageFolder selectedFolder;

public MainPage()
{
    this.InitializeComponent();

    // Set supported inking device types.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse |
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

    // Listen for button click to initiate save.
    btnSave.Click += btnSave_Click;
    // Listen for button click to clear ink canvas.
    btnClear.Click += btnClear_Click;

    btnSelectFolder.Click += btnSelectFolder_Click;

    selectedFolder = Windows.Storage.ApplicationData.Current.LocalFolder;
    TxbFolder.Text = selectedFolder.Path;
}

XAML

<Grid 
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
    <TextBlock x:Name="Header" 
               Text="Basic ink store sample" 
               Style="{ThemeResource HeaderTextBlockStyle}" 
                Margin="10,0,0,0" />
     <TextBox x:Name="TxbFolder" 
              Text="Select a folder" 
              Width="250"
              Margin="24,12,10,12"/>
     <Button x:Name="btnSelectFolder"
            Content="..."
            Margin="0,0,10,0"/>
     <Button x:Name="btnSave" 
            Content="Save" 
            Margin="24,0,10,0"/>
     <Button x:Name="btnClear" 
            Content="Clear" 
            Margin="24,0,10,0"/>
</StackPanel>
<Grid Grid.Row="1">
    <InkCanvas x:Name="inkCanvas" />
</Grid>