팝업 - .NET MAUI 커뮤니티 도구 키트 - Community Toolkits for .NET

아티클
11/11/2023

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

참고 항목

사용자에게 좀 더 미묘한 내용을 표시하려면 알림 및 스낵바 옵션을 검사.

이 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 호출하거나 CloseAsyncPopup 그 자체로 호출 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>

참고 항목

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

속성

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

Share via

XAML

XAML 네임스페이스 포함

C#

IPopupService

팝업 등록

팝업 표시

확장 메서드

결과 반환

XAML

스타일 적용

속성

Events

예제

API

피드백

추가 리소스

Share via

팝업

팝업 빌드

XAML

XAML 네임스페이스 포함

팝업 정의

C#

팝업 표시

IPopupService

팝업 등록

팝업 표시

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

확장 메서드

팝업 닫기

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

팝업 외부에서 탭

결과 반환

XAML

스타일 적용

속성

Events

예제

API

피드백

추가 리소스