.NET MAUI Bottom Popup 표시하기

.NET MAUI Bottom Popup 표시하기

 

.NET MAUI 에서 Bottom Popup 을 표시하는 방법을 알아봅니다.

Bottom Popup 은 아래에서 올라오는 형태를 의미합니다.

먼저 Popup 로 표시할 화면이 상속받을 BasePopup 을 구성합니다.

BasePopupPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Maui.PopupTest.BasePopupPage"
             Title="BasePopupPage">
    <ContentPage.Content>
        <StackLayout   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Frame VerticalOptions="EndAndExpand" CornerRadius="20" BackgroundColor="White">
                <StackLayout Padding="5,0,5,50"  >
                    <StackLayout  Padding="0,0,0,15">
                        <BoxView  BackgroundColor="LightGray" CornerRadius="5" WidthRequest="100" HeightRequest="10" />
                        <StackLayout.GestureRecognizers>
                            <SwipeGestureRecognizer  Command="{Binding PopModelCommand}" Threshold="15" Direction="Down" />
                        </StackLayout.GestureRecognizers>
                    </StackLayout>
                    <ContentView x:Name="ContentView"/>
                </StackLayout>
            </Frame>
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer Command="{Binding PopModelCommand}" />
            </StackLayout.GestureRecognizers>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

BasePopupPage.xaml.cs

using System.Windows.Input;

namespace Maui.PopupTest;

public partial class BasePopupPage : ContentPage
{
	public BasePopupPage()
	{
		InitializeComponent();

        this.BindingContext = this;
	}

    /// <summary>
    /// 팝업을 닫습니다.
    /// </summary>
    public ICommand PopModelCommand => new Command(async () =>
    {
        await App.Current.MainPage.Navigation.PopModalAsync();
    });

    /// <summary>
    /// 팝업의 컨테츠영역에 표시될 View
    /// </summary>
    public View PopupContent
    {
        get => (View)GetValue(PopupContentProperty);
        set { SetValue(PopupContentProperty, value); }
    }

    public static readonly BindableProperty PopupContentProperty = BindableProperty.Create(
      propertyName: nameof(PopupContent),
      returnType: typeof(View),
      declaringType: typeof(BasePopupPage),
      defaultValue: null,
      defaultBindingMode: BindingMode.OneWay,
      propertyChanged: PopupContentPropertyChanged);

    private static void PopupContentPropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var controls = (BasePopupPage)bindable;

        if (newValue != null)
        {
            controls.ContentView.Content = (View)newValue;
        }
    }
}

 

이제 위 정의한 BasePopupPage 기준으로 실제 표시할 Popup 화면을 구성합니다.

TestPopupPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<local:BasePopupPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Maui.PopupTest"
    x:Class="Maui.PopupTest.TestPopupPage"
    Title="TestPopupPage">
    <local:BasePopupPage.PopupContent>
        <StackLayout Spacing="15">
            <Label Text="아이템을 선택하세요" FontSize="16" FontAttributes="Bold"   TextColor="Black"/>
            <Label Text="아이템1" FontSize="16" FontAttributes="Bold"   TextColor="Black"/>
            <BoxView BackgroundColor="Black" HeightRequest="1" />
            <Label Text="아이템2" FontSize="16" FontAttributes="Bold"   TextColor="Black"/>
            <BoxView BackgroundColor="Black" HeightRequest="1" />
        </StackLayout>
    </local:BasePopupPage.PopupContent>
</local:BasePopupPage>

아래는 위 작성된 TestPopupPage 를 사용하여 부모페이지에서 Popup 을 띄우는 코드입니다.

Button 을 하나 만들어 클릭이벤트를 연결해 아래와 같이 코딩합니다.

private async void OnButtonClicked(object sender, EventArgs e)
{
    await App.Current.MainPage.Navigation.PushModalAsync(new TestPopupPage());
}

 

결과

소스
https://github.com/kei-soft/KJunBlog/tree/master/Maui.PopupTest

KJunBlog/Maui.PopupTest at master · kei-soft/KJunBlog