UWP 앱 작성 - Training | Microsoft Learn

15분

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Visual Studio의 UWP(유니버설 Windows 플랫폼)는 단일 앱을 데스크톱, 노트북, 태블릿, Xbox, Surface Hub 또는 HoloLens 디바이스 등의 모든 디바이스에서 실행할 수 있는 기술입니다. UWP 개발과 WPF(Windows Presentation Foundation) 개발 사이에는 아주 많은 유사점이 있지만 미묘한 차이점도 있습니다. 이 자습서는 UWP 프로그래밍의 세계를 안내하는 기초 자료이며, 이러한 차이점에 대해 설명합니다.

이 단원에서는 다음 작업을 수행합니다.

Visual Studio를 사용하여 새 UWP 프로젝트를 만듭니다.
UI 및 코드 요소를 프로젝트에 추가하여 "hello world" 프로그램의 재미있는 변형을 만듭니다. Say hello 단추를 선택할 때마다 “Hello there!” 텍스트와 테두리의 색이 임의로 변경됩니다.
속성을 설정하고 이벤트를 만드는 방법에 대해 알아봅니다.

참고

Windows 10 개발 소개 학습 모듈에서 설명된 대로 Windows 및 Visual Studio 2022를 사용하여 컴퓨터를 설정했다고 가정합니다.

UWP "Say hello" 자습서

프로젝트 만들기

Visual Studio를 열고 메뉴에서 파일>새로 만들기>프로젝트를 선택합니다. 그런 다음, 프로젝트 언어로 C#을 선택합니다. 다음으로 빈 앱(유니버설 Windows) 프로젝트 형식을 선택합니다. 이름 필드에 SayHello와 같은 이름을 입력합니다. 완료되면 만들기를 선택합니다.

참고

새 유니버설 Windows 플랫폼 프로젝트 대화 상자에서 UWP의 대상 및 최소 버전을 선택하라는 어려운 옵션이 표시되면 확인을 선택합니다. 기본 선택은 이 프로젝트에 대해 잘 작동합니다.
프로젝트를 열 때 솔루션 탐색기 및 속성 창이 열리는지 확인하는 것이 좋습니다. 기본적으로 해당 창은 Visual Studio의 오른쪽에 있습니다. 보이지 않는 경우 보기 메뉴를 열고 두 항목을 모두 선택합니다.
솔루션 탐색기에서 앞으로 사용할 다음 두 파일의 이름이 표시되는지 확인합니다. MainPage.xaml 및 코드 숨김 파일인 MainPage.xaml.cs MainPage.xaml을 선택하여 엽니다.

UI 디자인

도구 상자가 아직 열려 있지 않으면 보기 메뉴를 선택한 다음, 도구 상자를 선택합니다. 도구 상자에서 공용 XAML 컨트롤을 선택합니다.
Button을 디자이너 레이아웃의 아래쪽 부분으로 끌어갑니다. 그런 다음, TextBox를 레이아웃의 위쪽 부분으로 끌어가고 모서리 약간 바깥쪽으로 끌어가면 다음과 같이 표시됩니다.

참고 항목

단추와 도구 상자 항목이 어떻게 레이아웃 아래에 표시된 XAML 정의의 <그리드>에 추가되는지 확인합니다.
그런 다음, 이 UI 요소에서 일부 속성을 설정하려고 합니다. 단추를 선택하면 해당 속성이 속성 창에 표시됩니다. SayHelloButton과 같이 이름을 간단하게 바꾼 다음, 콘텐츠(공용 확장)를 Say hello로 변경합니다.

참고 항목

Name 속성이 레이아웃 아래에 표시되는 XAML 정의의 단추 항목에 추가되는 것을 확인합니다. 디자이너에서 속성을 변경하면 XAML 정의가 자동으로 업데이트됩니다.
단추에 이벤트를 연결해야 합니다. 단추 자체를 선택하여 연결할 수 있지만 이렇게 하면 디자이너 레이아웃이 필수 상태인 경우에만 작동합니다. 이벤트를 입력하는 더 확실한 방법은 해당 UI 항목에 사용 가능한 이벤트를 여는 것입니다. 속성 창에서 여기 표시된 아이콘을 선택한 다음, Click 이벤트 항목을 선택합니다. 이렇게 하면 자동으로 명명된 이벤트 SayHelloButton_Click이 생성되고, MainPage.xaml.cs 파일에 해당 코드 항목이 추가되고, 파일이 열립니다.
아직 어떤 코드도 입력할 수 없으므로 기본 보기에서 MainPage.xaml을 선택합니다. 계속 UI에 관해 살펴보겠습니다.
디자이너에서 만든 텍스트 상자를 선택하여 해당 속성을 표시합니다. 텍스트 상자의 속성을 약간 변경해 보겠습니다. 이벤트가 속성 창에 표시되는 경우 이름 옆에 있는 렌치 아이콘을 선택하여 명명된 속성으로 돌아갑니다.
이름 항목을 textBox1로 변경한 다음, 레이아웃 속성에서 너비와 높이를 360과 80으로 각각 변경합니다.
레이아웃 섹션을 축소합니다.
텍스트 크기 목록에서 포인트 크기를 36(깔끔하고 눈에 잘 띄게)으로 변경합니다.
기본적으로 텍스트 섹션에 해당하는 A 레이블이 지정된 글꼴 탭이 열립니다. 단락 아이콘을 선택하여 맞춤을 가운데로 변경합니다.
텍스트 섹션을 축소하고 모양을 확장합니다. 모양 속성의 목록에서 맨 아래에 있는 아래쪽 화살표를 선택하여 전체 목록을 표시합니다. 왼쪽과 위쪽 테두리 두께를 1로, 오른쪽과 아래쪽 테두리 두께를 8로 변경합니다. 이제 상자에 약간의 그림자 효과가 있습니다!
모양을 축소하고 공용을 확장합니다. 이제 텍스트 상자에 Hello there!와 같은 친숙한 텍스트를 입력합니다.

앱의 UI 요소를 거의 완료했습니다. XAML 파일의 <Grid> 항목은 다음과 같이 표시됩니다.

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

참고 항목

레코드의 경우 숫자 값을 변경하거나 전체 UI 요소를 편집하여 XAML을 직접 편집할 수 있습니다. 이 자습서에서는 해당 작업을 수행하지 않습니다.

코드 숨김 작성

UI에 대해 살펴봤으므로, 이제 앱용 코드에 대해 살펴보겠습니다. 이제 MainPage.xaml.cs 파일을 다시 엽니다. 기본 보기 위 또는 솔루션 탐색기 파일을 선택합니다. class MainPage는 다음과 같이 표시됩니다.
```
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}
```
모든 필요한 using 문이 있는지 확인해 보겠습니다. 다음 항목이 있는지 확인하고, 없는 경우 추가합니다. 특히 using Windows.UI; 문이 있는지 확인합니다. 파일 편집을 마치면 프로젝트를 만들 때 경우에 따라 Visual Studio에 포함된 모든 불필요한 using 문을 제거할 수 있습니다. 사용하지 않는 네임스페이스는 회색으로 표시됩니다.
```
using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
```

앱은 단추를 선택할 때마다 임의의 색으로 hello 텍스트를 렌더링합니다. 따라서 RGB 설정으로 사용할 값을 임의로 채우는 케이스 차원 Random 개체 및 GetRandomBytes 메서드를 추가해야 합니다. 다음 코드를 복사하여 붙여넣거나 직접 입력합니다. class MainPage는 다음과 같이 표시됩니다.

public sealed partial class MainPage : Page
{
    private Random rand;

    public MainPage()
    {
        this.InitializeComponent();
        rand = new Random();
    }

    private byte[] GetRandomBytes(int n)
    {
        // Fill an array of bytes of length "n" with random numbers.
        var randomBytes = new byte[n];
        rand.NextBytes(randomBytes);
        return randomBytes;
    }

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}

마지막으로 단추 클릭 이벤트에서 GetRandomBytes를 호출하여 반환된 바이트 배열에서 임의의 색을 만든 다음, 텍스트 상자 속성을 해당 색으로 변경합니다. 완성된 SayHelloButton_Click 메서드는 다음과 같이 표시됩니다.

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {
        byte[] rgb = GetRandomBytes(3);

        // Create a solid color brush using the three random numbers.
        var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));

        // Set both the text color and the text box border to the random color.
        textBox1.BorderBrush = randomColorBrush;
        textBox1.Foreground = randomColorBrush;
    }

1~2초 동안 코드를 확인합니다. 빨간색 밑줄이 그어진 항목이 있다면 무언가 잘못된 것입니다. 단어 철자가 틀렸거나 일부 코드의 위치가 잘못되었을 수 있습니다.

실행

프로그램을 컴파일하고 실행해 보겠습니다.

Visual Studio의 디버그 메뉴에서 디버깅하지 않고 시작을 선택하거나 F5 키를 선택합니다. 모든 항목을 올바르게 입력한 경우 다음과 같이 실행 중인 앱이 나타납니다.
Say hello 단추를 반복해서 선택하여 "Hello there!" 텍스트와 테두리의 색이 임의로 변경되는 것을 확인합니다.

이렇게 표시되면 성공하였습니다! 이 자습서를 완료하셨습니다. 제대로 표시되지 않는 경우 코드 및 UI 속성 설정을 주의해서 다시 살펴 잘못된 부분을 확인합니다.

계속

연습 - UWP 앱 작성

UWP "Say hello" 자습서

프로젝트 만들기

UI 디자인

코드 숨김 작성

실행

피드백