Erste Schritte mit Freihandeingaben

Artikel
08/20/2008

Aktualisiert: November 2007

Das Integrieren digitaler Freihandeingaben in eigene Anwendungen ist leichter als je zuvor. Freihandeingaben wurden von einer Begleiterscheinung zu COM- und Windows Forms-Programmiermethoden weiterentwickelt, um eine vollständige Integration im WPF zu erreichen. Die Installation separater SDKs oder Laufzeitbibliotheken ist nicht notwendig.

Vorbereitungsmaßnahmen

Um die folgenden Beispiele verwenden zu können, müssen Sie zunächst Microsoft Visual Studio 2005 und das Windows SDK installieren. Sie sollten ebenfalls wissen, wie Anwendungen für den WPF geschrieben werden. Weitere Informationen zu den ersten Schritten mit dem WPF finden Sie unter Erste Schritte mit Windows Presentation Foundation.

Schnellstart

Dieser Abschnitt unterstützt Sie beim Schreiben einer einfachen WPF-Anwendung, die Freihandeingaben erfasst.

Installieren Sie zunächst Microsoft Visual Studio 2005 und das Windows Software Development Kit (SDK), wenn Sie dies nicht bereits getan haben. WPF-Anwendungen müssen in der Regel zunächst kompiliert werden, um sie anzeigen zu können, selbst wenn sie ausschließlich aus Extensible Application Markup Language (XAML) bestehen. Das Windows Software Development Kit (SDK) enthält jedoch eine Anwendung, XamlPad, die zur schnelleren Implementierung einer XAML-basierten Benutzeroberfläche entwickelt wurde. Mit dieser Anwendung können Sie die ersten paar Beispiele in diesem Dokument anzeigen und mit den Beispielen experimentieren. Der Prozess zum Erstellen kompilierter Anwendungen aus XAML wird weiter unten in diesem Dokument behandelt.

Klicken Sie zum Starten von XAMLPad auf Start, zeigen Sie auf Alle Programme, Microsoft Windows SDK, Tools, und klicken Sie auf XAMLPad. Im Renderingbereich wird der im Codebereich eingegebene XAML-Code von XAMLPad gerendert. Sie können den XAML-Code bearbeiten, und die Änderungen werden sofort im Renderingbereich angezeigt.

Freihandeingabe erfasst?

So erstellen Sie Ihre erste WPF-Anwendung, die Freihandeingaben unterstützt

Öffnen Sie Microsoft Visual Studio 2005.
Erstellen Sie eine neue Windows-Anwendung (WPF).
Geben Sie <InkCanvas/> zwischen den <Grid>-Tags ein.
Drücken Sie F5, um die Anwendung im Debugger zu starten.
Schreiben Sie mit einem Tablettstift oder einer Maus Hello World in das Fenster.

Sie haben gerade die Freihandeingabenentsprechung einer "Hello World"-Anwendung mit lediglich 12 Tastaturanschlägen geschrieben!

Aufwerten Ihrer Anwendung

Nutzen Sie einige Features des WPF. Ersetzen Sie alles zwischen dem öffnenden <Window>- und dem schließenden </Window>-Tag mit dem folgenden Markup, um einen Farbverlaufhintergrund für die Freihandoberfläche zu erhalten.

<Page>
  <InkCanvas Name="myInkCanvas">
    <InkCanvas.Background>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Blue" Offset="0.5" />
        <GradientStop Color="Green" Offset="1.0" />
      </LinearGradientBrush>
    </InkCanvas.Background>
  </InkCanvas>


...


</Page>

Verwenden von Animation

Animieren Sie nur zum Spaß die Farben des Farbverlaufs. Fügen Sie das folgende XAML nach dem schließenden </InkCanvas>-Tag, aber vor dem schließenden </Page>-Tag hinzu.

<Page.Triggers>
  <EventTrigger RoutedEvent="Page.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
          From="Green" To="Blue" Duration="0:0:5"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Page.Triggers>

Hinzufügen von Code zum XAML

Obwohl XAML das Entwerfen der Benutzeroberfläche sehr einfach macht, benötigt jede praxisnahe Anwendung zusätzlichen Code zum Behandeln von Ereignissen. Ein kleines Beispiel zum Durchführen eines Zooms der Freihandeingabe als Reaktion auf einen Klick mit der rechten Maustaste:

Legen Sie den MouseRightButtonUp-Handler im XAML fest:

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

Erweitern Sie Windows1.xaml im Projektmappen-Explorer von Visual Studio, und öffnen Sie die Code-Behind-Datei Window1.xaml.cs bzw. Window1.xaml.vb, wenn Sie Visual Basic verwenden. Fügen Sie den folgenden Ereignishandlercode hinzu:

Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                ByVal e As System.Windows.Input.MouseButtonEventArgs)

    Dim m As New Matrix()
    m.Scale(1.1, 1.1)
    CType(sender, InkCanvas).Strokes.Transform(m, True)

End Sub 'RightMouseUpHandler

private void RightMouseUpHandler(object sender, 
                                 System.Windows.Input.MouseButtonEventArgs e)
{
    Matrix m = new Matrix();
    m.Scale(1.1d, 1.1d);
    ((InkCanvas)sender).Strokes.Transform(m, true);
}

Führen Sie nun die Anwendung aus. Erstellen Sie einige Freihandeingaben, und klicken Sie dann mit der rechten Maustaste bzw. halten Sie den Tablettstift gedrückt.

Verwenden von prozeduralem Code statt XAML

Mit prozeduralem Code können Sie auf alle WPF-Features zugreifen. Hier ist eine "Hello Ink World"-Anwendung für WPF, die keinerlei XAML verwendet. Fügen Sie den folgenden Code in Visual Studio in eine leere Konsolenanwendung ein. Fügen Sie Verweise auf die Assemblys PresentationCore, PresentationFramework und WindowsBase hinzu, und erstellen Sie die Anwendung durch Drücken von F5:

Imports System
Imports System.Windows
Imports System.Windows.Controls


Class Program
    Inherits Application
    Private win As Window
    Private ic As InkCanvas


    Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
        MyBase.OnStartup(args)
        win = New Window()
        ic = New InkCanvas()
        win.Content = ic
        win.Show()

    End Sub 'OnStartup

End Class 'Program

Module Module1

    Sub Main()
        Dim prog As New Program()
        prog.Run()

    End Sub

End Module

using System;
using System.Windows;
using System.Windows.Controls;
class Program : Application
{
    Window win;
    InkCanvas ic;

    protected override void OnStartup(StartupEventArgs args)
    {
        base.OnStartup(args);
        win = new Window();
        ic = new InkCanvas();
        win.Content = ic;
        win.Show();
    }

    [STAThread]
    static void Main(string[] args)
    {
        new Program().Run();
    }
}