Partager via

Démarrage rapide Win2D « Hello, World! »

  • Article

Dans cette rubrique, vous allez créer un projet très simple « Hello, World! » pour Win2D.

Dans Visual Studio, créez un nouveau projet à partir de l’un des modèles de projet suivants :

  • WinUI 3 (SDK d’application Windows). Pour créer un projet WinUI 3, utilisez le modèle de projet Blank App, Packaged (WinUI 3 in Desktop). Vous pouvez trouver ce modèle de projet en choisissant le langage : C# ou C++ ; plateforme : Windows ; type de projet : Bureau.
  • Plateforme Windows universelle (UWP). Pour créer un projet UWP, utilisez le modèle de projet Application vide (Windows universel), Application vide (C++/WinRT) ou Application vide (Windows universel - C++/CX). Pour le langage, choisissez : C# ou C++ ; plateforme : Windows ; type de projet : UWP.

Important

Pour plus d’informations sur la configuration de votre projet pour utiliser Win2D, consultez Référencer le package NuGet Win2D.

Pour héberger du contenu Win2D, vous devez ajouter un CanvasControl Win2D au fichier MainWindow.xaml de votre projet (ou MainPage.xaml pour un projet UWP).

Tout d’abord, ajoutez la déclaration d’espace de noms xml suivante :

xmlns:win2dcanvas="using:Microsoft.Graphics.Canvas.UI.Xaml"

Ajoutez ensuite un CanvasControl, précédé de cet espace de noms xml. Par exemple, vous pourriez ajouter une grille en tant que racine de disposition, comme suit :

<Grid>
    <win2dcanvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
</Grid>

Le projet ne sera pas généré pour le moment, en raison du gestionnaire d’événements Draw référencé mais non implémenté. Nous allons donc remédier ensuite à cela, tandis que nous ajoutons du code de dessin pour interagir avec CanvasControl.

Pour un projet WinUI 3 (SDK d’application Windows)

Pour un projet C#, ajoutez le gestionnaire d’événements suivant à MainWindow.xaml.cs :

// MainWindow.xaml.cs
...
public sealed partial class MainWindow : Window
{
    ...
    void CanvasControl_Draw(
        Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
        Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
    {
        args.DrawingSession.DrawEllipse(155, 115, 80, 30, Microsoft.UI.Colors.Black, 3);
        args.DrawingSession.DrawText("Hello, Win2D World!", 100, 100, Microsoft.UI.Colors.Yellow);
    }
}
...

Pour un projet C++/WinRT, ajoutez le gestionnaire d’événements suivant à MainWindow.xaml.h et MainWindow.xaml.cpp :

// MainWindow.xaml.h
...
void CanvasControl_Draw(
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args);
...

// MainWindow.xaml.cpp
...
namespace winrt::MYPROJECT::implementation
{
    ...
    void MainWindow::CanvasControl_Draw(
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args)
    {
        args.DrawingSession().DrawEllipse(155, 115, 80, 30, winrt::Microsoft::UI::Colors::Black(), 3);
        args.DrawingSession().DrawText(L"Hello, Win2D World!", 100, 100, winrt::Microsoft::UI::Colors::Yellow());
    }
}

Vous pouvez à présent lancer le processus de génération et exécuter le projet. Vous verrez du contenu Win2D : une ellipse noire avec un message jaune « Hello, World! » devant.

Pour un projet UWP

Pour un projet C#, vous pouvez utiliser le même code C# que pour un projet WinUI 3 (voir la section Pour un projet WinUI 3 ci-dessus). Les seules différences sont que vous allez modifier MainPage.xaml.cs au lieu de MainWindow.xaml.cs. Et vous devrez remplacer Microsoft.UI.Colors par Windows.UI.Colors.

Pour un projet C++/WinRT, ajoutez le code suivant à pch.h, MainPage.het MainPage.cpp :

// pch.h
...
#include <winrt/Microsoft.Graphics.Canvas.UI.Xaml.h>

// MainPage.h
...
void CanvasControl_Draw(
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
    winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args);
...

// MainPage.cpp
...
namespace winrt::MYPROJECT::implementation
{
    ...
    void MainPage::CanvasControl_Draw(
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const& sender,
        winrt::Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs const& args)
    {
        args.DrawingSession().DrawEllipse(155, 115, 80, 30, winrt::Windows::UI::Colors::Black(), 3);
        args.DrawingSession().DrawText(L"Hello, Win2D World!", 100, 100, winrt::Windows::UI::Colors::Yellow());
    }
}

Pour un projet C++/CX, ajoutez le gestionnaire d’événements suivant à MainPage.xaml.h et MainPage.xaml.cpp :

// MainPage.xaml.h
...
void CanvasControl_Draw(
	Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
	Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args);
...

// MainWindow.xaml.cpp
...
void MainPage::CanvasControl_Draw(
    Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl^ sender,
    Microsoft::Graphics::Canvas::UI::Xaml::CanvasDrawEventArgs^ args)
{
    args->DrawingSession->DrawEllipse(155, 115, 80, 30, Windows::UI::Colors::Black, 3);
    args->DrawingSession->DrawText("Hello, Win2D World!", 100, 100, Windows::UI::Colors::Yellow);
}

Voir aussi