Поделиться через

Краткое руководство по Win2D "Hello, World!"

  • Статья

В этом разделе вы создадите очень простой проект "Hello, World!" для Win2D.

В Visual Studio создайте проект из одного из следующих шаблонов проектов:

  • WinUI 3 (пакет SDK для приложений Windows) Чтобы создать новый проект WinUI 3, используйте шаблон проекта "Пустое приложение" (WinUI 3 в desktop). Этот шаблон проекта можно найти, выбрав язык: C# или C++; платформа: Windows; тип проекта: Desktop.
  • универсальная платформа Windows (UWP). Чтобы создать проект UWP, используйте шаблон проекта пустого приложения (универсального приложения Windows) или пустого приложения (C++/WinRT) или пустого приложения (универсальное приложение windows — C++/CX). Для языка выберите платформу C# или C++: Windows; тип проекта: UWP.

Внимание

Сведения о настройке проекта для использования Win2D см. в статье "Справочник по пакету NuGet Win2D".

Чтобы разместить содержимое Win2D, необходимо добавить Win2D CanvasControl в проект MainWindow.xaml (или MainPage.xamlдля проекта UWP).

Сначала добавьте следующее объявление пространства имен XML:

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

Затем добавьте CanvasControl, префиксированную с этим пространством имен XML. Например, вы можете добавить сетку в качестве корневого каталога макета, как показано ниже.

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

Проект не будет создаваться в данный момент из-за обработчика событий Draw со ссылкой, но не реализован. Поэтому мы исправим следующее, пока добавим код рисования для взаимодействия с CanvasControl.

Для проекта WinUI 3 (пакет SDK для приложений Windows)

Для проекта C# добавьте следующий обработчик 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);
    }
}
...

Для проекта C++/WinRT добавьте следующий обработчик MainWindow.xaml.h событий в и 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());
    }
}

Теперь выполните сборку и запустите проект. Вы увидите некоторое содержимое Win2D — черное многоточие с желтым сообщением "Hello, World!" перед ним.

Для проекта UWP

Для проекта C# можно использовать тот же код C#, что и для проекта WinUI 3 (см . раздел проекта WinUI 3 выше). Единственное различие заключается в том, что вы будете редактировать MainPage.xaml.cs вместо MainWindow.xaml.csэтого. И вам потребуется измениться Microsoft.UI.Colors Windows.UI.Colors.

Для проекта C++/WinRT добавьте следующий код в pch.hиMainPage.hMainPage.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());
    }
}

Для проекта C++/CX добавьте следующий обработчик MainPage.xaml.h событий в и 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);
}

См. также