Ersten Einstieg in WPFGet Started with Ink in WPF

Windows Presentation Foundation (WPF) verfügt über eine Ink-Funktion, die das Integrieren von digitalem frei Hand Eingaben in Ihre APP erleichtert.Windows Presentation Foundation (WPF) has an ink feature that makes it easy to incorporate digital ink into your app.

Erforderliche VoraussetzungenPrerequisites

Wenn Sie die folgenden Beispiele verwenden möchten, installieren Sie zunächst Visual Studio.To use the following examples, first install Visual Studio. Außerdem ist es hilfreich zu wissen, wie Sie grundlegende WPF-apps schreiben können.It also helps to know how to write basic WPF apps. Hilfe zu den ersten Schritten mit WPF finden Sie unter Exemplarische Vorgehensweise : meine erste WPF-Desktop Anwendung.For help getting started with WPF, see Walkthrough: My first WPF desktop application.

SchnellstartQuick Start

Dieser Abschnitt unterstützt Sie beim Schreiben einer einfachen WPF-Anwendung, die frei Hand Eingaben sammelt.This section helps you write a simple WPF application that collects ink.

Sie haben Freihand?Got Ink?

So erstellen Sie eine WPF-App, die frei Hand Eingaben unterstütztTo create a WPF app that supports ink:

  1. Öffnen Sie Visual Studio.Open Visual Studio.

  2. Erstellen Sie eine neue WPF-App.Create a new WPF App.

    Erweitern Sie im Dialogfeld Neues Projekt die Kategorie installierter > C# Visual oder Visual Basic > Windows-Desktop .In the New Project dialog, expand the Installed > Visual C# or Visual Basic > Windows Desktop category. Wählen Sie dann die APP-Vorlage WPF-App (.NET Framework) aus.Then, select the WPF App (.NET Framework) app template. Geben Sie einen Namen ein, und klicken Sie dann auf OK.Enter a name, and then select OK.

    Visual Studio erstellt das Projekt, und MainWindow. XAML wird im Designer geöffnet.Visual Studio creates the project, and MainWindow.xaml opens in the designer.

  3. Geben Sie <InkCanvas/> zwischen den <Grid>-Tags ein.Type <InkCanvas/> between the <Grid> tags.

    XAML-Designer mit InkCanvas-Tag

  4. Drücken Sie F5 , um die Anwendung im Debugger zu starten.Press F5 to launch your application in the debugger.

  5. Schreiben Sie mit einem Tablettstift oder einer Maus im Fenster "Hello World".Using a stylus or mouse, write hello world in the window.

Sie haben die Ink-Entsprechung einer "Hello World"-Anwendung mit nur 12 Keystrokes geschrieben!You've written the ink equivalent of a "hello world" application with only 12 keystrokes!

Hochskalieren der APPSpice Up Your App

Wir nutzen einige Features von WPF.Let’s take advantage of some features of the WPF. Ersetzen Sie alles zwischen dem öffnenden und dem schließenden <Fenster > Tags durch das folgende Markup:Replace everything between the opening and closing <Window> tags with the following markup:

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

Dieser XAML-Code erstellt einen Hintergrund für den Farbverlaufs Pinsel auf der Eingangs Oberfläche.This XAML creates a gradient brush background on your inking surface.

Farbverlaufs Farben auf der Erstellungs Oberfläche in der WPF-App

Code hinter dem XAML hinzufügenAdd Some Code Behind the XAML

Obwohl XAML das Entwerfen der Benutzeroberfläche vereinfacht, muss jede reale Anwendung Code zum Behandeln von Ereignissen hinzufügen.While XAML makes it very easy to design the user interface, any real-world application needs to add code to handle events. Im folgenden finden Sie ein einfaches Beispiel, das als Reaktion auf einen Rechtsklick mit der Maus auf die frei Hand Eingabe zoomt.Here is a simple example that zooms in on the ink in response to a right-click from a mouse.

  1. Legen Sie den MouseRightButtonUp Handler in Ihrem XAML-Code fest:Set the MouseRightButtonUp handler in your XAML:

    <InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">
    
  2. Erweitern Sie in Projektmappen-Explorerden Eintrag MainWindow. XAML, und öffnen Sie die Code Behind-Datei (MainWindow.XAML.cs oder MainWindow. XAML. vb).In Solution Explorer, expand MainWindow.xaml and open the code-behind file (MainWindow.xaml.cs or MainWindow.xaml.vb). Fügen Sie den folgenden Ereignishandlercode hinzu:Add the following event handler code:

    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);
    }
    
    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
    
  3. Führen Sie die Anwendung aus.Run the application. Fügen Sie frei Hand Eingaben hinzu, klicken Sie dann mit der rechten Maustaste auf die Maus, oder führen Sie eine Press-and-Hold-Entsprechung mit einem TablettstiftAdd some ink, and then right-click with the mouse or perform a press-and-hold equivalent with a stylus.

    Wenn Sie mit der rechten Maustaste klicken, wird die Anzeige vergrößert.The display zooms in each time you click with the right mouse button.

Verwenden von prozeduralem Code anstelle von XAMLUse Procedural Code Instead of XAML

Sie können auf alle WPF-Funktionen über prozeduralen Code zugreifen.You can access all WPF features from procedural code. Führen Sie die folgenden Schritte aus, um eine "Hello Ink World"-Anwendung für WPF zu erstellen, die überhaupt kein XAML verwendet.Follow these steps to create a "Hello Ink World" application for WPF that doesn’t use any XAML at all.

  1. Erstellen Sie in Visual Studio ein neues Konsolen Anwendungsprojekt.Create a new console application project in Visual Studio.

    Erweitern Sie im Dialogfeld Neues Projekt die Kategorie installierter > C# Visual oder Visual Basic > Windows-Desktop .In the New Project dialog, expand the Installed > Visual C# or Visual Basic > Windows Desktop category. Wählen Sie dann die APP-Vorlage für Konsolen-app (.NET Framework) aus.Then, select the Console App (.NET Framework) app template. Geben Sie einen Namen ein, und klicken Sie dann auf OK.Enter a name, and then select OK.

  2. Fügen Sie den folgenden Code in die Datei Program.cs oder Program. vb ein:Paste the following code into the Program.cs or Program.vb file:

    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();
        }
    }
    
    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
    
    End Class
    
    Module Module1
    
        Sub Main()
            Dim prog As New Program()
            prog.Run()
    
        End Sub
    
    End Module
    
  3. Fügen Sie Verweise auf die Assemblys PresentationCore, presentationframework und WindowsBase hinzu, indem Sie in Projektmappen-Explorer mit der rechten Maustaste auf Verweise klicken und Verweis hinzufügenauswählen.Add references to the PresentationCore, PresentationFramework, and WindowsBase assemblies by right-clicking on References in Solution Explorer and choosing Add Reference.

    Verweis-Manager mit "PresentationCore" und "PresentationFramework"

  4. Erstellen Sie die Anwendung, indem Sie F5drücken.Build the application by pressing F5.

Siehe auchSee also