Nozioni di base sull'input penna

Articolo
08/11/2011

Incorporare l'input penna nelle applicazioni è più facile che mai. Nata per effetto del metodo di programmazione di Windows Forms e COM, questa tecnologia si è evoluta fino a raggiungere la piena integrazione in WPF. Non è necessario installare SDK o librerie di runtime distinte.

Prerequisiti

Per poter utilizzare gli esempi seguenti, è necessario installare Microsoft Visual Studio 2005 e Windows SDK. È inoltre necessario disporre di conoscenze su come scrivere applicazioni per WPF. Per ulteriori informazioni su WPF, vedere Procedura dettagliata: introduzione a WPF.

Avvio rapido

Questa sezione consente di scrivere una semplice applicazione WPF che raccoglie input penna.

Se questa operazione non è già stata eseguita, installare Microsoft Visual Studio 2005 e Windows Software Development Kit (SDK). È in genere necessario compilare le applicazioni WPF prima di poterle visualizzare, anche se sono costituite interamente da codice Extensible Application Markup Language (XAML). Tuttavia, Windows Software Development Kit (SDK) include un'applicazione, XAMLPad, progettata per velocizzare il processo di implementazione di un'interfaccia utente basata su XAML. È possibile utilizzare tale applicazione per visualizzare e iniziare a eseguire i primi esempi riportati in questo documento. Il processo di creazione di applicazioni compilate da XAML viene descritto più avanti in questo documento.

Per avviare XAMLPad, fare clic sul pulsante Start, scegliere Tutti i programmi, Microsoft Windows SDK, Strumentie quindi XAMLPad. Nel riquadro di rendering XAMLPad esegue il rendering del codice XAML scritto nel riquadro del codice. È possibile modificare il codice XAML. In questo caso, le modifiche verranno immediatamente visualizzate nel riquadro di rendering.

Input penna già disponibile

Per avviare la prima applicazione WPF che supporta l'input penna:

Aprire Microsoft Visual Studio 2005
Creare una nuova applicazione Windows (WPF)
Digitare <InkCanvas/> tra i tag <Grid>
Premere F5 per avviare l'applicazione nel debugger
Utilizzando uno stilo o il mouse, scrivere hello world nella finestra

È stato scritto l'equivalente dell'input penna di un'applicazione "hello world" con appena 12 battute di tasti.

Personalizzare l'applicazione

Per sfruttare alcune funzionalità di WPF, sostituire tutto il contenuto tra il tag di apertura <Window> e il tag di chiusura </Window> con il seguente markup per ottenere uno sfondo con pennello a sfumatura sulla superficie dell'input penna.

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

Utilizzo dell'animazione

Per aggiungere un effetto divertente, animare i colori del pennello a sfumatura. Aggiungere il seguente codice XAML dopo il tag di chiusura </InkCanvas> ma prima del tag di chiusura </Page>.

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

Aggiunta di codice sottostante a XAML

Anche se il linguaggio XAML consente di progettare molto agevolmente l'interfaccia utente, per le applicazioni reali è necessario aggiungere codice per gestire gli eventi. Di seguito è riportato un semplice esempio in cui l'input penna viene ingrandito in risposta a un clic con il pulsante destro del mouse:

Impostare il gestore MouseRightButtonUp in XAML:

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

In Esplora soluzioni di Visual Studio espandere Windows1.xaml e aprire il file code-behind, ossia Window1.xaml.cs o Window1.xaml.vb se si utilizza Visual Basic. Aggiungere il codice del gestore eventi seguente:

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);
}

A questo punto, eseguire l'applicazione. Aggiungere un input penna e quindi fare clic con il pulsante destro del mouse o eseguire un'operazione equivalente tenendo premuto un tasto con uno stilo.

Utilizzo di codice procedurale anziché XAML

È possibile accedere a tutte le funzionalità di WPF da codice procedurale. Di seguito è riportata un'applicazione "Hello Ink World" di WPF che non utilizza XAML. Incollare il codice seguente in un'applicazione console vuota in Visual Studio. Aggiungere i riferimenti agli assembly PresentationCore, PresentationFramework e WindowsBase, quindi compilare l'applicazione premendo 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();
    }
}