다음을 통해 공유

팝업

  • 아티클

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

참고 항목

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

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

팝업 빌드

A는 Popup XAML 또는 C#에서 만들 수 있습니다.

XAML

XAML 네임스페이스 포함

XAML에서 도구 키트를 사용하려면 페이지 또는 보기에 다음 xmlns 을 추가해야 합니다.

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

따라서 다음을 수행합니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

다음과 같이 포함 xmlns 하도록 수정됩니다.

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

팝업 정의

XAML에서 만든 경우 Popup 파일 뒤에 C# 코드도 있어야 합니다. 이 작업이 필요한 이유를 이해하려면 이 .NET MAUI 설명서 페이지를 참조하세요.

만드는 Popup 가장 쉬운 방법은 프로젝트에 새 .NET MAUI ContentView (XAML) 파일을 추가한 다음 각 파일을 다음으로 변경하는 것입니다.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
    </VerticalStackLayout>
    
</toolkit:Popup>

public partial class SimplePopup : Popup
{
    public SimplePopup()
    {
        InitializeComponent();
    }
}

Important

코드 숨김 파일이 호출 InitializeComponent 과 함께 만들어지지 않으면 .Popup

C#

using CommunityToolkit.Maui.Views;

var popup = new Popup
{
    Content = new VerticalStackLayout
    {
        Children = 
        {
            new Label
            {
                Text = "This is a very important message!"
            }
        }
    }
};

팝업 표시

Popup 빌드된 후에는 확장 메서드를 사용하거나 이 도구 키트의 Popup 구현을 IPopupService 통해 표시할 수 있습니다.

IPopupService

.NET MAUI 커뮤니티 도구 키트는 .NET MAUI 애플리케이션에서 팝업을 인스턴스화하고 표시하는 메커니즘을 제공합니다. 팝업 서비스는 초기화 방법을 사용할 UseMauiCommunityToolkit 때 자동으로 등록 MauiAppBuilder 됩니다. 이렇게 하면 애플리케이션의 모든 부분에서 구현을 IPopupService 확인할 수 있습니다.

IPopupService 이렇게 하면 팝업 보기 및 관련 뷰 모델을 등록할 수 있습니다. 이제 뷰 모델과 뷰 모델을 완전히 분리할 수 있도록 뷰 모델을 제공하여 표시 기능을 Popup 구동할 수 있습니다.

팝업 등록

먼저 IPopupService 애플리케이션에서 팝업을 표시하려면 팝업 및 뷰 모델을 등록해야 합니다. 이 작업은 등록 팝업 보기 및 보기 모델을 MauiAppBuilder사용하여 수행할 수 있습니다.

팝업 표시

다음 예제에서는 .NET MAUI 애플리케이션에서 팝업을 만들고 표시하는 방법을 IPopupService 보여 줍니다.

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<UpdatingPopupViewModel>();
    }
}

보다 구체적인 예제는 샘플 애플리케이션 및 다음 예제를 참조하세요. MultiplePopupViewModel

IPopupService 또한 결과 반환에서 다루는 대로 Popup에서 반환되는 결과를 처리하는 메서드도 제공합니다.

팝업 보기 모델에 데이터 전달

팝업을 표시할 때 사용자에게 동적 콘텐츠를 표시할 수 있도록 기본 보기 모델에 데이터를 전달해야 하는 경우가 있습니다. 매개 IPopupService 변수를 사용하는 메서드 및 ShowPopupAsync 메서드의 오버로드를 ShowPopup 통해 이 작업을 수행할 수 있습니다Action<TViewModel> onPresenting. 이 매개 변수는 프레임워크에 구애받지 않고 개발자가 아키텍처에 가장 적합한 데이터 로드/전달을 구동할 수 있도록 설계되었습니다.

이전 예제와 연결된 팝업을 UpdatingPopupViewModel 표시하기 위해 매개 변수를 사용하여 onPresenting 수행하려는 업데이트 수를 전달할 수 있습니다.

public class MyViewModel : INotifyPropertyChanged
{
    private readonly IPopupService popupService;

    public MyViewModel(IPopupService popupService)
    {
        this.popupService = popupService;
    }

    public void DisplayPopup()
    {
        this.popupService.ShowPopup<UpdatingPopupViewModel>(onPresenting: viewModel => viewModel.PerformUpdates(10));
    }
}

확장 메서드

Important

A는 Popup 상속되는 Page 구현에서만 표시할 수 있습니다 Page.

using CommunityToolkit.Maui.Views;

public class MyPage : ContentPage
{
    public void DisplayPopup()
    {
        var popup = new SimplePopup();

        this.ShowPopup(popup);
    }
}

팝업 닫기

프로그래밍 방식으로 또는 팝업 외부를 Popup 탭하여 닫을 수 있는 두 가지 방법이 있습니다.

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

개발자를 닫으려면 개발자가 Popup 호출하거나 CloseAsync Popup 그 자체로 호출 Close 해야 합니다. 이 작업은 일반적으로 사용자의 단추 누름에 응답하여 수행됩니다.

확인을 추가하여 이전 XAML 예제를 향상시킬 수 있습니다. Button 

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message!" />
        <Button Text="OK" 
                Clicked="OnOKButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

호출하는 결과 이벤트 처리기 Close에서 프로그래밍 방식으로 닫힙니다 Popup.

참고 항목

Close() 는 fire-and-forget 메서드입니다. 운영 체제가 화면에서 해제되기 전에 완료되고 호출 스레드로 Popup 돌아갑니다. 운영 체제 Popup 가 화면에서 해제될 때까지 코드 실행을 일시 중지해야 하는 경우 대신 CloseAsync()사용합니다.

public partial class MySimplePopup : Popup
{
    // ...

    void OnOKButtonClicked(object? sender, EventArgs e) => Close();
}

호출CloseAsync하는 결과 이벤트 처리기에서 운영 체제 Popup 가 화면에서 해제될 때까지 메서드에 대한 호출자 await 허용을 프로그래밍 방식으로 닫습니다Popup.

public partial class MySimplePopup : Popup
{
    // ...

    async void OnOKButtonClicked(object? sender, EventArgs e) 
    {
        var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));

         await CloseAsync(token: cts.Token);
         await Toast.Make("Popup Dismissed By Button").Show();
    }
}

팝업 외부에서 탭

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

결과 반환

개발자는 사용자로부터 응답을 찾는 경우가 많으며, Popup 이 보기를 통해 개발자는 대기하고 작업할 수 있는 결과를 반환할 수 있습니다.

이 작업을 수행하는 방법을 보여 주도록 원래 XAML 예제를 향상시킬 수 있습니다.

XAML

XAML에 2개의 새 단추를 추가합니다.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="MyProject.SimplePopup">

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

그런 다음 C#에 다음 이벤트 처리기를 추가합니다.

async void OnYesButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(true, cts.Token);
}

async void OnNoButtonClicked(object? sender, EventArgs e)
{
    var cts = new CancellationTokenSource(TimeSpan.FromSeconds(5));
    await CloseAsync(false, cts.Token);
}

이 Close 메서드는 object 값을 제공할 수 있도록 허용합니다. 이 값은 결과 반환 값입니다. 결과를 기다리려면 메서드를 ShowPopupAsync 다음과 같이 사용해야 합니다.

using CommunityToolkit.Maui.Views;

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

        var result = await this.ShowPopupAsync(popup, CancellationToken.None);

        if (result is bool boolResult)
        {
            if (boolResult)
            {
                // Yes was tapped
            }
            else
            {
                // No was tapped
            }
        }
    }
}

참고 항목

또한 결과를 기다리는 경우 외부에서 Popup 탭을 처리하기 위해 속성을 통해 ResultWhenUserTapsOutsideOfPopup 반환되는 값을 변경할 수 있습니다.

스타일 적용

이 Popup 클래스를 사용하면 .NET MAUI 스타일을 사용하여 여러 팝업에서 일반적인 시각적 설정을 보다 쉽게 공유할 수 있습니다.

다음 예제에서는 이전 섹션의 예제에 SimplePopup 적용되는 스타일을 정의하는 방법을 보여 줍니다.

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               xmlns:popups="clr-namespace:CommunityToolkit.Maui.Sample.Views.Popups"
               x:Class="MyProject.SimplePopup">

    <toolkit:Popup.Resources>
        <Style TargetType="{x:Type popups:SimplePopup}">
            <Setter Property="Size" Value="100,200" />
            <Setter Property="Color" Value="Green" />
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Start" />
            <Setter Property="CanBeDismissedByTappingOutsideOfPopup" Value="True" />
        </Style>
    </toolkit:Popup.Resources>

    <VerticalStackLayout>
        <Label Text="This is a very important message! Do you agree?" />
        <Button Text="Yes" 
                Clicked="OnYesButtonClicked" />
        <Button Text="No"
                Clicked="OnNoButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

참고 항목

해당 대상을 Style Popup 만들고 예제와 같은 SimplePopup 사용자 지정 팝업에 적용하려면 정의에 Style 속성을 설정 ApplyToDerivedTypes 해야 합니다.

속성

속성 Type 설명
Anchor View 앵커를 View 가져오거나 설정합니다. 앵커는 팝업이 가장 가깝게 렌더링되는 위치입니다. 앵커가 구성되면 팝업이 해당 컨트롤을 중심으로 또는 가능한 한 가깝게 표시됩니다.
CanBeDismissedByTappingOutsideOfPopup bool 팝업 외부를 탭하여 팝업을 해제할 수 있는지 여부를 나타내는 값을 가져오거나 설정합니다. Android에서 - false이면 하드웨어 뒤로 단추를 사용할 수 없습니다.
Color Color 팝업의 값을 Color 가져오거나 설정합니다. 이 색은 실제Content에 구성된 배경색Popup과 무관한 네이티브 배경색을 설정합니다.
Content View 에서 View Popup렌더링할 콘텐츠를 가져오거나 설정합니다.
HorizontalOptions LayoutAlignment 화면에 가로 위치를 지정하는 데 사용할 Popup 위치를 가져오거나 설정합니다LayoutAlignment.
Result Task<object?> 해제 Popup된 경우의 최종 결과를 가져옵니다.
Size Size 팝업 표시의 Size 값을 가져오거나 설정합니다. 지정하지 않는 한 팝업은 항상 실제 크기를 Popup 보기의 크기로 Size 제한하려고 합니다. Popup 기본값이 HorizontalOptions 아닌 속성 또는 VerticalOptions 속성을 사용하는 경우 이 Size 속성이 필요합니다.
VerticalOptions LayoutAlignment 화면에 세로 LayoutAlignment 로 배치할 Popup 위치를 가져오거나 설정합니다.

Events

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

예제

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

API

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