다음을 통해 공유

Win2D "Hello, World!" 빠른 시작

  • 아티클

이 항목에서는 Win2D에 대한 매우 간단한 "Hello, World!" 프로젝트를 만듭니다.

Visual Studio에서 다음 프로젝트 템플릿 중 하나를 사용하여 새 프로젝트를 만듭니다:

  • WinUI 3 (Windows 앱 SDK). "빈 앱, 패키지(데스크톱의 WinUI 3)" 프로젝트 템플릿을 사용하여 새 WinUI 3 프로젝트를 만듭니다. C# or C++; 플랫폼:Windows; 프로젝트 형식: 데스크톱 언어를 선택하여 해당 프로젝트 템플릿을 찾을 수 있습니다.
  • UWP(유니버설 Windows 플랫폼) 새 UWP 프로젝트를 만들려면 빈 앱(유니버설 Windows) 또는 빈 앱(C++/WinRT) 또는 빈 앱(유니버설 Windows - C++/CX) 프로젝트 템플릿을 사용합니다. 언어의 경우 C# 또는 C++; 플랫폼: Windows; 프로젝트 형식: UWP를 선택합니다.

Important

Win2D를 사용하도록 프로젝트를 설정하는 방법에 대한 자세한 내용은 Win2D NuGet 패키지 참조를 참조하세요.

Win2D 콘텐츠를 호스트하려면 프로젝트의 MainWindow.xaml(또는 UWP 프로젝트의 경우 MainPage.xaml)에 Win2D CanvasControl을 추가해야 합니다.

먼저 다음 xml 네임스페이스 선언을 추가합니다.

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

그런 다음, 해당 xml 네임스페이스가 접두사로 지정된 CanvasControl을 추가합니다. 예를 들어 다음과 같이 Grid를 레이아웃 루트로 추가할 수 있습니다.

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

참조되었지만 구현되지 않은 Draw 이벤트 처리기로 인해 현재 프로젝트가 빌드되지 않습니다. 따라서 CanvasControll과 상호 작용하는 몇 가지 그리기 코드를 추가하는 동안 이 문제를 해결하겠습니다.

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());
    }
}

이제 프로젝트를 빌드하고 실행할 수 있습니다. 앞에 노란색 "Hello, World!" 메시지가 표시된 검은색 줄임표인 일부 Win2D 콘텐츠가 표시됩니다.

UWP 프로젝트의 경우

C# 프로젝트의 경우 WinUI 3 프로젝트와 동일한 C# 코드를 사용할 수 있습니다(위의 WinUI 3 프로젝트 섹션 참조). 유일한 차이점은 MainWindow.xaml.cs 대신 MainPage.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);
}

참고 항목