[C#/WINUI3/.NET6] SplitButton 엘리먼트 : Flyout 속성에서 GridView 객체를 사용해 드롭 다운 버튼 만들기

■ SplitButton 엘리먼트의 Flyout 속성에서 GridView 객체를 사용해 드롭 다운 버튼을 만드는 방법을 보여준다.

▶ MainWindow.xaml


<?xml version="1.0" encoding="utf-8"?>
<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="TestProject">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <StackPanel>
            <SplitButton Name="splitButton"
                Padding="0">
                <Border Name="border"
                    Margin="0"
                    Width="32"
                    Height="32"
                    Background="Green"
                    CornerRadius="4 0 0 4" />
                <SplitButton.Flyout>
                    <Flyout Placement="Bottom">
                        <GridView Name="gridView"
                            IsItemClickEnabled="True">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <ItemsWrapGrid
                                        Orientation="Horizontal"
                                        MaximumRowsOrColumns="3" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.Resources>
                                <Style TargetType="Rectangle">
                                    <Setter Property="Width"   Value="32" />
                                    <Setter Property="Height"  Value="32" />
                                    <Setter Property="RadiusX" Value="4"  />
                                    <Setter Property="RadiusY" Value="4"  />
                                </Style>
                            </GridView.Resources>
                            <GridView.Items>
                                <Rectangle Fill="Red"    />
                                <Rectangle Fill="Orange" />
                                <Rectangle Fill="Yellow" />
                                <Rectangle Fill="Green"  />
                                <Rectangle Fill="Blue"   />
                                <Rectangle Fill="Indigo" />
                                <Rectangle Fill="Violet" />
                                <Rectangle Fill="Gray"   />
                            </GridView.Items>
                        </GridView>
                    </Flyout>
                </SplitButton.Flyout>
            </SplitButton>
            <RichEditBox Name="richEditBox"
                Margin="0 10 0 0"
                Width="240"
                MinHeight="96"
                PlaceholderText="Type something here" />
        </StackPanel>
    </StackPanel>
</Window>

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

<Window x:Class="TestProject.MainWindow"

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

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

Title="TestProject">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<SplitButton Name="splitButton"

Padding="0">

<Border Name="border"

Margin="0"

Width="32"

Height="32"

Background="Green"

CornerRadius="4 0 0 4" />

<SplitButton.Flyout>

<GridView Name="gridView"

IsItemClickEnabled="True">

<GridView.ItemsPanel>

<ItemsWrapGrid

Orientation="Horizontal"

MaximumRowsOrColumns="3" />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

<GridView.Resources>

</Style>

</GridView.Resources>

<GridView.Items>

</GridView.Items>

</GridView>

</Flyout>

</SplitButton.Flyout>

</SplitButton>

<RichEditBox Name="richEditBox"

Margin="0 10 0 0"

Width="240"

MinHeight="96"

PlaceholderText="Type something here" />

</StackPanel>

</Window>

▶ MainWindow.xaml.cs


using System.Threading.Tasks;

using Windows.UI;

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

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public sealed partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 현재 색상
        /// </summary>
        private Color currentColor = Colors.Green;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;

            this.richEditBox.Document.Selection.SetText
            (
                TextSetOptions.None,
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor commodo ullamcorper a lacus."
            );

            this.splitButton.Click       += splitButton_Click;
            this.gridView.ItemClick      += gridView_ItemClick;
            this.richEditBox.TextChanged += richEditBox_TextChanged;
        }

        #endregion

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

        #region 스플릿 버튼 클릭시 처리하기 - splitButton_Click(sender, e)

        /// <summary>
        /// 스플릿 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void splitButton_Click(SplitButton sender, SplitButtonClickEventArgs e)
        {
            Border border = sender.Content as Border;

            Color color = (border.Background as SolidColorBrush).Color;

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

            this.currentColor = color;
        }

        #endregion
        #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

        /// <summary>
        /// 그리드 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void gridView_ItemClick(object sender, ItemClickEventArgs e)
        {
            Rectangle rectangle = e.ClickedItem as Rectangle;

            Color color = (rectangle.Fill as SolidColorBrush).Color;

            this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

            this.border.Background = new SolidColorBrush(color);

            this.richEditBox.Focus(FocusState.Keyboard);

            this.currentColor = color;

            Task.Delay(10).ContinueWith(_ => this.splitButton.Flyout.Hide(), TaskScheduler.FromCurrentSynchronizationContext());
        }

        #endregion
        #region 리치 에디트 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e)

        /// <summary>
        /// 리치 에디트 박스 텍스트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void richEditBox_TextChanged(object sender, RoutedEventArgs e)
        {
            if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != this.currentColor)
            {
                this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;
            }
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

using System.Threading.Tasks;

using Windows.UI;

using Microsoft.UI;

using Microsoft.UI.Text;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media;

using Microsoft.UI.Xaml.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public sealed partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 현재 색상

/// </summary>

private Color currentColor = Colors.Green;

#endregion

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;

this.richEditBox.Document.Selection.SetText

(

TextSetOptions.None,

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tempor commodo ullamcorper a lacus."

);

this.splitButton.Click += splitButton_Click;

this.gridView.ItemClick += gridView_ItemClick;

this.richEditBox.TextChanged += richEditBox_TextChanged;

}

#endregion

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

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

#region 스플릿 버튼 클릭시 처리하기 - splitButton_Click(sender, e)

/// <summary>

/// 스플릿 버튼 클릭시 처리하기

/// </summary>

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

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

private void splitButton_Click(SplitButton sender, SplitButtonClickEventArgs e)

{

Border border = sender.Content as Border;

Color color = (border.Background as SolidColorBrush).Color;

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

this.currentColor = color;

}

#endregion

#region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e)

/// <summary>

/// 그리드 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

Rectangle rectangle = e.ClickedItem as Rectangle;

Color color = (rectangle.Fill as SolidColorBrush).Color;

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = color;

this.border.Background = new SolidColorBrush(color);

this.richEditBox.Focus(FocusState.Keyboard);

this.currentColor = color;

Task.Delay(10).ContinueWith(_ => this.splitButton.Flyout.Hide(), TaskScheduler.FromCurrentSynchronizationContext());

}

#endregion

#region 리치 에디트 박스 텍스트 변경시 처리하기 - richEditBox_TextChanged(sender, e)

/// <summary>

/// 리치 에디트 박스 텍스트 변경시 처리하기

/// </summary>

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

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

private void richEditBox_TextChanged(object sender, RoutedEventArgs e)

{

if(this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor != this.currentColor)

{

this.richEditBox.Document.Selection.CharacterFormat.ForegroundColor = this.currentColor;

}

#endregion

}

TestProject.zip