다음을 통해 공유

팝업

  • 아티클

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

참고 항목

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

이 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 통해 표시할 수 있습니다.

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 호출하거나 CloseCloseAsync 그 자체로 호출 Popup 해야 합니다. 이 작업은 일반적으로 사용자의 단추 누름에 응답하여 수행됩니다.

확인을 추가하여 이전 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>

참고 항목

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

속성

속성 Type 설명
Anchor View 앵커를 View 가져오거나 설정합니다. 앵커는 팝업이 가장 가깝게 렌더링되는 위치입니다. 앵커가 구성되면 팝업이 해당 컨트롤을 중심으로 또는 가능한 한 가깝게 표시됩니다.
CanBeDismissedByTappingOutsideOfPopup bool 팝업 외부를 탭하여 팝업을 해제할 수 있는지 여부를 나타내는 값을 가져오거나 설정합니다. Android에서 - false이면 하드웨어 뒤로 단추를 사용할 수 없습니다.
Color Color 팝업의 값을 Color 가져오거나 설정합니다. 이 색은 실제Popup에 구성된 배경색Content과 무관한 네이티브 배경색을 설정합니다.
Content View 에서 ViewPopup렌더링할 콘텐츠를 가져오거나 설정합니다.
HorizontalOptions LayoutAlignment 화면에 가로 위치를 지정하는 데 사용할 LayoutAlignment 위치를 가져오거나 설정합니다Popup.
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 소스 코드를 찾을 수 있습니다.