Compartilhar via

Início rápido do projeto “Olá, Mundo!” do Win2D

  • Artigo

Neste tópico, você criará um projeto “Olá, Mundo!” muito simples para o Win2D.

No Visual Studio, crie um novo projeto com base em um dos seguintes modelos de projeto:

  • WinUI 3 (SDK do Aplicativo Windows). Para criar um novo projeto do WinUI 3, use o modelo de projeto do Aplicativo em branco, empacotado (WinUI 3 na Área de trabalho). Você pode encontrar esse modelo de projeto escolhendo a linguagem: C# ou C++; plataforma: Windows; tipo de projeto: Área de trabalho.
  • UWP (Plataforma Universal do Windows). Para criar um novo projeto da UWP, use o Aplicativo em branco (Universal do Windows) ou o Aplicativo em branco (C++/WinRT) ou o modelo de projeto do Aplicativo em branco (Universal do Windows - C++/CX). Para a linguagem, escolha: C# ou C++; plataforma: Windows; tipo de projeto: UWP.

Importante

Para obter informações sobre como configurar seu projeto para usar o Win2D, confira Referência ao pacote NuGet Win2D.

Para hospedar o conteúdo do Win2D, você precisará adicionar um Win2D CanvasControl ao projeto MainWindow.xaml (ou MainPage.xaml, para um projeto da UWP).

Primeiro, adicione a seguinte declaração de namespace xml:

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

Em seguida, adicione um CanvasControl, prefixado com esse namespace xml. Por exemplo, você pode adicionar uma Grade como sua raiz de layout, assim:

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

O projeto não será compilado no momento, devido ao manipulador de eventos Draw referenciado, mas não implementado. Portanto, vamos corrigir isso a seguir, enquanto adicionamos algum código de desenho para interagir com o CanvasControl.

Para um projeto do WinUI 3 (SDK do Aplicativo Windows)

Para um projeto C#, adicione o seguinte manipulador de eventos a 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);
    }
}
...

Para um projeto C++/WinRT, adicione o seguinte manipulador de eventos a 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());
    }
}

Agora você poderá compilar e executar o projeto. Você verá algum conteúdo do Win2D — uma elipse preta com uma mensagem amarela "Olá, Mundo!" na frente dele.

Para um projeto da UWP

Para um projeto C#, você pode usar o mesmo código C# de um projeto do WinUI 3 (confira a seção acima Para um projeto do WinUI 3). As únicas diferenças são que você editará MainPage.xaml.cs em vez de MainWindow.xaml.cs. E você precisará alterar Microsoft.UI.Colors para Windows.UI.Colors.

Para um projeto C++/WinRT, adicione o seguinte código a pch.h, MainPage.h, e 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());
    }
}

Para um projeto C++/CX, adicione o seguinte manipulador de eventos a 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);
}

Confira também