728x90
728x170
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 기준으로 TestPopupPage 를 작성합니다.
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 를 사용하여 팝업처리하는 방법입니다.
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
728x90
그리드형
'C# > Xamarin Maui' 카테고리의 다른 글
[.NET MAUI] Gallery 사진 파일 가져오기 (0) | 2022.06.28 |
---|---|
[.NET MAUI] LoginPage 만들기 (0) | 2022.05.31 |
[.NET MAUI] 지문 인증 사용하기 (0) | 2022.05.12 |
[.NET MAUI] SfBadgeView, SfEffectsView 사용하기 (1) | 2022.03.26 |
[.NET MAUI] MVVM 기본 처리 (0) | 2022.03.18 |