Débuter avec l'encre

Article
08/10/2011

Incorporer de l'encre numérique à vos applications est désormais plus facile que jamais. L'encre a évolué ; après avoir été corollaire de la méthode de programmation de COM et de Windows Forms, elle est désormais totalement intégrée à WPF. Vous n'avez pas besoin d'installer de Kits de développement logiciel (SDK) séparés ou de bibliothèques Runtime.

Composants requis

Pour utiliser les exemples suivants, vous devez tout d'abord installer Microsoft Visual Studio 2005 et le Windows SDK. Vous devez également comprendre comment écrire des applications pour WPF. Pour plus d'informations sur la mise en route de WPF, consultez Procédure pas à pas : mise en route de WPF.

Démarrage rapide

Cette section vous aide à écrire une application WPF simple pour collecter de l'encre.

Si vous ne l'avez pas encore fait, installez Microsoft Visual Studio 2005 et le Windows Software Development Kit (SDK). En général, avant de pouvoir faire fonctionner les applications WPF, il faut qu'elles soient compilées, même si elles sont entièrement composées de Extensible Application Markup Language (XAML). Toutefois, le Windows Software Development Kit (SDK) inclut une application (XAMLPad) conçue pour accélérer le processus d'implémentation d'une interface utilisateur basée sur XAML. Vous pouvez utiliser cette application pour afficher et vous entraîner avec les premiers exemples de ce document. Le processus de création d'applications compilées avec XAML est expliqué plus loin dans ce document.

Pour lancer XAMLPad, cliquez sur le menu Démarrer, pointez sur Tous les programmes, sur Kit de développement logiciel Microsoft Windows, sur Outils, puis cliquez sur XAMLPad. Dans le volet de rendu, XAMLPad restitue le code XAML entré dans le volet de code. Lorsque vous modifiez le code XAML, les modifications apparaissent immédiatement dans le volet de rendu.

Vous avez de l'encre ?

Pour démarrer votre première application WPF prenant en charge l'encre :

Ouvrez Microsoft Visual Studio 2005.
Créez une nouvelle Application Windows (WPF).
Tapez <InkCanvas/> entre les balises <Grid>.
Appuyez sur F5 pour lancer votre application dans le débogueur.
À l'aide d'un stylet ou d'une souris, écrivez hello world dans la fenêtre.

Vous avez écrit l'équivalent d'une application « hello world » à l'encre avec 12 séquences de touches seulement !

Comment enrichir votre application

Tirez parti de certaines fonctionnalités du WPF. Remplacez tout ce qui se trouve entre les balises <Window> (ouverture) et </Window> (fermeture) par le balisage suivant afin d'obtenir un arrière-plan au pinceau à dégradé sur votre surface d'encrage.

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

Utilisation d'animations

Pour vous amuser, animez les couleurs du pinceau à dégradé. Ajoutez le code XAML suivant après la balise de fermeture </InkCanvas> mais avant la balise de fermeture </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>

Ajout de code après XAML

Tandis que XAML facilite la conception de l'interface utilisateur, toutes les applications réelles doivent ajouter du code pour gérer des événements. Voici un exemple simple effectuant un zoom sur l'encre en réponse à un clic avec le bouton droit de la souris :

Définissez le gestionnaire MouseRightButtonUp dans votre code XAML :

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

Dans l'Explorateur de solutions de Visual Studio, développez Windows1.xaml et ouvrez le fichier code-behind, Window1.xaml.cs ou Window1.xaml.vb si vous utilisez Visual Basic. Ajoutez le code du gestionnaire d'événements suivant :

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

Vous pouvez alors exécuter votre application. Ajoutez de l'encre, puis cliquez avec le bouton droit de la souris ou effectuez l'opération équivalente en appuyant sur le stylet et en le maintenant enfoncé.

Utilisation du code procédural au lieu du code XAML

Vous pouvez accéder à toutes les fonctionnalités WPF depuis le code procédural. Voici une application « Hello Ink World » pour WPF qui n'utilise pas du tout de XAML. Collez le code ci-dessous dans une application console vide de Visual Studio. Ajoutez des références aux assemblys PresentationCore, PresentationFramework et WindowsBase et générez l'application en appuyant sur 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();
    }
}