I am trying to load a PNG into my InkCanvas, but it doesn't work

Question

I have created the following code, similar to this example:

    private async void OpenPicture(object sender, RoutedEventArgs e)
    {
        var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
        openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
        openPicker.FileTypeFilter.Add(".png");
        openPicker.FileTypeFilter.Add(".jpg");
        Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
        if (null != file)
        {
            try
            {
                Windows.Storage.Streams.IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                using (var inputStream = stream.GetInputStreamAt(0))
                {
                    await MyInkCanvas.InkPresenter.StrokeContainer.LoadAsync(stream);
                }
                stream.Dispose();

                //rootPage.NotifyUser(inkCanvas.InkPresenter.StrokeContainer.GetStrokes().Count + " stroke(s) loaded!", NotifyType.StatusMessage);
            }
            catch (Exception ex)
            {
                // Report I/O errors during load.
                //rootPage.NotifyUser(ex.Message, NotifyType.ErrorMessage);
            }
        }
    }

All I want is that the is displayed on my canvas, just like in the example I have linked. But nothing actually gets loaded if I do this.

score 1 · Answer 1 · answered Dec 10 '17 at 23:47

1

This line of code await MyInkCanvas.InkPresenter.StrokeContainer.LoadAsync(stream); is not for loading images from .png or .jpg files into InkCanvas, it is for loading ink strokes after you've previously saved them into a .gif file (see docs).

In the example of coloring book app that you provided the link to, the image from an external file is actually displayed in a XAML Image control. This line of code loads it:

myImage.Source = new BitmapImage(new Uri("ms-appx:///" + _Imgsrc));.

The Image control is placed behind the InkCanvas, and every time the user loads a new image, the InkCanvas' size is changed to fit the size of the Image.

answered Dec 10 '17 at 23:47

A. Milto

2,253
1
13
19

I see, thanks you. I assume that is the same way Windows does it when taking a screenshot in the ink part? And that there is no way of implementing imaged inside of the actual canvas? – Tomhawk Dec 10 '17 at 23:51
@Tomhawk I'm afraid, there's no way to display an image inside `InkCanvas` in UWP, so you're left with the workaround mentioned above. And if you need to save the colored result (strokes and background image combined) into a file, there's a [solution for this problem](https://stackoverflow.com/questions/37179815/displaying-a-background-image-on-a-uwp-ink-canvas). – A. Milto Dec 11 '17 at 00:04
I see, thanks. But what if I want to keep the image editable, the same way as if I save it as a ISF GIF? – Tomhawk Dec 11 '17 at 20:57
1

@Tomhawk Obviously, for your app to allow the user to continue coloring pictures from where the user's left off, it could store separate sets of files: each including the original user's image, .gif with stroke information and the colored result for the preview purposes. But if you want to store the last two or the first two in one file, I can't say for sure what would be the optimal way to do that or whether it's worth doing that at all. I suggest that you start a separate question to find out. – A. Milto Dec 11 '17 at 23:06

I am trying to load a PNG into my InkCanvas, but it doesn't work

1 Answers1