.NET MAUI 자습서 - C#으로 첫 번째 멀티 플랫폼 앱 빌드

Windows macOS

코드 편집

.NET MAUI를 사용하여 응용 프로그램을 개발할 때 응용 프로그램을 디버깅할 때 XAML 핫 다시 로드를 사용할 수 있습니다. 즉, 응용 프로그램이 실행되는 동안 XAML UI(사용자 인터페이스)를 변경할 수 있으며 UI가 자동으로 업데이트됩니다.

Visual Studio로 돌아가서 앱을 실행 중인 상태로 둡니다. 솔루션 탐색기에서 MyFirstMauiApp 프로젝트 아래의 MainPage.xaml 파일을 두 번 클릭합니다. 솔루션 탐색기 창이 표시되지 않으면 기본 메뉴에서 보기 > 솔루션 탐색기를 선택하세요(또는 CTRL+ALT+L 누름).

MainPage.xaml 파일이 강조 표시된 솔루션 탐색기 창.

VS Code의 MainPage.xaml 파일로 돌아가서 실행 중인 앱을 나가세요.

MainPage.xaml 파일이 강조 표시된 솔루션 탐색기 창.

현재 17번 줄에 있는 두 번째 Label의 Text는 다음 코드와 같이 Hello, World!로 설정됩니다.:

MainPage.xaml
<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Hello, .NET MAUI!를 읽으려면 텍스트를 업데이트하세요.

MainPage.xaml
<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

변경할 때 앱 UI가 자동으로 업데이트됩니다.

.NET MAUI 앱을 실행하는 Windows. '안녕하세요, .NET MAUI!' 메시지는 핫 다시 로드로 업데이트될 때 표시됩니다.

.NET MAUI 앱을 실행하는 Mac. '안녕하세요, .NET MAUI!' 메시지는 핫 다시 로드로 업데이트될 때 표시됩니다.

.NET MAUI로 애플리케이션을 개발할 때 .NET 핫 다시 로드를 사용하여 C# 코드를 다시 로드할 수도 있습니다. 버튼을 클릭할 때 1이 아닌 10으로 카운트를 증가시키도록 애플리케이션의 논리를 수정해 보겠습니다.

MainPage.xaml.cs (이 파일은 MainPage.xaml 아래에 중첩되어 있거나 마우스 오른쪽 단추를 클릭하고 메뉴에서 [코드 보기]를 선택할 수 있습니다)를 엽니다.

MainPage.xaml 뒤에 코드를 표시하기 위한 드롭다운 선택

현재 해당 파일의 OnCounterClicked 메서드에 다음 코드가 있습니다.

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

count++;를 count += 10;(으)로 변경하여 10씩 증가하도록 업데이트합니다.

MainPage.xaml.cs
private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

코드 변경 내용을 적용하려면 파일을 저장하고 Visual Studio에서 핫 다시 로드 버튼을 선택하거나 Alt+F10을 선택합니다.

MainPage.xaml 뒤에 코드를 표시하기 위한 드롭다운 선택

클릭하세요 단추를 선택하고 10씩 증가하는 것을 볼 수 있습니다. 잘 했어요! 지금 실행 중인 앱을 닫을 수 있습니다.

카운터가 10증분으로 업데이트됨

계속