Display background image on UWP ink canvas

Question

I have InkCanvas in my UWP application and you want to display the image (ideally as part of Canvas, but otherwise overlay it somehow (the idea is that I can save the changed image back to the image file). WPF seems to be , allows InkCanvas to have children, but in UWP this is not possible. I tried the following:

<InkCanvas x:Name="drawInkCanvas"> <Image Source="{Binding DrawingImage}"/> </InkCanvas> 

But this does not work; I also tried this:

  <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"> <InkCanvas x:Name="drawInkCanvas" Opacity=".5"/> <Image Source="{Binding DrawingImage}" Opacity=".5"/> </Canvas> 

What, to be honest, I did not have much hope; in any case, although it does, it seems to work, it makes the image and InkCanvas incorrect and obviously does not allow me to save the resulting image.

Ideally, there would be a background image or something like that. Is there something I can use to achieve this; I am of the opinion that I may have to replace InkCanvas with a standard canvas, and then rewrite all the functions of InkCanvas!

Answer 1

So you have a couple of problems:

• How to draw using the InkCanvas control over Image .
• How to save the results in a file.

In this example, I am using a simple UWP application that assumes that you have a sample.jpg file in your Assets folder and you have a Pictures feature in your manifest.

To solve the first problem, just put both InkCanvas and Image in the same container (e.g. Grid ), but remember that the order matters :

 <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid> <Image Source="/Assets/sample.jpg"></Image> <InkCanvas x:Name="ink"></InkCanvas> </Grid> <Button Content="Save" Width="100" Height="25" HorizontalAlignment="Center" VerticalAlignment="Center" Click="BtnSave_Click"/> </StackPanel> 

If you first put InkCanvas (for example, in the example), this will not work. However, if put InkCanvas last - everything works fine, and you can draw your image.

Now, to solve the second problem, you need to use Win2D (install the nuget package Win2D.uwp), since the standard RenderTargetBitmap will not display the contents of InkCanvas . First draw the original image (take the image from the original source directly, for example, from the source file), then draw the contents of your ink canvas above it. Full MainPage code (if you add xaml above, you will have a full working sample):

 public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); // just set some properties of ink canvas, not directly relevant to your question ink.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch; var attr = new InkDrawingAttributes(); attr.Color = Colors.Red; attr.IgnorePressure = true; attr.PenTip = PenTipShape.Circle; attr.Size = new Size(4, 10); ink.InkPresenter.UpdateDefaultDrawingAttributes(attr); } private async void BtnSave_Click(object sender, RoutedEventArgs e) { // grab output file StorageFolder storageFolder = KnownFolders.SavedPictures; var file = await storageFolder.CreateFileAsync("output.jpg", CreationCollisionOption.ReplaceExisting); CanvasDevice device = CanvasDevice.GetSharedDevice(); CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int) ink.ActualWidth, (int) ink.ActualHeight, 96); // grab your input file from Assets folder StorageFolder appInstalledFolder = Windows.ApplicationModel.Package.Current.InstalledLocation; StorageFolder assets = await appInstalledFolder.GetFolderAsync("Assets"); var inputFile = await assets.GetFileAsync("sample.jpg"); using (var ds = renderTarget.CreateDrawingSession()) { ds.Clear(Colors.White); var image = await CanvasBitmap.LoadAsync(device, inputFile.Path); // draw your image first ds.DrawImage(image); // then draw contents of your ink canvas over it ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes()); } // save results using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite)) { await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Jpeg, 1f); } } }