자습서: C# 태그 및 커뮤니티 도구 키트를 사용하여 .NET MAUI 앱 만들기
XAML 없이 만든 사용자 인터페이스로 .NET MAUI 커뮤니티 툴킷의 C#Markup를 사용하여 NET MAUI 앱을 구축합니다.
소개
이 .NET MAUI 커뮤니티 도구 키트는 확장, 동작, 애니메이션 및 기타 도우미 집합입니다. 기능 중 하나인 C# 태그는 C# 코드로 사용자 인터페이스를 완전히 만드는 기능을 제공합니다. 이 자습서에서는 C# 태그를 사용하여 사용자 인터페이스를 만드는 Windows용 .NET MAUI 앱을 만드는 방법을 알아봅니다.
환경 설정
.NET MAUI 개발을 위한 환경을 아직 설정하지 않은 경우 단계에 따라 Windows에서 .NET MAUI를 시작하세요.
. NET MAUI 프로젝트 만들기
참고 항목
.NET MAUI 프로젝트 설정에 이미 익숙한 경우 다음 섹션으로 건너뛸 수 있습니다.
Visual Studio를 시작하고 시작 창에서 새 프로젝트 만들기를 클릭하여 새 프로젝트를 만듭니다.
이 새 프로젝트 만들기 창에서 All project type(모든 프로젝트 유형) 드롭다운에서 MAUI를 선택하고 .NET MAUI App 템플릿을 선택한 다음 Next 버튼을 클릭합니다:
다음으로 새 프로젝트 구성 화면에서 프로젝트 이름을 지정하고 프로젝트 위치를 선택한 후 다음 버튼을 클릭합니다.
최종 화면의 추가 정보에서 생성 버튼을 클릭합니다.
프로젝트가 생성되고 종속성이 복원될 때까지 기다립니다.
Visual Studio 도구 모음에서 Windows 머신 단추를 눌러 앱을 빌드하고 시작합니다. 이 클릭 단추를 클릭하고 단추 콘텐츠가 클릭 횟수로 업데이트되는지 확인합니다.
Windows의 .NET MAUI 앱이 예상대로 작동하는지 확인했으므로 MVVM 도구 키트 및 C# 태그 패키지를 통합할 수 있습니다. 다음 섹션에서는 이러한 패키지를 새 프로젝트에 추가합니다.
.NET MAUI 커뮤니티 도구 키트에서 C# 태그 추가
Windows에서 .NET MAUI 앱이 실행되고 있으므로 프로젝트에 몇 가지 NuGet 패키지를 추가하여 .NET MAUI 커뮤니티 툴킷의 MVVM 툴킷 및 C# Markup와 통합해 보겠습니다.
솔루션 탐색기에서 프로젝트를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 NuGet 패키지 관리...를 선택합니다.
이 NuGet Package Manager 창에서 Browse 탭을 선택하고 CommunityToolkit.MVVM을 검색합니다:
설치를 클릭하여 프로젝트에 안정적인 최신 버전의 CommunityToolkit.MVVM 패키지를 추가합니다.
다음으로 CommunityToolkit.Maui를 검색합니다.
설치를 클릭하여 프로젝트에 안정적인 최신 버전의 CommunityToolkit.Maui.Markup 패키지를 추가합니다.
새 패키지 설치가 완료된 후 NuGet 패키지 관리자 창을 닫습니다.
프로젝트에 ViewModel을 추가합니다.
MVVM 도구 키트를 사용하여 간단한 MVVM(Model-View-ViewModel) 구현을 추가하겠습니다. 먼저 뷰와 페어링할 viewmodel을 만들어 보겠습니다(MainPage). 프로젝트를 다시 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Add | Class를 선택합니다.
표시되는 Add New Item 창에서 클래스 이름을 MainViewModel로 지정하고 Add을 클릭합니다:
에서 MVVM 도구 키트의 기능을 활용하려고 합니다 MainViewModel. 클래스의 콘텐츠를 다음 코드로 바꿉니다.
using CommunityToolkit.Mvvm.ComponentModel;
using System.ComponentModel;
using System.Diagnostics;
namespace MauiMarkupSample
{
[INotifyPropertyChanged]
public partial class MainViewModel
{
[ObservableProperty]
private string name;
partial void OnNameChanging(string value)
{
Debug.WriteLine($"Name is about to change to {value}");
}
partial void OnNameChanged(string value)
{
Debug.WriteLine($"Name has changed to {value}");
}
}
}
이 Windows용 첫 번째 .NET MAUI 앱 빌드 자습서를 완료한 경우 위의 코드가 수행하는 작업을 이해하게 됩니다. 클래스는 MainViewModel 특성으로 INotifyPropertyChanged 데코레이팅되므로 MVVM 도구 키트가 클래스에 대한 구현을 INotifyPropertyChanged 생성할 수 있습니다. .NET 소스 생성기가 작동하려면 MainViewModel 을 partial class 로 표시해야 합니다. 이 name 개인 필드의 ObservableProperty 속성은 생성된 부분 클래스에서 적절한 INotifyPropertyChanged 구현을 가진 클래스에 대한 Name 속성을 추가합니다. 이 OnNameChanging 부분 메서드 및 OnNameChanged 부분 메서드를 추가하는 것은 선택 사항이지만 속성이 변경되거나 변경될 때 사용자 지정 논리를 Name 추가할 수 있습니다.
C# 태그를 사용하여 UI 빌드
C# 태그를 사용하여 UI를 빌드할 때 첫 번째 단계는 MauiProgram.cs CreateMauiApp() 메서드를 업데이트하는 것입니다. 메서드의 내용을 다음 코드로 바꿉니다.
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseMauiCommunityToolkitMarkup();
return builder.Build();
}
또한 파일 상단에 using 명령문을 새로 추가해야 합니다: using CommunityToolkit.Maui.Markup;. 호출은 앱에 UseMauiCommunityToolkitMarkup() C# 태그 지원을 추가하여 XAML 대신 C# 코드로 UI를 생성할 수 있도록 합니다.
UI를 렌더링할 때 MainPage.xaml 파일이 더 이상 사용되지 않으므로 ContentPage의 내용을 제거할 수 있습니다.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiMarkupSample.MainPage">
</ContentPage>
MainPage.xaml.cs click 이벤트 처리기를 제거하고 클래스에 세 개의 프라이빗 멤버를 추가합니다.
private readonly MainViewModel ViewModel = new();
private enum Row { TextEntry }
private enum Column { Description, Input }
이 ViewModel 속성은 UI를 바인딩할 때 사용할 MainViewModel 클래스의 인스턴스를 만듭니다. 이 Row 및 Column 열거형은 C# 태그를 사용하여 UI의 레이아웃을 정의하는 데 사용됩니다. 다음 단계에서 정의할 단일 행과 두 개의 열이 있는 간단한 UI입니다.
UI 요소는 C# 코드에 정의되므로 메서드가 InitializeComponent() 필요하지 않습니다. 호출을 제거하고 다음 코드로 바꿔 UI를 만듭니다.
public MainPage()
{
Content = new Grid
{
RowDefinitions = Rows.Define(
(Row.TextEntry, 36)),
ColumnDefinitions = Columns.Define(
(Column.Description, Star),
(Column.Input, Stars(2))),
Children =
{
new Label()
.Text("Customer name:")
.Row(Row.TextEntry).Column(Column.Description),
new Entry
{
Keyboard = Keyboard.Numeric,
BackgroundColor = Colors.AliceBlue,
}.Row(Row.TextEntry).Column(Column.Input)
.FontSize(15)
.Placeholder("Enter name")
.TextColor(Colors.Black)
.Height(44)
.Margin(6, 6)
.Bind(Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay)
}
};
}
생성자의 새 코드 MainPage 는 C# 태그를 활용하여 UI를 정의합니다. A Grid 는 페이지로 Content 설정됩니다. 새 그리드는 높이가 36픽셀이고 너비가 절대 픽셀 값이 아닌 별 값으로 정의된 열 2개가 있는 행을 정의합니다. 열은 Input 항상 열 너비의 Description 두 배가 됩니다. 이러한 정의에 해당하는 XAML은 다음과 같습니다.
<Grid.RowDefinitions>
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
그리드를 만드는 코드의 나머지 부분에는 2 Children개, a Label 및 1개가 Entry추가됩니다. Text, Row 및 Column 속성은 Label 요소에 설정되며 Entry 는 다음 속성으로 생성됩니다:
| 속성 | 값 | 설명 |
|---|---|---|
Row |
Row.TextEntry |
행 번호를 정의합니다. |
Column |
Column.Input |
열 번호를 정의합니다. |
FontSize |
15 |
글꼴 크기를 설정합니다. |
Placeholder |
"Enter name" |
요소가 비어 있을 때 표시할 자리 표시자 텍스트를 설정합니다. |
TextColor |
Colors.Black |
텍스트 색상을 설정합니다. |
Height |
44 |
요소의 높이를 설정합니다. |
Margin |
6, 6 |
요소 주위의 여백을 정의합니다. |
Bind |
Entry.TextProperty, nameof(ViewModel.Name), BindingMode.TwoWay |
이 Text 양방향 데이터 바인딩을 사용하여 요소 Name 의 속성을 뷰 모델의 속성에 바인딩합니다. |
이러한 자식 요소를 정의하는 동일한 XAML은 다음과 같습니다.
<Label Text="Customer name:"
Grid.Row="0" Grid.Column="0" />
<Entry Grid.Row="1" Grid.Column="0"
FontSize="15"
Placeholder="Enter name"
HeightRequest="44"
Margin="6, 6"
Text="{Binding Path=ViewModel.Name, Mode=TwoWay}" />
위의 태그에서 속성이 TextColor 설정되지 않은 것을 확인할 수 있습니다. 컨트롤을 TextColor 설정하려면 사용자 지정 스타일을 설정해야 합니다. .NET MAUI에서 스타일을 사용하는 방법에 대한 자세한 내용은 XAML을 사용한 스타일 앱를 참조하십시오. 이는 C# 태그의 속성을 동등한 XAML보다 더 간소화할 수 있는 한 가지 예입니다. 그러나 스타일을 사용하면 재사용 및 상속이 용이해집니다.
이제 앱을 실행할 준비가 되었습니다. F5를 눌러 프로젝트를 빌드하고 실행합니다. 앱은 다음 스크린샷처럼 보여야 합니다:
이제 .NET MAUI를 사용하여 Windows에서 첫 번째 C# 태그 앱을 만들었습니다. C# 태그를 사용하여 수행할 수 있는 작업을 자세히 알아보려면 C# 태그 설명서를 참조 하세요.
관련 항목
Windows developer