C# 및 WinUI 3/Windows 앱 SDK 사용하여 Hello World 앱 빌드
이 방법에서는 Visual Studio 2022 및 WinUI 3 / Windows 앱 SDK를 사용하여 시작할 때 "Hello world!"를 표시하는 Windows 데스크톱 앱을 빌드합니다.
이 방법은 초보자를 대상으로 하며, Windows 데스크톱 개발에 익숙하다는 가정을 전제로 하지 않습니다.
필수 조건
이 자습서에서는 Visual Studio를 사용하고 WinUI 3 빈 앱 템플릿을 기반으로 빌드합니다. 설정하려면 WinUI 시작의 지침을 따릅니다. Visual Studio를 설치하고, WinUI로 앱을 개발할 수 있도록 구성하고, Hello World 프로젝트를 만들고, 최신 버전의 WinUI가 있는지 확인합니다.
이 작업을 마쳤으면 여기로 돌아와 Hello World 프로젝트에 대해 자세히 알아보고 업데이트하세요.
빈 앱 프로젝트 검토
Visual Studio의 WinUI 프로젝트 템플릿에는 앱을 빌드하고 실행하는 데 필요한 모든 것이 포함되어 있습니다. 빈 앱 템플릿은 디버그 모드에서 실행할 때 다음과 같은 대화형 버튼이 있는 창을 만듭니다.
Click Me 버튼을 클릭하면 이벤트 바인딩 데모를 볼 수 있습니다.
이 경우 버튼 컨트롤의 Click 이벤트는 myButton_Click 이벤트 핸들러(MainWindow.xaml.cs에 위치)에 바인딩됩니다.
MainWindow.xaml.cs에는 기본 창의 비즈니스 논리 관련 내용이 코드 숨김 파일 형태로 포함되어 있지만, 프레젠테이션 관련 내용은 MainWindow.xaml에 있습니다.
이렇게 비즈니스 논리와 프레젠테이션 문제를 분리하면 일관된 애플리케이션 개발 패턴을 통해 애플리케이션의 UI에 데이터와 이벤트를 바인딩할 수 있습니다.
프로젝트의 파일 구조
코드를 변경하기 전에 프로젝트의 파일 구조를 검토해 보겠습니다.
프로젝트의 파일 구조는 아래와 같습니다.
이 표에서는 위에서 시작하여 아래로 내려가며 작업하는 파일에 대해 설명합니다.
| 항목 | 설명 |
|---|---|
Solution 'Hello World' |
이는 솔루션 파일로, 프로젝트의 논리적 컨테이너입니다. 프로젝트는 앱인 경우가 많지만, 클래스 라이브러리를 지원할 수도 있습니다. |
Hello World |
이는 앱 파일의 논리적 컨테이너인 프로젝트 파일입니다. |
Dependencies |
앱은 프레임워크(예: .NET 및 Windows SDK) 그리고 패키지(예: Windows App SDK 앱 SDK)에 따라 좌우됩니다. 앱에 더 정교한 기능과 타사 라이브러리를 도입하면 여기에 추가 종속성이 나타납니다. |
Properties |
규칙에 따라 WinUI 3 프로젝트는 이 폴더에 게시 프로필 및 실행 구성 파일을 배치합니다. |
PublishProfiles |
게시 프로필은 광범위한 플랫폼에서 앱의 게시 구성을 지정합니다. |
launchSettings.json |
이 파일로 시작 프로필, 즉 dotnet run을(를) 통해 앱을 시작할 때 사용 가능한 프로필을 구성할 수 있습니다. |
Assets |
이 폴더에는 앱의 로고, 이미지 및 기타 미디어 자산이 포함되어 있습니다. |
app.manifest |
이 앱 매니페스트 파일에는 사용자의 장치에 앱 설치 시 Windows에서 앱을 표시하는 방식과 관련한 구성이 포함됩니다. |
App.xaml |
이 표시 파일은 앱이 의존하는 공유되고 전역적으로 액세스 가능한 리소스를 지정합니다. |
App.xaml.cs |
이 코드 숨김 파일은 앱의 비즈니스 논리에 대한 진입점을 나타냅니다. 이는 MainWindow의 인스턴스를 만들고 활성화하는 역할을 합니다. |
MainWindow.xaml |
이 표시 파일에는 앱의 기본 창에 대한 프레젠테이션 문제가 포함됩니다. |
MainWindow.xaml.cs |
이 코드 숨김 파일에는 앱의 기본 창과 관련된 비즈니스 논리 문제가 포함됩니다. |
Package.appxmanifest |
이 패키지 매니페스트 파일을 통해 Windows 스토어에 게시자 정보, 로고, 프로세서 아키텍처 및 앱이 표시되는 방식을 결정하는 기타 세부 정보를 구성할 수 있습니다. |
"Hello world!" 표시
MainWindow.xaml(으)로 이동하여 "Click me" 단추 대신 "Hello world!"를 표시합니다. StackPanel 컨트롤의 XAML 표시가 나타나야 합니다.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>
팁
Windows 앱을 빌드하는 동안 API 참조 문서를 자주 참고해야 합니다. StackPanel의 참조 문서에서 StackPanel 컨트롤의 상세 내용과 사용자 지정 방법을 확인할 수 있습니다.
빨간색 텍스트로 StackPanel 컨트롤을 업데이트해 Hello world!을(를) 표시해 보겠습니다.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>
지금 앱을 실행하려고 하면 Visual Studio에서 The name 'myButton' does not exist in the current context 등의 오류가 발생합니다. 이는 새 컨트롤로 프레젠테이션 계층을 업데이트했지만, 코드 숨김 파일에서 이전 컨트롤의 비즈니스 논리를 업데이트하지 않았기 때문입니다.
MainWindow.xaml.cs(으)로 이동하여 myButton_Click 이벤트 처리기를 삭제합니다. 대화형 Click me 단추를 정적 Hello world! 텍스트로 대체했기 때문에 이것이 가능합니다. 이제 기본 창의 비즈니스 논리는 다음과 같습니다.
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
}
// ↓ you can delete this ↓
//private void myButton_Click(object sender, RoutedEventArgs e)
//{
// myButton.Content = "Clicked";
//}
}
앱을 다시 시작하면 빨간색 Hello world!이(가) 표시됩니다.
앱의 제목 표시줄 업데이트
this.Title = "Hello world!";를 MainWindow.xaml.cs 코드 숨김 파일에 추가합니다.
public MainWindow()
{
this.InitializeComponent();
this.Title = "Hello world!"; // <- this is new
}
앱을 다시 시작하면 본문과 제목 표시줄 모두에 Hello world!(이)가 표시됩니다.
축하합니다! 첫 번째 Windows 앱 SDK/WinUI 3 앱을 빌드했습니다.
요약
이 방법에서 달성한 내용은 다음과 같습니다.
- Visual Studio의 프로젝트 템플릿으로 시작했습니다.
- 컨트롤의
Click이벤트를 UI 업데이트에 바인딩하는Button이벤트 처리기가 발생했습니다. - 프레젠테이션 문제와 비즈니스 논리를 분리하는 규칙, 즉 긴밀하게 결합된 XAML 표시 파일과 C# 코드 숨김 파일을 사용하는 데 익숙해졌을 것입니다.
- 기본 WinUI 3 프로젝트 파일 구조를 검토했습니다.
- 새로운
TextBlock컨트롤(StackPanel내)을 지원하기 위해 프레젠테이션 계층(XAML 표시)와 비즈니스 논리(코드 숨김)을 모두 수정했습니다. - You reviewed 참조 문서를 검토하여
StackPanel컨트롤의 속성을 더 깊이 이해했습니다. - 기본 창의 제목 표시줄을 업데이트했습니다.
전체 코드 파일
<!-- MainWindow.xaml -->
<Window
x:Class="Hello_World.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hello_World"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock x:Name="myText" Text="Hello world!" Foreground="Red"/>
</StackPanel>
</Window>
// MainWindow.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
namespace Hello_World
{
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
this.Title = "Hello world!";
}
}
}
<!-- App.xaml -->
<Application
x:Class="Hello_World.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Hello_World">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
<!-- Other merged dictionaries here -->
</ResourceDictionary.MergedDictionaries>
<!-- Other app resources here -->
</ResourceDictionary>
</Application.Resources>
</Application>
// App.xaml.cs
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;
using Microsoft.UI.Xaml.Navigation;
using Microsoft.UI.Xaml.Shapes;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
namespace Hello_World
{
public partial class App : Application
{
public App()
{
this.InitializeComponent();
}
protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
{
m_window = new MainWindow();
m_window.Activate();
}
private Window m_window;
}
}
FAQ
질문: "패키지된"이란 무슨 의미인가요?
최종 사용자에게 각종 애플리케이션 패키지 형식으로 Windows 앱을 배달할 수 있습니다. WinUI 3/Windows 앱 SDK로 작업할 때, 패키지된 앱은 최종 사용자에게 편리한 설치 및 업데이트를 제공하는 방식에 따라 앱을 번들로 묶기 위해 MSIX를 사용합니다. 배포 아키텍처 및 프레임워크 종속 앱을 방문하여 자세히 알아보세요.
질문: VS Code로 WinUI 3 앱을 빌드할 수 있나요?
기술적으로는 가능하지만, WinUI 3 / Windows 앱 SDK로 데스크톱 앱을 빌드하려면 Visual Studio 2019/2022를 사용하는 것이 좋습니다. Windows 개발자 FAQ에서 자세한 정보를 확인하세요.
질문: C++로 WinUI 3 앱을 빌드할 수 있나요?
예! 자세한 내용은 C++/WinRT 소개를 참조하세요.
관련
Windows developer