Kolumne: XAML-Expertise

XAML-Tipp: WPF: Das „InkCanvas“-Steuerelement mit WPF nutzen
Keine Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es die folgende Expertise: „WPF: Das „InkCanvas“-Steuerelement mit WPF nutzen“

Für Windows-10-Apps hat Microsoft ein umfangreiches Windows-Ink-API bereitgestellt. Die gute Nachricht: Das API ist ebenfalls unter WPF verfügbar, allerdings in einer anderen Version, wie man deutlich an den unterschiedlichen Methoden und Eigenschaften erkennen kann. Das InkCanvas-Steuerelement wird ab einem WPF-Projekt basierend auf .NET 4.6.1 per Standard bereitgestellt. Der XAML-Code aus Listing 1 kann daher ohne Weiteres übernommen werden.

Anders sieht es mit dem Zugriff auf die weiteren Windows-Ink-APIs aus. Hierfür ist erst die Windows Ink Assembly Microsoft.Ink.dll notwendig. Zu finden ist sie unter \Programme\Gemeinsame Dateien\Microsoft Shared\Ink oder auch C:\Program Files\Common Files\microsoft shared\ink.

WPF: Das „InkCanvas“-Steuerelement mit WPF nutzen

Im Vergleich mit dem Windows-Ink-API für Windows-10-Apps, ist die Implementierung unter WPF nicht so leichtgewichtig. Hier wird die Sammlung der erkannten Striche (Strokes) in einen MemoryStream geladen. Ein RecognizerContext liest anschließend den Stream aus und gibt Schrittweise den erkannten Text aus. In Listing 2 wird der dazugehörige Sourcecode gezeigt und in Abbildung 1 sieht man das Ergebnis.

Abb. 1: Das „InkCanvas“-Steuerelement unter WPF mit Schrifterkennung

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <TextBlock x:Name="Header"
               FontSize="32"
               Text="WPF ink sample"
               Margin="10,0,0,0" />
  <Grid Grid.Row="1">
    <Border BorderThickness="10" BorderBrush="Red" />
    <InkCanvas x:Name="inkCanvas" />
  </Grid>
  <Button Grid.Row="2"
          Margin="10"
          HorizontalAlignment="Center"
          Click="OnButtonClick">Schrifterkennung</Button>
</Grid>
private void OnButtonClick(object sender, RoutedEventArgs e)
{
  using (MemoryStream ms = new MemoryStream())
  {
    inkCanvas.Strokes.Save(ms);
    var myInkCollector = new InkCollector();
    var ink = new Ink();
    ink.Load(ms.ToArray());

    Header.Text = "";

    using (RecognizerContext context = new RecognizerContext())
    {
      if (ink.Strokes.Count > 0)
      {
        context.Strokes = ink.Strokes;
        RecognitionStatus status;

        var result = context.Recognize(out status);
        if (status == RecognitionStatus.NoError)
          Header.Text += result.TopString;
        else
          MessageBox.Show("Recognition failed");

      }
      else
        MessageBox.Show("No stroke detected");
    }
  }
}
Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -