[C#/MAUI/.NET6] FlyoutPage 엘리먼트 사용하기

TestProject.zip

0.16MB

▶ PageItem.cs

namespace TestProject;

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

    #region 제목 - Title

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

    #endregion
    #region 아이콘 소스 - IconSource

    /// <summary>
    /// 아이콘 소스
    /// </summary>
    public string IconSource { get; set; }

    #endregion
    #region 타겟 타입 - TargetType

    /// <summary>
    /// 타겟 타입
    /// </summary>
    public Type TargetType { get; set; }

    #endregion
}

 

728x90

 

▶ MenuPage.xaml

<ContentPage x:Class="TestProject.MenuPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject"
    Title="메뉴 페이지"
    Padding="0,40,0,0">
    <CollectionView x:Name="collectionView"
        SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:PageItem}">
                <local:PageItem
                    IconSource="sample1.png"
                    Title="연락처"
                    TargetType="{x:Type local:ContactPage}" />
                <local:PageItem
                    IconSource="sample2.png"
                    Title="할일"
                    TargetType="{x:Type local:TodoListPage}" />
                <local:PageItem
                    IconSource="sample3.png"
                    Title="리마인더"
                    TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" />
                    <Label Grid.Column="1"
                        VerticalOptions="Center"
                        Margin="20,0"
                        FontAttributes="Bold"
                        FontSize="20"
                        Text="{Binding Title}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

 

300x250

 

▶ MenuPage.xaml.cs

namespace TestProject;

/// <summary>
/// 메뉴 페이지
/// </summary>
public partial class MenuPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MenuPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MenuPage()
    {
        InitializeComponent();

        this.collectionView.SelectionChanged += collectionView_SelectionChanged;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 컬렉션 뷰 선택 변경시 처리하기 - collectionView_SelectionChanged(sender, e)

    /// <summary>
    /// 컬렉션 뷰 선택 변경시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    /// <exception cref="NotImplementedException"></exception>
    private void collectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as PageItem;

        if(item != null)
        {
            MainPage mainPage = App.Current.MainPage as MainPage;

            mainPage.Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));

            mainPage.IsPresented = false;
        }
    }

    #endregion
}

 

반응형

 

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage 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">
    <FlyoutPage.Flyout>
        <local:MenuPage x:Name="menuPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>