다음을 통해 공유

팝업

팝업은 현재 작업과 관련된 정보를 사용자에게 제공하는 일반적인 방법입니다. 운영 체제는 메시지를 표시하고 사용자의 응답을 요구하는 방법을 제공합니다. 이러한 경고는 일반적으로 개발자가 제공할 수 있는 콘텐츠와 레이아웃 및 모양 측면에서 제한적입니다.

참고 항목

사용자에게 더 미묘한 것을 제시하려면 알림 및 스낵바 옵션을 체크 아웃하십시오.

이 Popup 보기를 통해 개발자는 고유한 사용자 지정 UI를 빌드하고 사용자에게 표시할 수 있습니다.

.NET MAUI 커뮤니티 도구 키트는 .NET MAUI 애플리케이션에서 표시할 수 있는 Popup를 생성할 수 있는 두 가지 접근 방식을 제공합니다. 이러한 방법은 사용 사례에 따라 달라집니다. 이 페이지는 애플리케이션에서 오버레이를 렌더링하는 가장 간단한 형식 Popup 에 중점을 둡니다. 보다 고급스러운 접근 방식을 사용하여 Popup에서 결과를 반환할 수 있는 기능을 활성화하려면 Popup - 결과 반환을 참조하세요.

팝업 표시

.NET MAUI 커뮤니티 도구 키트는 .NET MAUI 애플리케이션에 표시하는 Popup 여러 가지 방법을 제공합니다.

  1. ContentPage에서 확장 메서드를 this.ShowPopupAsync() 호출하고 팝업에 View 표시할 메서드를 전달합니다.
  2. Popup에서 결과를 반환합니다.
  3. PopupService를 사용하여

아래 설명서는 확장 메서드를 사용하여 .ShowPopupAsync() 팝업을 표시하는 가장 간단한 방법을 보여 줍니다. 이 메서드는 Task<IPopupResult> 팝업이 닫히면 완료되는 값을 반환합니다. 제공된 항목은 PopupOptions 선택 사항입니다.

public class MainPage : ContentPage
{
    // ...

    async void DisplayPopupButtonClicked(object? sender, EventArgs e)
    {
        await this.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })

        /**** Alternatively, Shell.Current can be used to display a Popup

        await Shell.Current.ShowPopupAsync(new Label
        {
            Text = "This is a very important message!"
        }, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false,
            Shape = new RoundRectangle
            {
                CornerRadius = new CornerRadius(20, 20, 20, 20),
                StrokeThickness = 2,
                Stroke = Colors.LightGray
            }
        })
        ****/
    }
}

패딩 팝업

XAML 또는 C#에서 Popup를 생성하고, 이를 ShowPopupAsync()에 전달할 수 있습니다.

XAML에서 팝업 빌드

가장 쉬운 방법은 프로젝트에 새 Popup를 추가하여 .NET MAUI ContentView (XAML)를 만드는 것입니다. 그러면 *.xaml 파일과 *.xaml.cs 파일 등 2개 파일이 생성됩니다.

*.xaml의 내용을 다음으로 바꿉니다.

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyProject.SimplePopup"
    Padding="10">

    <Label Text="This is a very important message!" />
    
</ContentView>

기본값 HorizontalOptions 및 VerticalOptions은 Popup이 오버레이되는 페이지의 중앙에 표시되도록 설정합니다.

팝업은 기본값 Padding 15로 표시됩니다. SimplePopup을 더 보기 좋게 만들기 위해 Padding에 10이 추가되었습니다.

XAML에서 만든 팝업 표시하기

Popup XAML에서 생성된 후, Popup, Page 또는 Shell에 사용된 INavigation 확장 메서드를 통해서나, 이 도구 키트의 IPopupService 구현을 통해 표시할 수 있습니다.

다음 예제에서는 SimplePopup에 대한 확장 메서드를 사용하여 이전 예제에서 생성한 ContentPage를 인스턴스화하고 표시하는 방법을 보여 줍니다.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayPopup(CancellationToken token)
    {
        var popup = new SimplePopup();

        await this.ShowPopupAsync(popup, PopupOptions.Empty, token);
    }
}

패딩 팝업

팝업 닫기

닫을 수 있는 방법에는 Popup 두 가지가 있습니다.

  1. 프로그래밍 방식으로 팝업을 닫을 수 있습니다.
  2. 팝업 외부에서 사용자가 탭하면 팝업을 닫을 수 있습니다.
    • 메모 사용자가 팝업 외부를 탭할 때 팝업이 닫히지 않도록 하려면 다음으로 설정합니다 PopupOptions.CanBeDismissedByTappingOutsideOfPopup . false

1. 프로그래밍 방식으로 팝업 닫기

프로그램을 프로그래밍 방식으로 닫는 방법에는 Popup 세 가지가 있습니다.

  1. ContentPage에서 this.ClosePopupAsync() 확장 메서드를 사용합니다.
  2. 앱에서 Shell를 사용할 때 Shell.Current.ClosePopupAsync() 확장 메서드를 사용하세요.
  3. 다음을 사용합니다. PopupService

아래 예제에서는 this.ClosePopupAsync()에서 ContentPage을(를) 사용하는 방법을 보여 줍니다. Popup을 닫는 데 사용하는 PopupService 방법을 알아보려면 PopupService 설명서를 참조하세요.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public async Task DisplayAutomaticallyClosingPopup(Timespan displayTimeSpan, CancellationToken token)
    {
        var popup = new SimplePopup();

        // This Popup is closed programmatically after 2 seconds
        this.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await this.ClosePopupAsync(token);

        /**** Alternatively, Shell.Current can be used to close a Popup
        Shell.Current.ShowPopup(popup, new PopupOptions
        {
            CanBeDismissedByTappingOutsideOfPopup = false
        });

        await Task.Delay(TimeSpan.FromSeconds(displayTimeSpan), token);

        await Shell.Current.ClosePopupAsync(token);
        ***/

    }
}

2. 팝업 외부 탭하기

기본적으로 사용자는 외부 Popup 를 탭하여 해제할 수 있습니다. 이 속성의 PopupOptions.CanBeDismissedByTappingOutsideOfPopup 사용을 통해 제어할 수 있습니다. 이 속성을 설정하면 false 사용자가 외부에서 탭하여 해제 Popup 할 수 없습니다. 자세한 내용은 PopupOptions 를 참조하세요.

팝업 옵션

는 PageOverlayColorShapeShadow 모두 팝업에 맞게 사용자 지정할 수 있습니다. 자세한 내용은 PopupOptions 를 참조하세요.

팝업 기본값 설정

앱의 모든 Popup 항목에 대한 기본값을 재정의하려면 .NET MAUI 커뮤니티 도구 키트를 초기화할 때 .SetPopupDefaults() 및 .SetPopupOptionsDefaults()를 호출할 수 있습니다.

DefaultPopupSettings은(는) 앱의 모든 Popup에 기본값으로 적용되며, .ShowPopup()가 호출될 때마다 PopupOptions에 기본값으로 DefaultPopupOptionsSettings이(가) 적용됩니다.

.UseMauiCommunityToolkit(static options =>
{
  options.SetPopupDefaults(new DefaultPopupSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  BackgroundColor = Colors.Orange,
	  HorizontalOptions = LayoutOptions.End,
	  VerticalOptions = LayoutOptions.Start,
	  Margin = 72,
	  Padding = 4
  });
  options.SetPopupOptionsDefaults(new DefaultPopupOptionsSettings
  {
	  CanBeDismissedByTappingOutsideOfPopup = true,
	  OnTappingOutsideOfPopup = async () => await Toast.Make("Popup Dismissed").Show(CancellationToken.None),
	  PageOverlayColor = Colors.Orange,
	  Shadow = null,
	  Shape = null
  });
})

이벤트

클래스는 Popup 구독할 수 있는 다음 이벤트를 제공합니다.

이벤트 설명
Closed 닫을 Popup 때 발생합니다.
Opened 열 때 Popup 발생합니다.

예제

.NET MAUI 커뮤니티 도구 키트 샘플 애플리케이션에서 작동 중인 이 기능의 예를 찾을 수 있습니다.

응용 프로그램 인터페이스 (API)

.NET MAUI 커뮤니티 도구 키트 GitHub 리포지토리에서 오버에 대한 Popup 소스 코드를 찾을 수 있습니다.

추가 리소스