[C#/MAUI/.NET6] TabbedPage 엘리먼트 : ItemsSource/ItemTemplate 속성을 사용해 탭 페이지 채우기

TestProject.zip

0.15MB

▶ PageItem.cs

namespace TestProject;

/// <summary>
/// 페이지 항목
/// </summary>
public class PageItem
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 아이콘 이미지 소스 - IconImageSource

    /// <summary>
    /// 아이콘 이미지 소스
    /// </summary>
    public ImageSource IconImageSource { get; set; }

    #endregion
    #region 제목 - Title

    /// <summary>
    /// 제목
    /// </summary>
    public string Title { get; set; }

    #endregion
    #region 메시지 - Message

    /// <summary>
    /// 메시지
    /// </summary>
    public string Message { get; set; }

    #endregion
}

 

728x90

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <TabbedPage.ItemsSource>
        <x:Array Type="{x:Type local:PageItem}">
            <local:PageItem IconImageSource="sample1.png" Title="연락처"   Message="연락처 페이지"   />
            <local:PageItem IconImageSource="sample2.png" Title="할일"     Message="할일 페이지"     />
            <local:PageItem IconImageSource="sample3.png" Title="리마인더" Message="리마인더 페이지" />
        </x:Array>
    </TabbedPage.ItemsSource>
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage
                IconImageSource="{Binding IconImageSource}"
                Title="{Binding Title}"
                BackgroundColor="White">
                <StackLayout>
                    <Label Text="{Binding Message}"
                        VerticalOptions="CenterAndExpand" 
                        HorizontalOptions="CenterAndExpand" />
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>