通过

Win2D“Hello, World!”快速入门

  • 项目

在本主题中，你将为 Win2D 创建一个非常简单的“Hello, World!”项目。

在 Visual Studio 中，根据以下项目模板之一创建新项目：

  • WinUI 3（Windows 应用 SDK）。 要创建新的 WinUI 3 项目，请使用“空白应用，打包（桌面中的 WinUI 3）”项目模板。 可以通过选择语言（C# 或 C++）；平台：Windows；项目类型：桌面来查找项目模板。
  • 通用 Windows 平台 (UWP)。 要创建新的 UWP 项目，请使用空白应用（通用 Windows）、空白应用 (C++/WinRT) 或空白应用（通用 Windows - C++/CX）项目模板。 对于语言，请选择：C# 或 C++；平台：Windows；项目类型：UWP。

重要

有关如何设置项目以使用 Win2D 的信息，请参阅引用 Win2D NuGet 包。

要托管 Win2D 内容，需要将 Win2D CanvasControl 添加到项目的 MainWindow.xaml（对于 UWP 项目则为 MainPage.xaml）。

首先，添加以下 xml 命名空间声明：

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

然后添加一个 CanvasControl，其前缀为该 xml 命名空间。 例如，可以将网格添加为布局根目录，如下所示：

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

由于已引用但未实现的绘图事件处理程序，目前不会生成项目。 因此，我们将在接下来添加一些绘图代码以与 CanvasControl 交互时修正该问题。

对于 WinUI 3（Windows 应用 SDK） 项目

对于 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# 项目，可以使用与 WinUI 3 项目相同的 C# 代码（请参阅上面的对于 WinUI 3 项目部分）。 唯一的区别在于要编辑 MainPage.xaml.cs 而不是 MainWindow.xaml.cs。 并且需要将 Microsoft.UI.Colors 更改为 Windows.UI.Colors。

对于 C++/WinRT 项目，请将以下代码添加到 pch.h、MainPage.h 和 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());
    }
}

对于 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);
}

另请参阅