[MAUI] 2. MAUI 컨트롤과 페이지

1. MAUI의 컨트롤과 페이지

 

1.1 MAUI의 주요 컨트롤

MAUI의 컨트롤들은 각 플랫폼의 네이티브 컨트롤로 렌더링되지만, 개발자는 단일 XAML 코드로 모든 플랫폼을 제어할 수 있다.
이건 Handler라는 MAUI의 메커니즘 덕분이다.

---

1.1.1 텍스트 및 버튼 컨트롤

Label
텍스트를 표시하는 가장 기본적인 컨트롤이다.
단순히 텍스트를 보여주는 것뿐만 아니라, FormattedText를 사용하면 한 Label 안에서 여러 스타일(굵게, 기울임 등)을 섞어서 표현할 수도 있다.

Button
사용자 입력(클릭)을 처리하는 컨트롤이다.
Clicked 이벤트를 기본으로 사용하고, CornerRadius, BorderColor 같은 속성으로 디자인도 꽤 세밀하게 조정할 수 있다.

Entry & Editor
사용자 입력을 받는 컨트롤이다.
IsPassword를 사용하면 비밀번호 입력처럼 마스킹 처리도 가능하고,
Keyboard 속성을 통해 숫자, 이메일, 전화번호 등 상황에 맞는 키보드를 띄울 수도 있다.

---

1.1.2 사용자 입력 및 선택 컨트롤

Slider
연속적인 값 범위를 선택할 때 사용하는 슬라이드바다.
Minimum, Maximum, Value로 값을 제어한다.

Switch
ON/OFF 상태를 나타내는 토글 스위치다.
IsToggled로 현재 상태를 확인할 수 있다.

DatePicker
날짜를 선택하는 컨트롤이다.
플랫폼별로 최적화된 날짜 선택 UI를 자동으로 보여준다.

---

1.1.3 목록 및 컬렉션

CollectionView
많은 데이터를 효율적으로 보여줄 때 사용하는 핵심 컨트롤이다.
ItemsLayout을 통해 리스트 형태(LinearItemsLayout)나 그리드 형태(GridItemsLayout)로 자유롭게 구성할 수 있다.
ItemTemplate을 사용하면 각 아이템의 UI를 완전히 커스터마이징할 수 있어서 굉장히 유연하다.

<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="2" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame Margin="10" Padding="10">
                <StackLayout>
                    <Label Text="{Binding Name}" FontAttributes="Bold" />
                    <Label Text="{Binding Price, StringFormat='C'}" />
                </StackLayout>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

---

 

1.2 MAUI의 페이지 (Page)

MAUI 애플리케이션은 하나 이상의 페이지로 구성되며, 각 페이지는 하나의 화면을 의미한다.
상황에 맞게 페이지 유형을 선택해서 사용하면 된다.

ContentPage
가장 기본적인 페이지다.
Content에 하나의 뷰를 넣어서 단일 화면을 구성한다.

NavigationPage
여러 페이지를 스택 구조로 관리하는 컨테이너다.
PushAsync()와 PopAsync()를 통해 화면 이동을 처리하며,
각 플랫폼의 네비게이션 바도 자동으로 만들어준다.

TabbedPage
여러 페이지를 탭 형태로 보여준다.
모바일에서는 보통 상단이나 하단에 탭이 생기고, 탭을 누르면 해당 페이지로 이동한다.

---

 

1.3 MAUI Shell: 앱 구조 단순화

MAUI에서 앱 구조를 잡을 때 가장 권장되는 방식은 Shell을 사용하는 것이다.
Shell은 Flyout(사이드 메뉴), TabBar, 그리고 라우팅을 하나로 묶어서 관리할 수 있게 해준다.

---

1.3.1. Shell의 주요 특징

통합된 내비게이션
FlyoutItem과 TabBar를 이용해서 복잡한 메뉴 구조를 한 파일에서 정리할 수 있다.

URI 기반 라우팅
페이지를 이름으로 호출할 수 있어서, 기존처럼 Push/Pop을 직접 관리할 필요가 줄어든다.

간결한 코드
내비게이션 관련 코드가 많이 줄어든다.

---

1.3.2. Shell 라우팅 활용

Shell을 사용하면 페이지 이동을 단순히 코드로 직접 관리하는 것이 아니라,
라우트를 등록하고 URI 방식으로 이동할 수 있다.

먼저, 이동할 페이지를 라우터에 등록한다.

// 라우터에 등록
Routing.RegisterRoute("detail", typeof(TodoDetailPage));

이후 GoToAsync()를 사용하면 URI 형식으로 페이지 이동이 가능하다.

await Shell.Current.GoToAsync("detail");

---

1.3.3. 데이터 전달 (Dictionary + IQueryAttributable)

Shell에서는 페이지 이동 시 데이터를 함께 전달할 수도 있다.
Dictionary 형태로 값을 넘기고, 받는 쪽에서는 IQueryAttributable을 구현해서 처리한다.

// 데이터 전달
await Shell.Current.GoToAsync("detail", new Dictionary<string, object>
{
    { "TodoItem", item }
});

받는 쪽에서는 다음과 같이 처리한다.

void IQueryAttributable.ApplyQueryAttributes(IDictionary<string, object> query)
{
    if (query.TryGetValue("TodoItem", out var value) && value is TodoItem todo) 
    {
        CurrentTodo = todo;
        OnPropertyChanged(nameof(CurrentTodo));
    }
}

이 방식을 사용하면:

• 페이지 간 데이터 전달이 깔끔해지고
• 별도의 글로벌 상태 없이도 데이터 흐름을 관리할 수 있다

특히 MVVM 구조에서 많이 사용하는 방식이다