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

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

▶ 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">
    <Page.Resources>
        <muxc:CommandBarFlyout x:Name="commandBarFlyout"
            Placement="Right">
            <AppBarButton
                Icon="Share"
                Label="공유"
                ToolTipService.ToolTip="공유"
                Click="appBarButton_Click" />
            <AppBarButton
                Icon="Save"
                Label="저장"
                ToolTipService.ToolTip="Save"
                Click="appBarButton_Click" />
            <AppBarButton
                Icon="Delete"
                Label="삭제"
                ToolTipService.ToolTip="Delete"
                Click="appBarButton_Click" />
            <muxc:CommandBarFlyout.SecondaryCommands>
                <AppBarButton
                    Label="크기 조정"
                    Click="appBarButton_Click" />
                <AppBarButton
                    Label="이동"
                    Click="appBarButton_Click" />
            </muxc:CommandBarFlyout.SecondaryCommands>
        </muxc:CommandBarFlyout>
    </Page.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Spacing="10">
            <Button
                Padding="0"
                ContextRequested="button_ContextRequested"
                Click="button_Click">
                <Image Name="image"
                    Height="300"
                    Source="/IMAGE/rainier.jpg" />
            </Button>
            <TextBlock Name="textBlock"
                Text="" />
        </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">

<Page.Resources>

<muxc:CommandBarFlyout x:Name="commandBarFlyout"

Placement="Right">

<AppBarButton

Icon="Share"

Label="공유"

ToolTipService.ToolTip="공유"

Click="appBarButton_Click" />

<AppBarButton

Icon="Save"

Label="저장"

ToolTipService.ToolTip="Save"

Click="appBarButton_Click" />

<AppBarButton

Icon="Delete"

Label="삭제"

ToolTipService.ToolTip="Delete"

Click="appBarButton_Click" />

<muxc:CommandBarFlyout.SecondaryCommands>

<AppBarButton

Label="크기 조정"

Click="appBarButton_Click" />

<AppBarButton

Label="이동"

Click="appBarButton_Click" />

</muxc:CommandBarFlyout.SecondaryCommands>

</muxc:CommandBarFlyout>

</Page.Resources>

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="10">

<Button

Padding="0"

ContextRequested="button_ContextRequested"

Click="button_Click">

<Image Name="image"

Height="300"

Source="/IMAGE/rainier.jpg" />

</Button>

<TextBlock Name="textBlock"

Text="" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "CommandBarFlyout 엘리먼트 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

        /// <summary>
        /// 앱바 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void appBarButton_Click(object sender, RoutedEventArgs e)
        {
            AppBarButton button = sender as AppBarButton;

            this.textBlock.Text = $"메뉴를 클릭했습니다 : {button.Label}";
        }

        #endregion
        #region 버튼 컨텍스트 메뉴 요청시 처리하기 - button_ContextRequested(element, e)

        /// <summary>
        /// 버튼 컨텍스트 메뉴 요청시 처리하기
        /// </summary>
        /// <param name="element">엘리먼트</param>
        /// <param name="e">이벤트 인자</param>
        private void button_ContextRequested(UIElement element, ContextRequestedEventArgs e)
        {
            ShowMenu(false);
        }

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

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

            ShowMenu(button.IsPointerOver);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 메뉴 표시하기 - ShowMenu(isTransient)

        /// <summary>
        /// 메뉴 표시하기
        /// </summary>
        /// <param name="isTransient">일시 여부</param>
        private void ShowMenu(bool isTransient)
        {
            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                FlyoutShowOptions option = new FlyoutShowOptions
                {
                    ShowMode  = isTransient ? FlyoutShowMode.Transient : FlyoutShowMode.Standard,
                    Placement = FlyoutPlacementMode.RightEdgeAlignedTop
                };

                this.commandBarFlyout.ShowAt(this.image, option);
            }
            else
            {
                this.commandBarFlyout.ShowAt(this.image);
            }
        }

        #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

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "CommandBarFlyout 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 앱바 버튼 클릭시 처리하기 - appBarButton_Click(sender, e)

/// <summary>

/// 앱바 버튼 클릭시 처리하기

/// </summary>

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

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

private void appBarButton_Click(object sender, RoutedEventArgs e)

{

AppBarButton button = sender as AppBarButton;

this.textBlock.Text = $"메뉴를 클릭했습니다 : {button.Label}";

}

#endregion

#region 버튼 컨텍스트 메뉴 요청시 처리하기 - button_ContextRequested(element, e)

/// <summary>

/// 버튼 컨텍스트 메뉴 요청시 처리하기

/// </summary>

/// <param name="element">엘리먼트</param>

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

private void button_ContextRequested(UIElement element, ContextRequestedEventArgs e)

{

ShowMenu(false);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void button_Click(object sender, RoutedEventArgs e)

{

Button button = sender as Button;

ShowMenu(button.IsPointerOver);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 메뉴 표시하기 - ShowMenu(isTransient)

/// <summary>

/// 메뉴 표시하기

/// </summary>

/// <param name="isTransient">일시 여부</param>

private void ShowMenu(bool isTransient)

{

if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

FlyoutShowOptions option = new FlyoutShowOptions

{

ShowMode = isTransient ? FlyoutShowMode.Transient : FlyoutShowMode.Standard,

Placement = FlyoutPlacementMode.RightEdgeAlignedTop

};

this.commandBarFlyout.ShowAt(this.image, option);

}

else

{

this.commandBarFlyout.ShowAt(this.image);

}

#endregion

}

TestProject.zip