Win2D "Hello, World!" 快速入門
在本主題中，您將為 Win2D 建立非常簡單的 "Hello, World!" 專案。
在 Visual Studio，從下列專案範本建立一個新專案：
- WinUI 3 (Windows 應用程式 SDK)。 若要建立新的 WinUI 3 專案，請使用 [已封裝的空白應用程式 (WinUI 3 in Desktop)] 專案範本。 您可以選擇語言來找到該專案範本：C# 或 C++；平台：Windows；專案類型：桌面。
- 通用 Windows 平台 (UWP)。 若要建立新的 UWP 專案，請使用 [空白應用程式 (通用 Windows)] 或 [空白應用程式 (C++/WinRT)] 或 [空白應用程式 (通用 Windows - C++/CX)] 專案範本。 針對語言，請選擇：C# 或 C++；平台：Windows；專案類型：UWP。
重要
如需如何設定專案以使用 Win2D 的資訊，請參閱參考 Win2D NuGet 套件。
若要裝載 Win2D 內容，您必須將 Win2D CanvasControl 新增至專案的 MainWindow.xaml (或 MainPage.xaml，如為 UWP 專案)。
首先，加入以下 xml 命名空間宣告：
xmlns:win2dcanvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
然後新增 CanvasControl，前面加上該 xml 命名空間。 例如，您可以將 Grid 新增為版面配置根目錄，如下所示：
<Grid>
<win2dcanvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue"/>
</Grid>
由於已參考但未實作的 Draw 事件處理常式，專案目前不會建置。 因此，接下來我們會補救這一點，同時新增一些繪圖程式碼來與 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);
}
