Ink strokes not displaying 50% of the time when inking on an InkCanvas control with stylus

Question

What I'm trying to accomplish

I'd like to allow users to ink on top of a control (label, dropdown, textbox, etc.), translate the ink strokes into text, and enter the text into the control. The ink will be captured by bringing an InkCanvas control to the foreground when the control is clicked with the mouse/stylus. The InkCanvas will be returned to the background when the mouse/stylus is lifted.

The Problem

This always works as expected when using the mouse. When using using the stylus, the ink strokes sometimes do not display on the InkCanvas until the stylus is lifted. It works correctly about 50% of the time.

The Project

I created a simple WPF project that contains a single window with an InkCanvas control and a label. When the label is clicked, the InkCanvas comes to the foreground and starts accepting ink input. The InkCanvas returns to the background on mouse up.

The XAML

<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="409" Width="824" WindowStartupLocation="CenterScreen">
<Grid>
    <InkCanvas IsHitTestVisible="False" Panel.ZIndex="0" Background="Aqua" Name="InkContainer"  />
    <Label Content="INK ON ME" Height="60" HorizontalAlignment="Left" Margin="424,146,0,0" Name="Label1" VerticalAlignment="Top" Width="254" FontSize="36" Foreground="White" FontWeight="Bold" />
</Grid>

The Code Behind

Class MainWindow

Private Sub InkContainer_PreviewMouseUp(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs) Handles InkContainer.PreviewMouseUp

    Canvas.SetZIndex(InkContainer, -1)
    InkContainer.IsHitTestVisible = False

End Sub

Private Sub Label1_PreviewMouseDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs) Handles Label1.PreviewMouseDown

    InkContainer.Strokes.Clear()
    Canvas.SetZIndex(InkContainer, 100)
    InkContainer.IsHitTestVisible = True
    InkContainer.CaptureMouse()

End Sub

End Class

Please let me know if you have any questions and/or need additional information.

Mike Mike · Accepted Answer · 2011-05-05T13:02:47

The fix is to mark the stylus down event as handled so it doesn't bubble up and trigger other stylus/mouse events. Here is the updated code behind:

Class MainWindow 

Private Sub Label1_PreviewMouseDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs) Handles Label1.PreviewMouseDown

    InkContainer.Strokes.Clear()
    Canvas.SetZIndex(InkContainer, 100)
    InkContainer.IsHitTestVisible = True
    InkContainer.CaptureStylus()

End Sub

Private Sub Label1_PreviewStylusDown(sender As System.Object, e As System.Windows.Input.StylusDownEventArgs) Handles Label1.PreviewStylusDown

    InkContainer.Strokes.Clear()
    Canvas.SetZIndex(InkContainer, 100)
    InkContainer.IsHitTestVisible = True
    InkContainer.CaptureStylus()

    e.Handled = True

End Sub

Private Sub InkContainer_PreviewMouseUp(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs) Handles InkContainer.PreviewMouseUp

    Canvas.SetZIndex(InkContainer, -1)
    InkContainer.IsHitTestVisible = False

End Sub

End Class

Ink strokes not displaying 50% of the time when inking on an InkCanvas control with stylus

1 Answers