17. [.NET MAUI] Tabbed Page 만들기

시작하기에 전에 MAUI에서 TabbedPage는 Xamarin과 다르게 위치를 지정할 수 없습니다.

 

탭의 위치를 지정 불가능하다는 점 확인하시고 읽어주시면 감사하겠습니다.

 

출처: MS 자습서

 

참고링크: https://docs.microsoft.com/ko-kr/dotnet/maui/user-interface/pages/tabbedpage

TabbedPage - .NET MAUI

---

1. Tabbed Page 생성하기

 

1). Page를 새로 생성한다.

2). Page를 생성했다면 디폴트로 적용 되어있는 ContentPage를 TabbedPage로 수정한다.

3). 프로젝트에 이미 생성되어있는 Page를 Tab에 넣고 싶다면 xmlns로 프로젝트를 네임스페이스에 등록한다.

(TabbedPage에 바로 마크업 소스를 작성해도된다.)

4). SelectedTabColor와 UnSelectedTabColor에 선택됐을 때, 선택되지않았을 때 Color를 넣어준다.

(단, Page에 IconImageSource를 넣었다면 그림에도 색이 입혀지면서 이미지가 안보이니 참고하시길)

5). TabbedPage 안에 Page들을 넣어준다 이때 Title은 탭의 이름이 된다.

 

TabPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.TabPage"
             xmlns:local="clr-namespace:AppMaui"
             Title="TabPage"
             BackgroundColor="White"
             SelectedTabColor="Green"
             UnselectedTabColor="Black">
    
    <local:MainPage Title="문제" IconImageSource="mozza"/>
    
    <local:AwardsPage Title="풀던 문제로" IconImageSource="star"/>
    
    <ContentPage BackgroundColor="Yellow" Title="상품">
        <Button Text="상품"/>
    </ContentPage>
    
</TabbedPage>

---

2. App.xaml.cs 에 TabbedPage 등록하기

namespace AppMaui;

public partial class App : Application
{
	public App()
	{
		InitializeComponent();

        //MainPage = new NavigationPage(new MainPage());
        MainPage = new NavigationPage(new TabPage());
	}

    protected override void OnStart()
    {
        base.OnStart();
    }

    protected override void OnSleep()
    {
        base.OnSleep();
    }

    protected override void OnResume()
    {
        base.OnResume();
    }
}

---

3. 빌드하기

TabbedPage 완성!

 

안드로이드 예뮬을 사용했기때문에 상단에 TAB이 위치한다.