Compartilhar via

Início rápido do Win2D "Olá, Mundo!"

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

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

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

Importante

Para obter informações sobre como configurar seu projeto para usar o Win2D, consulte 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 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 um Grid como elemento raiz para o 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, corrigiremos isso em seguida, enquanto adicionamos algum código de desenho para interagir com o CanvasControl.

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

Para um projeto em 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ê pode compilar e executar o projeto. Você verá algum conteúdo Win2D — uma elipse preta com uma mensagem amarela "Olá, Mundo!" na frente dela.

Para um projeto UWP

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

Para um projeto C++/WinRT, adicione o seguinte código aos marcadores 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);
}

Consulte Também