[C#/WINUI3/.NET8] DropDownButton 엘리먼트 : Flyout 속성을 사용해 드롭 다운 버튼 만들기

■ DropDownButton 엘리먼트의 Flyout 속성을 사용해 드롭 다운 버튼을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Spacing="10">
        <DropDownButton ToolTipService.ToolTip="Alignment">
            <TextBlock
                FontFamily="Segoe MDL2 Assets"
                FontSize="14"
                Text="&#xE8E4;" />
            <DropDownButton.Flyout>
                <MenuFlyout Placement="BottomEdgeAlignedLeft">
                    <MenuFlyoutItem Name="menuFlyoutItem1"
                        Icon="AlignLeft"
                        Text="Left"
                        Tag="left" />
                    <MenuFlyoutItem Name="menuFlyoutItem2"
                        Icon="AlignCenter"
                        Text="Center"
                        Tag="center" />
                    <MenuFlyoutItem Name="menuFlyoutItem3"
                        Icon="AlignRight"
                        Text="Right"
                        Tag="right" />
                </MenuFlyout>
            </DropDownButton.Flyout>
        </DropDownButton>
        <RichEditBox Name="richEditBox"
            HorizontalAlignment="Center"
            Width="400"
            Height="300" />
    </StackPanel>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="10">

<TextBlock

FontFamily="Segoe MDL2 Assets"

FontSize="14"

Text="" />

<DropDownButton.Flyout>

<MenuFlyoutItem Name="menuFlyoutItem1"

Icon="AlignLeft"

Text="Left"

Tag="left" />

<MenuFlyoutItem Name="menuFlyoutItem2"

Icon="AlignCenter"

Text="Center"

Tag="center" />

<MenuFlyoutItem Name="menuFlyoutItem3"

Icon="AlignRight"

Text="Right"

Tag="right" />

</MenuFlyout>

</DropDownButton.Flyout>

</DropDownButton>

<RichEditBox Name="richEditBox"

HorizontalAlignment="Center"

Width="400"

Height="300" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Text;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        this.richEditBox.Document.SetText(TextSetOptions.FormatRtf, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet erat vel massa rutrum, eget mollis massa vulputate. Vivamus semper augue leo, eget faucibus nulla mattis nec. Donec scelerisque lacus at dui ultricies, eget auctor ipsum placerat. Integer aliquet libero sed nisi eleifend, nec rutrum arcu lacinia. Sed a sem et ante gravida congue sit amet ut augue. Donec quis pellentesque urna, non finibus metus. Proin sed ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet erat vel massa rutrum, eget mollis massa vulputate. Vivamus semper augue leo, eget faucibus nulla mattis nec. Donec scelerisque lacus at dui ultricies, eget auctor ipsum placerat. Integer aliquet libero sed nisi eleifend, nec rutrum arcu lacinia. Sed a sem et ante gravida congue sit amet ut augue. Donec quis pellentesque urna, non finibus metus. Proin sed ornare tellus.");

        this.menuFlyoutItem1.Click += menuFlyoutItem_Click;
        this.menuFlyoutItem2.Click += menuFlyoutItem_Click;
        this.menuFlyoutItem3.Click += menuFlyoutItem_Click;
    }

    #endregion

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

    #region 메뉴 플라이아웃 항목 클릭시 처리하기 - menuFlyoutItem_Click(sender, e)

    /// <summary>
    /// 메뉴 플라이아웃 항목 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void menuFlyoutItem_Click(object sender, RoutedEventArgs e)
    {
        string tag = (sender as MenuFlyoutItem).Tag.ToString();

        ITextSelection textSelection = this.richEditBox.Document.Selection;

        if(textSelection != null)
        {
            ITextParagraphFormat textParagraphFormat = textSelection.ParagraphFormat;

            if(tag == "left")
            {
                textParagraphFormat.Alignment = ParagraphAlignment.Left;
            }
            else if(tag == "center")
            {
                textParagraphFormat.Alignment = ParagraphAlignment.Center;
            }
            else if(tag == "right")
            {
                textParagraphFormat.Alignment = ParagraphAlignment.Right;
            }
        }
    }

    #endregion
}

using Microsoft.UI.Text;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.richEditBox.Document.SetText(TextSetOptions.FormatRtf, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet erat vel massa rutrum, eget mollis massa vulputate. Vivamus semper augue leo, eget faucibus nulla mattis nec. Donec scelerisque lacus at dui ultricies, eget auctor ipsum placerat. Integer aliquet libero sed nisi eleifend, nec rutrum arcu lacinia. Sed a sem et ante gravida congue sit amet ut augue. Donec quis pellentesque urna, non finibus metus. Proin sed ornare tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet erat vel massa rutrum, eget mollis massa vulputate. Vivamus semper augue leo, eget faucibus nulla mattis nec. Donec scelerisque lacus at dui ultricies, eget auctor ipsum placerat. Integer aliquet libero sed nisi eleifend, nec rutrum arcu lacinia. Sed a sem et ante gravida congue sit amet ut augue. Donec quis pellentesque urna, non finibus metus. Proin sed ornare tellus.");

this.menuFlyoutItem1.Click += menuFlyoutItem_Click;

this.menuFlyoutItem2.Click += menuFlyoutItem_Click;

this.menuFlyoutItem3.Click += menuFlyoutItem_Click;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 메뉴 플라이아웃 항목 클릭시 처리하기 - menuFlyoutItem_Click(sender, e)

/// <summary>

/// 메뉴 플라이아웃 항목 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void menuFlyoutItem_Click(object sender, RoutedEventArgs e)

{

string tag = (sender as MenuFlyoutItem).Tag.ToString();

ITextSelection textSelection = this.richEditBox.Document.Selection;

if(textSelection != null)

{

ITextParagraphFormat textParagraphFormat = textSelection.ParagraphFormat;

if(tag == "left")

{

textParagraphFormat.Alignment = ParagraphAlignment.Left;

}

else if(tag == "center")

{

textParagraphFormat.Alignment = ParagraphAlignment.Center;

}

else if(tag == "right")

{

textParagraphFormat.Alignment = ParagraphAlignment.Right;

}

#endregion

}

TestProject.zip