[C#/WINUI2.5] ToggleSplitButton 엘리먼트 사용하기

■ ToggleSplitButton 엘리먼트를 사용하는 방법을 보여준다.

▶ MainPage.xaml


<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <muxc:ToggleSplitButton Name="toggleSplitButton" AutomationProperties.Name="bullets"
                IsCheckedChanged="toggleSplitButton_IsCheckedChanged">
                <SymbolIcon Name="currentSymbolIcon"
                    Symbol="List" />
                <muxc:ToggleSplitButton.Flyout>
                    <Flyout Placement="Bottom">
                        <StackPanel Orientation="Horizontal">
                            <StackPanel.Resources>
                                <Style TargetType="Button">
                                    <Setter Property="Margin"    Value="5" />
                                    <Setter Property="MinWidth"  Value="0" />
                                    <Setter Property="MinHeight" Value="0" />
                                    <Setter Property="Padding"   Value="5" />
                                </Style>
                            </StackPanel.Resources>
                            <Button AutomationProperties.Name="bulleted list"
                                Click="bulletButton_Click">
                                <SymbolIcon Symbol="List" />
                            </Button>
                            <Button AutomationProperties.Name="roman numerals list"
                                Click="bulletButton_Click">
                                <SymbolIcon Symbol="Bullets" />
                            </Button>
                        </StackPanel>
                    </Flyout>
                </muxc:ToggleSplitButton.Flyout>
            </muxc:ToggleSplitButton>
            <RichEditBox Name="richEditBox"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Width="240"
                MinHeight="96"
                PlaceholderText="Type something here" />
        </StackPanel>
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

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

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

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<muxc:ToggleSplitButton Name="toggleSplitButton" AutomationProperties.Name="bullets"

IsCheckedChanged="toggleSplitButton_IsCheckedChanged">

<SymbolIcon Name="currentSymbolIcon"

Symbol="List" />

<muxc:ToggleSplitButton.Flyout>

<StackPanel.Resources>

</Style>

</StackPanel.Resources>

<Button AutomationProperties.Name="bulleted list"

Click="bulletButton_Click">

</Button>

<Button AutomationProperties.Name="roman numerals list"

Click="bulletButton_Click">

</Button>

</StackPanel>

</Flyout>

</muxc:ToggleSplitButton.Flyout>

</muxc:ToggleSplitButton>

<RichEditBox Name="richEditBox"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Width="240"

MinHeight="96"

PlaceholderText="Type something here" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.Text;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Automation;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 현재 마커 타입
        /// </summary>
        private MarkerType currentMarkerType = MarkerType.Bullet;

        #endregion

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

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "ToggleSplitButton 엘리먼트 사용하기";

            #endregion

            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."
            );
        }

        #endregion

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

        #region 불릿 버튼 클릭시 처리하기 - bulletButton_Click(sender, e)

        /// <summary>
        /// 불릿 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void bulletButton_Click(object sender, RoutedEventArgs e)
        {
            Button buttonClicked = (Button)sender;

            SymbolIcon symbolIconClicked = buttonClicked.Content as SymbolIcon;

            if(symbolIconClicked.Symbol == Symbol.List)
            {
                this.currentMarkerType = MarkerType.Bullet;

                this.currentSymbolIcon.Symbol = Symbol.List;

                this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "bullets");
            }
            else if(symbolIconClicked.Symbol == Symbol.Bullets)
            {
                this.currentMarkerType = MarkerType.UppercaseRoman;

                this.currentSymbolIcon.Symbol = Symbol.Bullets;

                this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "roman numerals");
            }

            this.richEditBox.Document.Selection.ParagraphFormat.ListType = this.currentMarkerType;

            this.toggleSplitButton.IsChecked = true;

            this.toggleSplitButton.Flyout.Hide();

            this.richEditBox.Focus(FocusState.Keyboard);
        }

        #endregion
        #region 토글 분리 버튼 체크 여부 변경시 처리하기 - toggleSplitButton_IsCheckedChanged(sender, e)

        /// <summary>
        /// 토글 분리 버튼 체크 여부 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void toggleSplitButton_IsCheckedChanged
        (
            Microsoft.UI.Xaml.Controls.ToggleSplitButton                          sender,
            Microsoft.UI.Xaml.Controls.ToggleSplitButtonIsCheckedChangedEventArgs e
        )
        {
            if(sender.IsChecked)
            {
                this.richEditBox.Document.Selection.ParagraphFormat.ListType = currentMarkerType;
            }
            else
            {
                this.richEditBox.Document.Selection.ParagraphFormat.ListType = MarkerType.None;
            }
        }

        #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

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.Text;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Automation;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 현재 마커 타입

/// </summary>

private MarkerType currentMarkerType = MarkerType.Bullet;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

#region 윈도우 크기를 설정한다.

double width = 800d;

double height = 600d;

double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

ApplicationView.PreferredLaunchViewSize = windowSize;

Window.Current.Activate();

ApplicationView.GetForCurrentView().TryResizeView(windowSize);

#endregion

#region 윈도우 제목을 설정한다.

ApplicationView.GetForCurrentView().Title = "ToggleSplitButton 엘리먼트 사용하기";

#endregion

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."

);

}

#endregion

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

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

#region 불릿 버튼 클릭시 처리하기 - bulletButton_Click(sender, e)

/// <summary>

/// 불릿 버튼 클릭시 처리하기

/// </summary>

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

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

private void bulletButton_Click(object sender, RoutedEventArgs e)

{

Button buttonClicked = (Button)sender;

SymbolIcon symbolIconClicked = buttonClicked.Content as SymbolIcon;

if(symbolIconClicked.Symbol == Symbol.List)

{

this.currentMarkerType = MarkerType.Bullet;

this.currentSymbolIcon.Symbol = Symbol.List;

this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "bullets");

}

else if(symbolIconClicked.Symbol == Symbol.Bullets)

{

this.currentMarkerType = MarkerType.UppercaseRoman;

this.currentSymbolIcon.Symbol = Symbol.Bullets;

this.toggleSplitButton.SetValue(AutomationProperties.NameProperty, "roman numerals");

}

this.richEditBox.Document.Selection.ParagraphFormat.ListType = this.currentMarkerType;

this.toggleSplitButton.IsChecked = true;

this.toggleSplitButton.Flyout.Hide();

this.richEditBox.Focus(FocusState.Keyboard);

}

#endregion

#region 토글 분리 버튼 체크 여부 변경시 처리하기 - toggleSplitButton_IsCheckedChanged(sender, e)

/// <summary>

/// 토글 분리 버튼 체크 여부 변경시 처리하기

/// </summary>

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

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

private void toggleSplitButton_IsCheckedChanged

(

Microsoft.UI.Xaml.Controls.ToggleSplitButton sender,

Microsoft.UI.Xaml.Controls.ToggleSplitButtonIsCheckedChangedEventArgs e

)

{

if(sender.IsChecked)

{

this.richEditBox.Document.Selection.ParagraphFormat.ListType = currentMarkerType;

}

else

{

this.richEditBox.Document.Selection.ParagraphFormat.ListType = MarkerType.None;

}

#endregion

}

TestProject.zip