Inicio rápido de Win2D "Hola, mundo"
En este tema creará un proyecto "Hola, mundo" muy sencillo para Win2D.
En Visual Studio, cree un nuevo proyecto a partir de una de las siguientes plantillas de proyecto:
- WinUI 3 (SDK de aplicaciones de Windows). Para crear un nuevo proyecto de WinUI 3, use la plantilla de proyecto Aplicación vacía, empaquetada (WinUI 3 en escritorio). Para encontrar esa plantilla de proyecto, elija lenguaje: C# o C++; plataforma: Windows; tipo de proyecto: Escritorio.
- Plataforma universal de Windows (UWP). Para crear un nuevo proyecto para UWP, usa la plantilla de proyecto Aplicación vacía (Windows universal) o Aplicación vacía (C++/WinRT) o Aplicación vacía (Windows universal - C++/CX). En lenguaje, elija: C# o C++; plataforma: Windows; tipo de proyecto: UWP.
Importante
Para obtener información acerca de cómo configurar el proyecto para usar Win2D, consulte Referencia al paquete NuGet Win2D.
Para hospedar contenido Win2D, tendrá que agregar un CanvasControl win2D a los proyectos MainWindow.xaml (o MainPage.xaml, para un proyecto de UWP).
En primer lugar, agregue la siguiente declaración de espacio de nombres xml:
xmlns:win2dcanvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
Y luego agregar un CanvasControl, prefijado con ese espacio de nombres xml. Por ejemplo, puede agregar una Cuadrícula como raíz del diseño, como se muestra a continuación:
<Grid>
<win2dcanvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
</Grid>
El proyecto no se compilará en este momento, debido al controlador de eventos Draw al que se hace referencia, pero no se ha implementado. Por lo tanto, lo solucionaremos a continuación, mientras agregamos código de dibujo para interactuar con CanvasControl.
Para un proyecto de WinUI 3 (Windows App SDK)
Para un proyecto de C#, agregue el siguiente controlador 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 un proyecto de C++/WinRT, agregue el siguiente controlador de eventos a MainWindow.xaml.h y 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());
}
}
Ahora puedes compilar y ejecutar el proyecto. Verás contenido Win2D, un elipse negro con un mensaje amarillo "Hola mundo" delante de él.
Para un proyecto de UWP
Para un proyecto de C#, puede usar el mismo código de C# que para un proyecto de WinUI 3 (vea la sección Para un proyecto de WinUI 3 anterior). Las únicas diferencias son que editarás MainPage.xaml.cs en lugar de MainWindow.xaml.cs. Y tendrá que cambiar Microsoft.UI.Colors a Windows.UI.Colors.
Para un proyecto de C++/WinRT, agregue el siguiente código a pch.h, MainPage.h y 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 un proyecto de C++/CX, agregue el siguiente controlador de eventos a MainPage.xaml.h y 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);
}
