Partager via

Démarrage rapide Win2D « Hello, World ! »

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

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

  • WinUI 3 (Kit de développement logiciel (SDK) d’application Windows. Pour créer un projet WinUI 3, utilisez le modèle de projet Application vide, Empaqueté (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) ou Application vide (C++/WinRT) ou Application vide (Windows universel - C++/CX). Pour la langue, 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 à votre projet MainWindow.xaml (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 pouvez ajouter une grille en tant que racine de disposition, comme suit :

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

Le projet ne peut pas être compilé pour le moment en raison du gestionnaire d’événements Draw, qui est référencé mais non implémenté. Nous allons donc remédier à cette étape, tandis que nous ajoutons du code de dessin pour interagir avec CanvasControl.

Pour un projet WinUI 3 (Kit de développement logiciel (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 maintenant générer et exécuter le projet. Vous verrez du contenu Win2D, une ellipse noire avec un message jaune « Bonjour, le monde ! » 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 passer Microsoft.UI.Colors à 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