Freigeben über

Win2D „Hello, World!“ – Schnellstart

  • Artikel

In diesem Thema erstellen Sie ein sehr einfaches Projekt „Hello, World!“ für Win2D.

Erstellen Sie in Visual Studio ein neues Projekt aus einer der folgenden Projektvorlagen:

  • WinUI 3 (Windows App SDK). Verwenden Sie zum Erstellen eines neuen WinUI 3-Projekts die Projektvorlage Leere App, verpackt (WinUI 3 in Desktop). Sie können diese Projektvorlage finden, indem Sie eine Sprache auswählen: entweder C# oder C++; Plattform: Windows; Projekttyp: Desktop.
  • Universelle Windows-Plattform (UWP). Verwenden Sie zum Erstellen eines neuen UWP-Projekts die Projektvorlage Leere App (Universelle Windows-App) oder Leere App (C++/WinRT) oder Leere App (Universelle Windows - C++/CX). Wählen Sie für die Sprache entweder C# oder C++; Plattform: Windows; Projekttyp: UWP.

Wichtig

Informationen zum Einrichten des Projekts für die Verwendung von Win2D finden Sie unter Referenz zum Win2D-NuGet-Paket.

Zum Hosten von Win2D-Inhalten müssen Sie dem MainWindow.xaml (oder MainPage.xaml für ein UWP-Projekt) Ihres Projekt ein Win2D CanvasControl hinzufügen.

Fügen Sie zunächst die folgende XML-Namespacedeklaration hinzu:

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

Und fügen Sie dann ein CanvasControl hinzu, dem dieser XML-Namespace vorangestellt ist. Sie können z. B. ein Raster als Layoutstamm hinzufügen, z. B. wie folgt:

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

Das Projekt wird derzeit nicht kompiliert, da auf den referenzierten, aber nicht implementierten Draw-Ereignishandler verwiesen wird. Daher beheben wir dies als Nächstes, während wir einen Zeichnungscode für die Interaktion mit CanvasControl hinzufügen.

Für ein WinUI 3 (Windows App SDK)-Projekt

Fügen Sie für ein C#-Projekt den folgenden Ereignishandler zu MainWindow.xaml.cs hinzu;

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

Fügen Sie für ein C++/WinRT-Projekt den folgenden Ereignishandler zu MainWindow.xaml.h und MainWindow.xaml.cpp hinzu:

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

Jetzt kannst du das Projekt kompilieren und ausführen. Sie sehen einige Win2D-Inhalte – eine schwarze Ellipse mit einer gelben Nachricht: „Hello, World!“ davor.

Hinzufügen eines UWP-Projekts

Für ein C#-Projekt können Sie den gleichen C#-Code wie für ein WinUI 3-Projekt verwenden (siehe den Abschnitt Für ein WinUI 3-Projekt oben). Die einzigen Unterschiede sind, dass Sie MainPage.xaml.cs anstelle von MainWindow.xaml.cs bearbeiten. Und Sie müssen Microsoft.UI.Colors zu Windows.UI.Colors ändern.

Fügen Sie für ein C++/WinRT-Projekt den folgenden Code zu pch.h, MainPage.h und MainPage.cpp hinzu:

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

Fügen Sie für ein C++/CX-Projekt den folgenden Ereignishandler zu MainPage.xaml.h und MainPage.xaml.cpp hinzu:

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

Weitere Informationen