Issue with InkCanvas Drawing on Windows 10 in UWP ApplicationBug title

[Marim99]

Describe the bug

I have developed an image editor using the InkCanvas control in my Universal Windows Platform (UWP) application. Surprisingly, it works perfectly fine on Windows 11. However, when testing the app on Windows 10, I encountered an issue where the InkCanvas doesn't draw on the image.

Problem Description: Although the ink toolbar is visible and functional, allowing users to select colors and tools, the actual drawing on the image doesn't happen on Windows 10.

Steps to reproduce the bug

1. Launch the UWP application on a device running Windows 10.
2. Open the image editor dialog.
3. Attempt to draw on the image using the InkCanvas.

Expected behavior

The InkCanvas should allow drawing on the image, similar to its behavior on Windows 11.

Actual Behavior:

The InkCanvas appears functional, but drawing on the image does not occur on Windows 10.

Screenshots

XAML Component Snippet:

<ContentDialog
    x:Class="eseua.Views.ImageEditorDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:helpers="using:eseua.Helpers"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Margin="5"
    CornerRadius="{StaticResource OverlayCornerRadius}"
    FullSizeDesired="True"
    PrimaryButtonStyle="{StaticResource DefaultButtonStyle}"
    PrimaryButtonText="{helpers:ResourceString Name=EditImageDialog_PrimaryButtonText}"
    SecondaryButtonStyle="{StaticResource ThemeAwareContentDialogSecondaryButtonStyle}"
    SecondaryButtonText="{helpers:ResourceString Name=Logout_Dialog_No}"
    mc:Ignorable="d">
    <ContentDialog.Resources>
        <x:Double x:Key="ContentDialogWidth">700</x:Double>
        <x:Double x:Key="ContentDialogMinWidth">200</x:Double>
        <x:Double x:Key="ContentDialogMaxWidth">1000</x:Double>
    </ContentDialog.Resources>
    <Grid
        x:Name="img_grid"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Center">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid x:Name="img_t" Grid.Row="1">
            <Image x:Name="img" Source="{x:Bind ViewModel.FilePath, Mode=OneWay}" />
            <InkCanvas
                x:Name="img_inkcanvas"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch" />
        </Grid>
        <Grid Grid.Row="0">
            <InkToolbar
                x:Name="img_inktoolbar"
                VerticalAlignment="Top"
                TargetInkCanvas="{x:Bind img_inkcanvas}" />
        </Grid>
    </Grid>
</ContentDialog>

Code Behind:

namespace eseua.Views
{
    public sealed partial class ImageEditorDialog : ContentDialog
    {
        internal ImageEditorDialogViewModel ViewModel => DataContext as ImageEditorDialogViewModel;

        private readonly IUsageDataService _usageDataService;
        private bool isSaved = false;
        public ImageEditorDialog()
        {
            this.InitializeComponent();
            _usageDataService = ((PrismApplication)Application.Current).Container.Resolve<IUsageDataService>();
            var themeBinding = new Binding { Source = ThemeAwareHelper.Instance, Path = new PropertyPath("Theme") };
            SetBinding(RequestedThemeProperty, themeBinding);
            img_inkcanvas.InkPresenter.InputDeviceTypes =
                    Windows.UI.Core.CoreInputDeviceTypes.Mouse |
                    Windows.UI.Core.CoreInputDeviceTypes.Pen;
            this.Closing += ImageEditorDialog_Closing;

            this.PrimaryButtonClick += SaveEditedImage;
        }
        private async void SaveEditedImage(ContentDialog sender, ContentDialogButtonClickEventArgs args)
        {
            try
            {
                img_inktoolbar.Visibility = Visibility.Collapsed;
                img_inktoolbar.Opacity = 0;
                RenderTargetBitmap bitmap = await RenderBitmapAsync(img_t);
                await ViewModel.SaveBitmapToFile(bitmap, ViewModel.FilePath);
                sender.Hide();
            }
            finally
            {
                isSaved = true;
            }
        }
}
}

NuGet package version

WinUI 2 - Microsoft.UI.Xaml 2.8.2

Windows version

Windows 10 (22H2): Build 19045

Additional context

No response

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Closed similar issues:

• Question: UWP - Could not draw in InkCanvas once placed inside a ContentDialog (#5111), similarity score: 0.70

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[ranjeshj]

@Marim99 thanks for the issue report. I've forwarded the issue to the appropriate team.

[daddyrex1]

in our UWP app, we have the same issue. In Windows 11 it works fine for our users.

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.