How to bind to inkstrokes from the UWP InkCanvas hosted by WPF? - wpf

Question

I am truly reaching here :) (I am a complete newbie to UWP/WinRt)
I am hosting a custom WinRT InkCanvas in a WPF Window. I am completely new to WinRt, so when it comes to loading or saving the inkstroke data, I am lost. The problem is getting/setting
the InkStrokes when they are burried within the InkContainer. I would like to use XAML binding from the WPF window to a backend F# module. (Elmish.wpf).
I currently do have both Elmish.wpf and the WinRT Inkcanvas working in the same application.
(Elmish.wpf runs fine with the new application interface required to host WinRT/UWP controls).
ANY HELP OR GUIDANCE WOULD BE MOST APPRECIATED!
So, not knowing how to get the inkstrokes, this is what I have so far:
My WPF container -- ProgressNoteWindow
Note the use of WindowsXamlHost. Somehow, I need the button go gain access to the inkstrokes contained in the InkContainer of Inkcanvas being hosted by the WindowsXamlHost!
<Window x:Class="Stargate.XI.Client.Views.ProgressNoteWindow"
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:xaml="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost"
xmlns:controls="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
xmlns:local="clr-namespace:Stargate.XI.Client.Views"
WindowStartupLocation="CenterScreen" WindowState="Maximized"
mc:Ignorable="d"
Title="ProgressNoteWindow" d:DesignHeight="1200" d:DesignWidth="1200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<xaml:WindowsXamlHost x:Name="MyInkControl" Grid.Row="1" InitialTypeName="Loader2.MyUserControl2" ChildChanged="WindowsXamlHost_ChildChanged" />
<Button Command="{Binding Command}" CommandParameter="{Binding InkStrokes, ElementName=MyInkControl}" Content = "Save"/>
</Grid>
</Window>
My attached property --InkCanvasBinder
public static class InkCanvasBinder
{
public static InkStrokeContainer GetInkStrokes(DependencyObject obj) =>
obj.GetValue(InkStrokesProperty) as InkStrokeContainer;
public static void SetInkStrokes(DependencyObject obj, InkStrokeContainer value) =>
obj.SetValue(InkStrokesProperty, value);
public static DependencyProperty InkStrokesProperty = DependencyProperty.RegisterAttached(
"InkStrokes", typeof(InkStrokeContainer), typeof(InkCanvasBinder),
new PropertyMetadata(null, InkStrokesProperty_PropertyChanged));
private static void InkStrokesProperty_PropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var inkCanvas = d as InkCanvas;
if (inkCanvas != null) inkCanvas.InkPresenter.StrokeContainer = e.NewValue as InkStrokeContainer;
}
}
MyUserControl (in a UWP project):
<UserControl
x:Class="Loader2.MyUserControl2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Loader2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="1200"
d:DesignWidth="1200">
<Grid Background="LightCoral">
<InkCanvas x:Name="TheInkCanvas" Loaded="InkCanvas_OnLoaded" local:InkCanvasBinder.InkStrokes = "{x:Bind MyInkStrokeContainer}"/>
<!-- Ensure the InkToolbar is declared after the InkCanvas. If not, the InkCanvas overlay renders the InkToolbar inaccessible., Mode=OneWay-->
<InkToolbar x:Name="myInkToolbar" TargetInkCanvas="{x:Bind TheInkCanvas}" Width="300" Height="50" Margin="10,10,10,10" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Grid>
</UserControl>
MyUserControl - code-behind (in a UWP project)
using Windows.UI.Core;
using Windows.UI.Input.Inking;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The User Control item template is documented at https://go.microsoft.com/fwlink/?LinkId=234236
namespace Loader2
{
public sealed partial class MyUserControl2 : UserControl
{
public MyUserControl2()
{
this.InitializeComponent();
}
private void InkCanvas_OnLoaded(object sender, RoutedEventArgs e)
{
TheInkCanvas.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Touch;
}
public InkStrokeContainer MyInkStrokeContainer
{
get { return (InkStrokeContainer)GetValue(MyInkStrokeContainerProperty); }
set { SetValue(MyInkStrokeContainerProperty, value); }
}
// Using a DependencyProperty as the backing store for MyInkStrokeContainer. This enables animation, styling, binding, etc...
public static readonly DependencyProperty MyInkStrokeContainerProperty =
DependencyProperty.Register("MyInkStrokeContainer", typeof(InkStrokeContainer), typeof(MyUserControl2), new PropertyMetadata(null));
}
}