[C#/MAUI/.NET6] Popup 엘리먼트 : 팝업 표시하기

■ Popup 엘리먼트를 사용해 팝업을 표시하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<toolkit:Popup x:Class="TestProject.CustomPopup"
    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"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    Color="White"
    CanBeDismissedByTappingOutsideOfPopup="True">
    <Grid
        WidthRequest="300"
        HeightRequest="400">
        <VerticalStackLayout
            HorizontalOptions="Center"
            VerticalOptions="Center"
            Spacing="10">
            <Label
                HorizontalOptions="Center"
                FontSize="24"
                Text="샘플 팝업 입니다." />
            <HorizontalStackLayout
                HorizontalOptions="Center"
                Margin="10">
                <Button x:Name="okButton"
                    HorizontalOptions="Center"
                    Text="확인" />
                <Button x:Name="cancelButton"
                    Margin="10,0,0,0"
                    HorizontalOptions="Center"
                    Text="취소" />
            </HorizontalStackLayout>
        </VerticalStackLayout>
    </Grid>
</toolkit:Popup>

 

▶ MainPage.xaml.cs

using CommunityToolkit.Maui.Views;

namespace TestProject;

/// <summary>
/// 커스텀 팝업
/// </summary>
public partial class CustomPopup : Popup
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CustomPopup()

    /// <summary>
    /// 생성자
    /// </summary>
    public CustomPopup()
    {
        InitializeComponent();

        ResultWhenUserTapsOutsideOfPopup = "외부";

        this.okButton.Clicked     += okButton_Clicked;
        this.cancelButton.Clicked += cancelButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 확인 버튼 클릭시 처리하기 - okButton_Clicked(sender, e)

    /// <summary>
    /// 확인 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void okButton_Clicked(object sender, EventArgs e)
    {
        Close("확인");
    }

    #endregion
    #region 취소 버튼 클릭시 처리하기 - cancelButton_Clicked(sender, e)

    /// <summary>
    /// 취소 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void cancelButton_Clicked(object sender, EventArgs e)
    {
        Close("취소");
    }

    #endregion
}

 

▶ MauiProgram.cs

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}