Kolumne: XAML Expertise

XAML-Tipp: UWP – Stiftinteraktionen mit dem „InkCanvas“-Steuerelement
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 folgende Expertise: „UWP: Stiftinteraktionen mit dem InkCanvas-Steuerelement“

Der Stift als Eingabegerät wurde in der Microsoft-Geschichte bereits seit Windows CE und XP unterstützt. Das war lange vor dem heute etablierten Touch. Nur die dahinterliegende Technik war nicht so ausgereift, wie wir sie heute kennen. Die heutigen Surface-Geräte unterstützen alle Digitalstifte mit einer größeren Vielzahl von Möglichkeiten, als sie von früher bekannt ist. Zum Beispiel kann unterschieden werden, ob der Bildschirm gerade von einem Stift oder einem Finger berührt wird. Dazu kommt die Erkennung, wie fest der Benutzer mit dem Stift auf den Bildschirm drückt. Für einige Geschäftsanwendungen ist die Unterstützung von Stifteingaben besonders wertvoll. Zum Beispiel für eine Unterschrift, oder das Erkennen von Zeichnungen.

UWP: Stiftinteraktionen mit dem „InkCanvas“-Steuerelement

Bei Windows 10 wurde speziell für Anwender der Windows-Ink-Arbeitsbereich bereitgestellt. Dieser bietet Zugriff auf drei Funktionen: „Kurznotizen“, „Skizzenblock“ und „Bildschirmskizze“. Mit dem Creators Update wurde dann passend ein Windows-Ink-API bereitgestellt, das es deutlich vereinfacht, für den Stift Lösungen in eigene Windows-Apps zu integrieren, so, wie es bereits von den soeben genannten Windows-Ink-Funktionen selbst genutzt wird.

Ein API ist das InkCanvas-Steuerelement, das, wie der Name bereits verrät, ein Canvas mit vorhandener Digitalstiftunterstützung ist. Es muss nur in XAML deklariert werden und ist sofort Einsatzbereit. In Listing 1 wird ein Beispielcode dazu gezeigt und in Abbildung 1 sieht man das Ergebnis einer Stifteingabe.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
  <TextBlock x:Name="Header"
               Text="Basic ink sample"
               Style="{ThemeResource HeaderTextBlockStyle}"
               Margin="10,0,0,0" />
  <Grid Grid.Row="1">
    <Border BorderThickness="10" BorderBrush="Red" />
    <InkCanvas x:Name="inkCanvas" />
  </Grid>
</Grid>

Abb. 1: Das „InkCanvas“-Steuerelement

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -