MAUI를 시작하면 가장 기본이 되는 컨텐츠 타입이다.
MAUI는 .NET을 이용한 멀티 플랫폼 도구이다. 멀티 플랫폼을 위해서 UI를 구성하는 요소들이 공통적으로 사용할 수 있도록 구성하였는데, 각 구성 요소들에 대해서 알아보도록 하자.
ShellContent 는 MAUI 프로젝트를 생성하면 가장 기본적으로 구성되어 있는 화면 UI이다.
ShellContent 의 특징은 제목 줄과 같은 타이틀을 명시 할 수 있다는 것이다.
가장 큰 특징은 Tabbar를 이용할 수 있는데 이 부분은 추후에 진행하도록 하자.
기본 프로젝트의 시작점인 App.xaml.cs를 확인해 보면, AppShell()을 MainPage로 실행하는 것을 알 수 있다.
즉 아래 AppShell.xaml를 기본 페이지로 여는 것이다.
AppShell.xaml를 열어보면, ShellContent가 존재하는데, 페이지 별로 연결이 가능한 구성이다.
이해를 돕기위해 AboutPage를 만들어보자.
MAUI에서 신규 페이지를 만들기 위해서는 내부 어셈블리 등록을 위해 아래와 같이 신규 아이템을 추가하는 방식으로 진행하면 된다. 이후 .NET MAUI를 선택하고, ContentPage 타입(XAML)를 선택하자.
AboutPage가 잘 추가되었다면, AppShell 코드를 Tabbar를 활용하여 아래와 같이 추가하도록 하자.
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="MauiApp1.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
Shell.FlyoutBehavior="Disabled">
<TabBar Route="MainTab">
<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />
<ShellContent
Title="About"
ContentTemplate="{DataTemplate local:AboutPage}"
Route="AboutPage" />
</TabBar>
</Shell>
TabBar는 각 플랫폼별로 메뉴 탭과 같은 역활을 수행한다. 이후 디버깅을 통해 실행해 보면, 아래와 같이 Home, About 탭이 추가된 것을 알 수 있다.
이러한 방식으로 여러가지 탭에 ShellContent를 넣을 수 있도록 구성된 요소가 SheeContent이고 강력한 UI 도구인 만큼 효율적으로 사용이 가능할 것으로 보인다.
이외에도 ShellContent에는 생상과 화면 오버레이와 같은 다양한 구성을 가지고 있으므로, 추가 파라메터에 대해서는 확인해보면 좋다. 가장 많이 사용하는 아이콘은 Icon 파라메터로 추가가 가능하다.
이렇게 짧게 ShellContent에 대해서 알아보았다.