Condividi tramite

Win2D "Hello, World!" guide rapide

  • Articolo

In questo argomento si creerà un progetto "Hello, World!" molto semplice per Win2D..

In Visual Studio creare un nuovo progetto da uno dei modelli di progetto seguenti:

  • WinUI 3 (SDK per app di Windows). Per creare un nuovo progetto WinUI 3, usa il modello di progetto App vuota In pacchetto (WinUI 3 in Desktop. È possibile trovare il modello di progetto scegliendo il linguaggio C# o C++; piattaforma: Windows; tipo di progetto: Desktop.
  • La piattaforma universale di Windows (UWP). Per creare un nuovo progetto UWP, usa il modello di progetto App vuota (Windows universale) o App vuota (C++/WinRT) o App vuota (Windows universale - C++/CX). Per il linguaggio, scegliere: C# or C++; piattaforma: Windows; tipo di progetto: UWP.

Importante

Per informazioni su come configurare il progetto per l'uso di Win2D, vedi Fare riferimento al pacchetto NuGet Win2D.

Per ospitare contenuti Win2D, dovrai aggiungere un oggetto CanvasControl al progetto MainWindow.xaml (o MainPage.xaml, per un progetto UWP).

Aggiungere prima di tutto la seguente dichiarazione dello spazio dei nomi XML:

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

Aggiungere quindi un oggetto CanvasControl, preceduto da tale spazio dei nomi xml. Ad esempio, è possibile aggiungere una griglia come radice del layout, come illustrato di seguito:

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

Il progetto non verrà realizzato in questo momento, a causa del gestore eventi Draw a cui si fa riferimento, ma che non è stato implementato. A questo punto, si aggiungerà un codice di disegno per interagire con CanvasControl.

Per un progetto WinUI 3 (SDK per app di Windows)

Per un progetto C#, aggiungere il seguente gestore eventi in 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);
    }
}
...

Per un progetto C++/WinRT, aggiungere il seguente gestore di eventi in MainWindow.xaml.h e 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());
    }
}

A questo punto puoi compilare ed eseguire il progetto. Vedrai alcuni contenuti Win2D, un'ellisse nera con un messaggio giallo "Hello, World!" davanti a esso.

Per un progetto UWP

Per un progetto C# è possibile usare lo stesso codice C# di un progetto WinUI 3 (vedere la sezione "Per un progetto WinUI 3" di cui sopra). Le uniche differenze sono che verranno modificate MainPage.xaml.cs invece di MainWindow.xaml.cs. E sarà necessario passare Microsoft.UI.Colors a Windows.UI.Colors.

Per un progetto C++/WinRT aggiungere il codice seguente in pch.h, MainPage.he 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());
    }
}

Per un progetto C++/CX aggiungere il seguente gestore eventi in MainPage.xaml.h e 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);
}

Vedi anche