Kom igång med pennanteckning i WPF

Artikel
12/17/2024

Windows Presentation Foundation (WPF) har en pennanteckningsfunktion som gör det enkelt att införliva digital pennanteckning i din app.

Förutsättningar

Om du vill använda följande exempel installerar du först Visual Studio. Det hjälper också till att veta hur du skriver grundläggande WPF-appar. Mer information om hur du kommer igång med WPF finns i Genomgång: Mitt första WPF-skrivbordsprogram.

Snabbstart

Det här avsnittet hjälper dig att skriva ett enkelt WPF-program som samlar in pennanteckningar.

Har du bläck?

Så här skapar du en WPF-app som stöder pennanteckning:

Öppna Visual Studio.
Skapa en ny WPF-app.

I dialogrutan Nytt projekt expanderar du kategorin Installerat>Visual C# eller Visual Basic>Windows Desktop. Välj sedan WPF-applikation (.NET Framework) applikationsmall. Ange ett namn och välj sedan OK.

Visual Studio skapar projektet och MainWindow.xaml öppnas i designern.
Skriv <InkCanvas/> mellan <Grid>-taggarna.
Tryck på F5 för att starta programmet i felsökningsprogrammet.
Skriv hello world i fönstret med hjälp av en penna eller mus.

Du har skrivit pennanteckningens motsvarighet till ett "hello world"-program med endast 12 tangenttryckningar!

Krydda din app

Låt oss dra nytta av några funktioner i WPF. Ersätt allt mellan <fönster> taggar med följande markering:

<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>

Denna XAML skapar en tonad penselbakgrund på din pennanteckningsyta.

Toningsfärger på pennanteckningsytan i WPF-appen

Lägg till lite kod bakom XAML

XAML gör det mycket enkelt att utforma användargränssnittet, men alla verkliga program måste lägga till kod för att hantera händelser. Här är ett enkelt exempel som zoomar in på pennanteckningen som svar på ett högerklicka från en mus.

Ange MouseRightButtonUp-hanteraren i XAML:

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

I Solution Explorerexpanderar du MainWindow.xaml och öppnar filen bakom koden (MainWindow.xaml.cs eller MainWindow.xaml.vb). Lägg till följande händelsehanterarkod:

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

Kör programmet. Lägg till lite bläck och högerklicka sedan med musen eller utför motsvarande tryckning och håll med en penna.

Skärmen zoomar in varje gång du klickar med höger musknapp.

Använd procedurkod i stället för XAML

Du kan komma åt alla WPF-funktioner från procedurkod. Följ dessa steg för att skapa ett "Hello Ink World"-program för WPF som inte använder någon XAML alls.

Skapa ett nytt konsolprogramprojekt i Visual Studio.

I dialogrutan Nytt projekt expanderar du kategorin Installerat>Visual C# eller Visual Basic>Windows Desktop. Välj sedan mallen Console App (.NET Framework) app. Ange ett namn och välj sedan OK.

Klistra in följande kod i filen Program.cs eller Program.vb:

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

Lägg till referenser till sammansättningarna PresentationCore, PresentationFramework och WindowsBase genom att högerklicka på Referenser i Solution Explorer och välja Lägg till referens.
Skapa programmet genom att trycka på F5.

Dela via