question

Violynne-4521 avatar image
0 Votes"
Violynne-4521 asked Violynne-4521 commented

Change InkCanvas background of Microsoft.Toolkit.Wpf.UI.Controls.InkCanvas

there are two different classes,

System.Windows.Controls.InkCanvas (which has a background property)

and

Microsoft.Toolkit.Wpf.UI.Controls.InkCanvas (which doesn't has a background property)

I have to use the second one, how could I change the background of the inkcanvas?

windows-wpf
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered Violynne-4521 commented

For adding a background color to the InkCanvas control of UWP, we can host the technology of the custom UWP control in WPF. For more detailed steps, you could refer here.

When creating a custom WinRT XAML control ,you could add the following code in UserControl:

 <UserControl
     x:Class="ClassLibrary1.MyUserControl1"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:ClassLibrary1"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     d:DesignHeight="300"
     d:DesignWidth="400">
    
     <Grid Background="LightCoral">
         <InkCanvas x:Name="InkCanvas" Loaded="InkCanvas_OnLoaded"></InkCanvas>
     </Grid>
 </UserControl>

MyUserControl1.xaml.cs:

 private void InkCanvas_OnLoaded(object sender, RoutedEventArgs e)
     {
       InkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
 }

Follow the method of the document and use the created control in WPF.
The code of (Wpf) MainWindow.xaml:

 <Window x:Class="InkCanvasTest.MainWindow"
         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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:InkCanvasTest"
         xmlns:xaml="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
         mc:Ignorable="d"
         xmlns:Controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
         Title="MainWindow" Height="450" Width="800">
     <Grid Margin="10,50,10,10"  >
            
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <xaml:WindowsXamlHost InitialTypeName="ClassLibrary1.MyUserControl1" Width="300" Height="300" ChildChanged="WindowsXamlHost_ChildChanged" />
            
         <Controls:InkCanvas x:Name="myInkCanvas" Grid.Column="1" HorizontalAlignment="Left" Height="300" Width="300"
         Margin="10,10,10,10" VerticalAlignment="Top" />
     </Grid>
 </Window>

The code of (Wpf) MainWindow.xaml.cs:

   public partial class MainWindow : Window
   {
     public MainWindow()
     {
       InitializeComponent();
       this.myInkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;
     }
     private void WindowsXamlHost_ChildChanged(object sender, EventArgs e)
     {
       // Hook up x:Bind source.
       global::Microsoft.Toolkit.Wpf.UI.XamlHost.WindowsXamlHost windowsXamlHost =
           sender as global::Microsoft.Toolkit.Wpf.UI.XamlHost.WindowsXamlHost;
       global::ClassLibrary1.MyUserControl1 userControl =
           windowsXamlHost.GetUwpInternalObject() as global::ClassLibrary1.MyUserControl1;
     }
   }

The picture of result:
127538-2.gif


If the response is helpful, please click "Accept Answer" and upvote it.
 Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 


2.gif (49.6 KiB)
· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


Thank you for the detailed reply, it helps a lot!

I got an error in MyUserControl1.xaml.cs:

private void InkCanvas_OnLoaded(object sender, RoutedEventArgs e)
{
InkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
}

CS0122: 'InkCanvas.InkPresenter' is inaccessible due to its protection level

How could I solve this problem? Thank you!

0 Votes 0 ·

And in the MainWindow.xaml.cs I have a similar error:

CS1061 'WindowsXamlHost' does not contain a definition for 'InkPresenter' and no accessible extension method 'InkPresenter' accepting a first argument of type 'WindowsXamlHost' could be found (are you missing a using directive or an assembly reference?)

0 Votes 0 ·

Following the document I have solved the above two errors.

Now I have a new problem: I have one Controls.InkCanvas, one xaml:WindowsXamlHost, also have a Controls.InkToolbar for the Controls.InkCanvas.

I got the error when InitializeComponent(); in mainwindow:

System.Windows.Markup.XamlParseException: ''The invocation of the constructor on type 'Microsoft.Toolkit.Wpf.UI.Controls.InkToolbar' that matches the specified binding constraints threw an exception.' Line number '68' and line position '10'.'

0 Votes 0 ·

I removed the InkToolbar but InkCanvas still showed "cannot create control of type ClassLibrary.UserControl "

0 Votes 0 ·

Hi,@ Violynne-4521. For using Controls.InkToolbar and Controls.InkCanvas, you could check if your steps are consistent with the steps in the document here.
The code of MainWindow.xaml:

 <Grid Margin="10,50,10,10"  >
         <Grid.RowDefinitions>
             <RowDefinition Height="auto"/>
             <RowDefinition Height="auto"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <xaml:WindowsXamlHost InitialTypeName="ClassLibrary1.MyUserControl1" Width="300" Height="300"  Grid.Row="1" ChildChanged="WindowsXamlHost_ChildChanged" />
         <Controls:InkToolbar x:Name="myInkToolbar" TargetInkCanvas="{x:Reference myInkCanvas}" Grid.Column="1" Grid.Row="0" Width="300"
         Height="50" Margin="10,10,10,10" HorizontalAlignment="Left" VerticalAlignment="Top" />
         <Controls:InkCanvas x:Name="myInkCanvas" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Width="300" Height="300"
         Margin="10,10,10,10" VerticalAlignment="Top" />
     </Grid>
0 Votes 0 ·

Thank you! I checked the steps in the document again and it works!

0 Votes 0 ·