간단한 C++/WinRT Windows UI 라이브러리 예제A simple C++/WinRT Windows UI Library example

이 항목에서는 간단한 WinUI(Windows UI) 라이브내러리 지원을 C++/WinRT 프로젝트에 추가하는 과정을 안내합니다.This topic walks you through the process of adding simple support for the Windows UI (WinUI) Library to your C++/WinRT project. 덧붙여 말해, Windows UI 라이브러리 자체는 C++/WinRT로 작성됩니다.Incidentally, the Windows UI Library is itself written in C++/WinRT.

참고

이 항목에서 알 수 있듯이 WinUI(Windows UI) 라이브러리 도구 키트는 Visual Studio를 사용하여 기존 또는 새 프로젝트에 추가할 수 있는 NuGet 패키지로 사용할 수 있습니다.The Windows UI (WinUI) Library toolkit is available as NuGet packages that you can add to any existing or new project using Visual Studio, as we'll see in this topic. 자세한 배경, 설정 및 지원 정보는 Windows UI 라이브러리 시작을 참조하세요.For more background, setup, and support info, see Getting started with the Windows UI Library.

비어 있는 앱(HelloWinUICppWinRT) 만들기Create a Blank App (HelloWinUICppWinRT)

Visual Studio에서 비어 있는 앱(C++/WinRT) 프로젝트 템플릿을 사용하여 새 프로젝트를 만듭니다.In Visual Studio, create a new project using the Blank App (C++/WinRT) project template. (유니버설 Windows) 템플릿이 아닌 (C++/WinRT) 템플릿을 사용하고 있는지 확인합니다.Make sure that you're using the (C++/WinRT) template, and not the (Universal Windows) one.

새 프로젝트의 이름을 HelloWinUICppWinRT로 설정하고 폴더 구조가 연습과 일치하도록 솔루션 및 프로젝트를 같은 디렉터리에 배치를 선택 취소합니다.Set the name of the new project to HelloWinUICppWinRT, and (so that your folder structure will match the walkthrough) uncheck Place solution and project in the same directory.

Microsoft.UI.Xaml NuGet 패키지 설치Install the Microsoft.UI.Xaml NuGet package

프로젝트 > NuGet 패키지 관리... 를 클릭합니다. > 찾아보기를 차례로 클릭하고, 검색 상자에서 Microsoft.UI.Xaml을 입력하거나 붙여넣고, 검색 결과에서 해당 항목을 선택한 다음, 설치를 클릭하여 패키지를 프로젝트에 설치합니다(사용권 계약 프롬프트도 표시됨).Click Project > Manage NuGet Packages... > Browse, type or paste Microsoft.UI.Xaml in the search box, select the item in search results, and then click Install to install the package into your project (you'll also see a license agreement prompt). Microsoft.UI.Xaml.Core.Direct가 아니라 Microsoft.UI.Xaml 패키지만 설치하도록 주의하세요.Be careful to install only the Microsoft.UI.Xaml package, and not Microsoft.UI.Xaml.Core.Direct.

WinUI 애플리케이션 리소스 선언Declare WinUI application resources

App.xaml을 열고, 기존의 열고 닫는 Application 태그 사이에 다음 태그를 붙여넣습니다.Open App.xaml and paste the following markup between the existing opening and closing Application tags.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>

MainPage에 WinUI 컨트롤 추가Add a WinUI control to MainPage

다음으로 MainPage.xaml을 엽니다.Next, open MainPage.xaml. 기존의 여는 Page 태그에는 몇 가지 xml 네임스페이스 선언이 있습니다.In the existing opening Page tag there are some xml namespace declarations. xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xml 네임스페이스 선언을 추가합니다.Add the xml namespace declaration xmlns:muxc="using:Microsoft.UI.Xaml.Controls". 그런 다음, 기존의 열고 닫는 Page 태그 사이에서 기존 StackPanel 요소를 덮어쓰면서 다음 태그를 붙여넣습니다.Then, paste the following markup between the existing opening and closing Page tags, overwriting the existing StackPanel element.

<muxc:NavigationView PaneTitle="Welcome">
    <TextBlock Text="Hello, World!" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
</muxc:NavigationView>

필요에 따라 pch.h 편집Edit pch.h, as necessary

NuGet 패키지(예: 이전에 추가한 Microsoft.UI.Xaml 패키지)를 C++/WinRT 프로젝트에 추가하고 프로젝트를 빌드하면 도구에서 일단의 프로젝션 헤더 파일을 프로젝트의 \Generated Files\winrt 폴더에 생성합니다.When you add a NuGet package to a C++/WinRT project (such as the Microsoft.UI.Xaml package, which you added earlier), and build the project, the tooling generates a set of projection header files in your project's \Generated Files\winrt folder. 연습을 수행하고 나면 이제 \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt 폴더가 생깁니다.If you've followed along with the walkthrough, you'll now have a \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt folder. 이러한 헤더 파일을 프로젝트로 가져와서 새 형식에 대한 참조가 확인되도록 하려면 미리 컴파일된 헤더 파일(일반적으로 pch.h)로 이동하여 포함시킬 수 있습니다.To bring those headers files into your project, so that references to those new types resolve, you can go into your precompiled header file (typically pch.h) and include them.

사용하는 형식에 해당하는 헤더만 포함해야 합니다.You need to include only the headers that correspond to the types that you use. 하지만, 여기에 있는 것은 Microsoft.UI.Xaml 패키지에 대해 생성된 모든 헤더 파일이 포함된 예제입니다.But here's an example that includes all of the generated header files for the Microsoft.UI.Xaml package.

// pch.h
...
#include "winrt/Microsoft.UI.Xaml.Automation.Peers.h"
#include "winrt/Microsoft.UI.Xaml.Controls.h"
#include "winrt/Microsoft.UI.Xaml.Controls.Primitives.h"
#include "winrt/Microsoft.UI.Xaml.Media.h"
#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
...

MainPage.cpp 편집Edit MainPage.cpp

myButton이 더 이상 XAML 태그에 없으므로 MainPage.cpp에서 MainPage::ClickHandler 구현 내의 코드를 삭제합니다.In MainPage.cpp, delete the code inside your implementation of MainPage::ClickHandler, since myButton is no longer in the XAML markup.

이제 프로젝트를 빌드하고 실행할 수 있습니다.You can now build and run the project.

간단한 C++/WinRT Windows UI 라이브러리의 스크린샷