11월 2023 - 6 중 6 번째 페이지

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 연결 애니메이션 구성 사용하기

■ ConnectedAnimation 클래스에서 연결 애니메이션 구성을 사용하는 방법을 보여준다. ▶ SimplePage1.xaml


<Page x:Class="TestProject.SamplePage1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
            <Grid Grid.Row="1" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Grid.Row="1" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="1"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="LightGray" />
            <Grid Grid.Row="2" Grid.Column="2"
                Margin="5"
                MinHeight="{StaticResource TileHeightKey}"
                Background="DarkGray" />
            <Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"
                Margin="5"
                MinWidth="250"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <Grid Grid.Row="3" Grid.ColumnSpan="3"
                Margin="5 10">
                <TextBlock
                    Style="{ThemeResource BodyTextBlockStyle}"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage1"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="1" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Grid.Row="1" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="1"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="LightGray" />

<Grid Grid.Row="2" Grid.Column="2"

Margin="5"

MinHeight="{StaticResource TileHeightKey}"

Background="DarkGray" />

<Grid Name="sourceGrid" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"

Margin="5"

MinWidth="250"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<Grid Grid.Row="3" Grid.ColumnSpan="3"

Margin="5 10">

<TextBlock

Style="{ThemeResource BodyTextBlockStyle}"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

</Grid>

</ScrollViewer>

</Page>

▶ SimplePage1.xaml.cs


using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Animation;
using Microsoft.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 샘플 페이지 1
    /// </summary>
    public sealed partial class SamplePage1 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage1()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

            if(animation != null)
            {
                animation.TryStart(this.sourceGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 샘플 페이지 1

/// </summary>

public sealed partial class SamplePage1 : Page

{

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

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

#region 생성자 - SamplePage1()

/// <summary>

/// 생성자

/// </summary>

public SamplePage1()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("ForwardConnectedAnimation", this.sourceGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardConnectedAnimation");

if(animation != null)

{

animation.TryStart(this.sourceGrid);

}

#endregion

}

▶ SimplePage2.xaml


<Page x:Class="TestProject.SamplePage2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.Resources>
                <x:Double x:Key="TileHeightKey">150</x:Double>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"
                VerticalAlignment="Top"
                Margin="10"
                Width="150"
                Height="200"
                MinHeight="{StaticResource TileHeightKey}"
                Background="{ThemeResource SystemAccentColor}" />
            <StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"
                Margin="10"
                MinHeight="200">
                <TextBlock
                    Style="{ThemeResource TitleTextBlockStyle}"
                    Margin="0 0 0 10"
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
                <TextBlock
                    TextWrapping="WrapWholeWords"
                    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

<Page x:Class="TestProject.SamplePage2"

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

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

<Grid.Resources>

<x:Double x:Key="TileHeightKey">150</x:Double>

</Grid.Resources>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Name="targetGrid" Grid.Row="1" Grid.Column="0"

VerticalAlignment="Top"

Margin="10"

Width="150"

Height="200"

MinHeight="{StaticResource TileHeightKey}"

Background="{ThemeResource SystemAccentColor}" />

<StackPanel Name="contentStackPanel" Grid.Row="1" Grid.Column="1"

Margin="10"

MinHeight="200">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

Margin="0 0 0 10"

TextWrapping="WrapWholeWords"

Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />

<TextBlock

TextWrapping="WrapWholeWords"

</StackPanel>

</Grid>

</ScrollViewer>

</Page>

▶ SimplePage2.xaml.cs


using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Animation;
using Microsoft.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 생성자
    /// </summary>
    public sealed partial class SamplePage2 : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - SamplePage2()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

        /// <summary>
        /// 연결 애니메이션 준비하기
        /// </summary>
        /// <param name="configuration">연결 애니메이션 구성</param>
        public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardConnectedAnimation", this.targetGrid);

            if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = configuration;
            }
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

        /// <summary>
        /// 탐색되는 경우 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardConnectedAnimation");

            if(animation != null)
            {
                this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

                animation.TryStart(this.targetGrid);
            }
        }

        #endregion
    }
}

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 생성자

/// </summary>

public sealed partial class SamplePage2 : Page

{

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

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

#region 생성자 - SamplePage2()

/// <summary>

/// 생성자

/// </summary>

public SamplePage2()

{

InitializeComponent();

}

#endregion

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

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

#region 연결 애니메이션 준비하기 - PrepareConnectedAnimation(configuration)

/// <summary>

/// 연결 애니메이션 준비하기

/// </summary>

/// <param name="configuration">연결 애니메이션 구성</param>

public void PrepareConnectedAnimation(ConnectedAnimationConfiguration configuration)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackwardConnectedAnimation", this.targetGrid);

if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))

{

animation.Configuration = configuration;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

#region 탐색되는 경우 처리하기 - OnNavigatedTo(e)

/// <summary>

/// 탐색되는 경우 처리하기

/// </summary>

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

protected override void OnNavigatedTo(NavigationEventArgs e)

{

base.OnNavigatedTo(e);

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardConnectedAnimation");

if(animation != null)

{

this.contentStackPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() };

animation.TryStart(this.targetGrid);

}

#endregion

}

▶

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 동일 페이지에서 연결 애니메이션 만들기

■ ConnectedAnimation 클래스를 사용해 동일 페이지에서 연결 애니메이션을 만드는 방법을 보여준다. ▶ CardPage.xaml


<Page x:Class="TestProject.CardPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid Margin="10"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView Name="gridView"
            IsItemClickEnabled="True">
            <GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem" BasedOn="{StaticResource GridViewItemRevealStyle}">
                    <Style.Setters>
                        <Setter Property="Margin" Value="10" />
                    </Style.Setters>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Name="itemGrid"
                        Width="190"
                        Height="250">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"    />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Height="100"
                            Background="{ThemeResource SystemAccentColor}">
                            <TextBlock
                                Style="{ThemeResource TitleTextBlockStyle}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="Item" />
                        </Grid>
                        <Grid Grid.Row="1"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Margin="10"
                                Text="{Binding}" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <Grid x:Name="smokeGrid"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Visibility="Collapsed">
            <Grid.Background>
                <SolidColorBrush
                    Color="{ThemeResource SystemChromeAltHighColor}"
                    Opacity="0.8" />
            </Grid.Background>
            <Grid Name="targetGrid"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Width="320"
                Height="400"
                BorderThickness="1"
                BorderBrush="{ThemeResource SystemAccentColor}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*"    />
                </Grid.RowDefinitions>
                <Grid Grid.Row="0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Height="170"
                    Background="{ThemeResource SystemAccentColor}">
                    <TextBlock
                        Style="{ThemeResource HeaderTextBlockStyle}"
                        VerticalAlignment="Center"
                        Margin="10"
                        Text="Header" />
                    <Button Name="backButton"
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Margin="5"
                        Width="40"
                        Height="40"
                        ToolTipService.ToolTip="Close">
                        <Button.Content>
                            <SymbolIcon Symbol="Clear" />
                        </Button.Content>
                    </Button>
                </Grid>
                <Grid Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                    <TextBlock
                        Style="{ThemeResource BaseTextBlockStyle}"
                        Margin="10"
                        Text="Content" />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Page>

100

101

102

103

104

105

<Page x:Class="TestProject.CardPage"

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

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

<Grid Margin="10"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<GridView Name="gridView"

IsItemClickEnabled="True">

<GridView.ItemContainerStyle>

<Style.Setters>

</Style.Setters>

</Style>

</GridView.ItemContainerStyle>

<GridView.ItemTemplate>

<Grid Name="itemGrid"

Width="190"

Height="250">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Height="100"

Background="{ThemeResource SystemAccentColor}">

<TextBlock

Style="{ThemeResource TitleTextBlockStyle}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="Item" />

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Margin="10"

Text="{Binding}" />

</Grid>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

<Grid x:Name="smokeGrid"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Visibility="Collapsed">

<Grid.Background>

<SolidColorBrush

Color="{ThemeResource SystemChromeAltHighColor}"

Opacity="0.8" />

</Grid.Background>

<Grid Name="targetGrid"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="320"

Height="400"

BorderThickness="1"

BorderBrush="{ThemeResource SystemAccentColor}">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Height="170"

Background="{ThemeResource SystemAccentColor}">

<TextBlock

Style="{ThemeResource HeaderTextBlockStyle}"

VerticalAlignment="Center"

Margin="10"

Text="Header" />

<Button Name="backButton"

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="5"

Width="40"

Height="40"

ToolTipService.ToolTip="Close">

<Button.Content>

</Button.Content>

</Button>

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

Style="{ThemeResource BaseTextBlockStyle}"

Margin="10"

Text="Content" />

</Grid>

</Page>

▶ CardPage.xaml.cs


using System;
using System.Collections.Generic;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject
{
    /// <summary>
    /// 카드 페이지
    /// </summary>
    public sealed partial class CardPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 저장 항목
        /// </summary>
        private int storedItem;

        #endregion

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

        #region 생성자 - CardPage()

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

            List<int> itemList = new List<int>();

            for(int i = 0; i < 30; i++)
            {
                itemList.Add(i);
            }

            this.gridView.ItemsSource = itemList;

            this.gridView.ItemClick += gridView_ItemClick;
            this.backButton.Click   += backButton_Click;
        }

        #endregion

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

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

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

            if(this.gridView.ContainerFromItem(e.ClickedItem) is GridViewItem gridViewItem)
            {
                this.storedItem = Convert.ToInt32(gridViewItem.Content);

                animation = this.gridView.PrepareConnectedAnimation("forwardAnimation", this.storedItem, "itemGrid");
            }

            this.smokeGrid.Visibility = Visibility.Visible;

            animation.TryStart(this.targetGrid);
        }

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

        /// <summary>
        /// Back 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private async void backButton_Click(object sender, RoutedEventArgs e)
        {
            ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backwardsAnimation", this.targetGrid);

            this.smokeGrid.Children.Remove(targetGrid);

            animation.Completed += animation_Completed;

            this.gridView.ScrollIntoView(this.storedItem, ScrollIntoViewAlignment.Default);

            this.gridView.UpdateLayout();

            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                animation.Configuration = new DirectConnectedAnimationConfiguration();
            }

            await this.gridView.TryStartConnectedAnimationAsync(animation, this.storedItem, "itemGrid");
        }

        #endregion
        #region 애니메이션 완료시 처리하기 - animation_Completed(sender, e)

        /// <summary>
        /// 애니메이션 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void animation_Completed(ConnectedAnimation sender, object e)
        {
            this.smokeGrid.Visibility = Visibility.Collapsed;

            this.smokeGrid.Children.Add(this.targetGrid);
        }

        #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

using System;

using System.Collections.Generic;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject

{

/// <summary>

/// 카드 페이지

/// </summary>

public sealed partial class CardPage : Page

{

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

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

#region Field

/// <summary>

/// 저장 항목

/// </summary>

private int storedItem;

#endregion

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

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

#region 생성자 - CardPage()

/// <summary>

/// 생성자

/// </summary>

public CardPage()

{

InitializeComponent();

List<int> itemList = new List<int>();

for(int i = 0; i < 30; i++)

{

itemList.Add(i);

}

this.gridView.ItemsSource = itemList;

this.gridView.ItemClick += gridView_ItemClick;

this.backButton.Click += backButton_Click;

}

#endregion

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

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

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

/// <summary>

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

/// </summary>

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

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

private void gridView_ItemClick(object sender, ItemClickEventArgs e)

{

ConnectedAnimation animation = null;

if(this.gridView.ContainerFromItem(e.ClickedItem) is GridViewItem gridViewItem)

{

this.storedItem = Convert.ToInt32(gridViewItem.Content);

animation = this.gridView.PrepareConnectedAnimation("forwardAnimation", this.storedItem, "itemGrid");

}

this.smokeGrid.Visibility = Visibility.Visible;

animation.TryStart(this.targetGrid);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private async void backButton_Click(object sender, RoutedEventArgs e)

{

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backwardsAnimation", this.targetGrid);

this.smokeGrid.Children.Remove(targetGrid);

animation.Completed += animation_Completed;

this.gridView.ScrollIntoView(this.storedItem, ScrollIntoViewAlignment.Default);

this.gridView.UpdateLayout();

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

{

animation.Configuration = new DirectConnectedAnimationConfiguration();

}

await this.gridView.TryStartConnectedAnimationAsync(animation, this.storedItem, "itemGrid");

}

#endregion

#region 애니메이션 완료시 처리하기 - animation_Completed(sender, e)

/// <summary>

/// 애니메이션 완료시 처리하기

/// </summary>

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

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

private void animation_Completed(ConnectedAnimation sender, object e)

{

this.smokeGrid.Visibility = Visibility.Collapsed;

this.smokeGrid.Children.Add(this.targetGrid);

}

#endregion

}

▶ 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">
    <Frame Name="frame" />
</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">

</Window>

▶ MainWindow.xaml.cs

[C#/WINUI3/.NET6] ConnectedAnimation 클래스 : 연결 애니메이션 만들기

■ ConnectedAnimation 클래스를 사용해 연결 애니메이션을 만드는 방법을 보여준다. ▶ CustomDataObject.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 데이터 객체
    /// </summary>
    public class CustomDataObject
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

        /// <summary>
        /// 제목
        /// </summary>
        public string Title { get; set; }

        #endregion
        #region 이미지 위치 - ImageLocation

        /// <summary>
        /// 이미지 위치
        /// </summary>
        public string ImageLocation { get; set; }

        #endregion
        #region 조회 수 - Views

        /// <summary>
        /// 조회 수
        /// </summary>
        public string Views { get; set; }

        #endregion
        #region 좋아요 수 - Likes

        /// <summary>
        /// 좋아요 수
        /// </summary>
        public string Likes { get; set; }

        #endregion
        #region 설명 - Description

        /// <summary>
        /// 설명
        /// </summary>
        public string Description { get; set; }

        #endregion

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

        #region 생성자 - CustomDataObject()

        /// <summary>
        /// 생성자
        /// </summary>
        public CustomDataObject()
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Static
        //////////////////////////////////////////////////////////////////////////////// Public

        #region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

        /// <summary>
        /// 커스텀 데이터 객체 리스트 구하기
        /// </summary>
        /// <param name="includeAllItems">모든 항목 포함 여부</param>
        /// <returns>커스텀 데이터 객체 리스트</returns>
        public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)
        {
            string[] descriptionArray = new string[]
            {
                @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",
                @"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",
                @"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",
                @"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",
                @"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",
                @"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",
                @"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",
                @"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",
            };

            Random random = new Random();

            int imageLocationCount = includeAllItems ? 13 : 8;

            List<CustomDataObject> customDataObjectList = new List<CustomDataObject>();

            for(int i = 0; i < imageLocationCount; i++)
            {
                customDataObjectList.Add
                (
                    new CustomDataObject()
                    {
                        Title         = $"Item {i + 1:D2}",
                        ImageLocation = $"/IMAGE/LandscapeImage{i + 1:D2}.jpg",
                        Views         = random.Next(100, 999).ToString(),
                        Likes         = random.Next(10, 99).ToString(),
                        Description   = descriptionArray[i % descriptionArray.Length],
                    }
                );
            }

            return customDataObjectList;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

using System;

using System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

public class CustomDataObject

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 위치 - ImageLocation

/// <summary>

/// 이미지 위치

/// </summary>

public string ImageLocation { get; set; }

#endregion

#region 조회 수 - Views

/// <summary>

/// 조회 수

/// </summary>

public string Views { get; set; }

#endregion

#region 좋아요 수 - Likes

/// <summary>

/// 좋아요 수

/// </summary>

public string Likes { get; set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; set; }

#endregion

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

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

#region 생성자 - CustomDataObject()

/// <summary>

/// 생성자

/// </summary>

public CustomDataObject()

{

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems)

/// <summary>

/// 커스텀 데이터 객체 리스트 구하기

/// </summary>

/// <param name="includeAllItems">모든 항목 포함 여부</param>

/// <returns>커스텀 데이터 객체 리스트</returns>

public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false)

{

string[] descriptionArray = new string[]

{

@"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.",

@"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.",

@"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.",

@"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.",

@"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.",

@"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.",

@"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.",

@"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.",

};

Random random = new Random();

int imageLocationCount = includeAllItems ? 13 : 8;

List<CustomDataObject> customDataObjectList = new List<CustomDataObject>();

for(int i = 0; i < imageLocationCount; i++)

{

customDataObjectList.Add

(

new CustomDataObject()

{

Title = $"Item {i + 1:D2}",

ImageLocation = $"/IMAGE/LandscapeImage{i + 1:D2}.jpg",

Views = random.Next(100, 999).ToString(),

Likes = random.Next(10, 99).ToString(),

Description = descriptionArray[i % descriptionArray.Length],

}

);

}

return customDataObjectList;

}

#endregion

}

▶ CollectionPage.xaml


<Page x:Class="TestProject.CollectionPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Name="listView"
            IsItemClickEnabled="True"
            SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:CustomDataObject">
                    <Grid Margin="0 10 0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="150" />
                            <ColumnDefinition Width="*"                   />
                        </Grid.ColumnDefinitions>
                        <Image Name="image" Grid.Column="0"
                            MaxHeight="100"
                            Stretch="Fill"
                            Source="{x:Bind ImageLocation}" />
                        <StackPanel Grid.Column="1"
                            Margin="10 0 0 0">
                            <TextBlock
                                Style="{ThemeResource SubtitleTextBlockStyle}"
                                HorizontalAlignment="Left"
                                Margin="0 0 0 5"
                                Text="{x:Bind Title}" />
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    FontWeight="Bold"
                                    Text="Views : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Views}" />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="10 0 0 0"
                                    FontWeight="Bold"
                                    Text="Likes : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind Likes}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Text="{x:Bind Description}"
                                    Style="{ThemeResource BodyTextBlockStyle}"
                                    FontStyle="Italic"
                                    Margin="0 10 0 0"
                                    TextTrimming="CharacterEllipsis"
                                    TextWrapping="Wrap"
                                    MaxWidth="500"
                                    MaxHeight="40"
                                    IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

<Page x:Class="TestProject.CollectionPage"

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

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

xmlns:local="using:TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<ListView Name="listView"

IsItemClickEnabled="True"

SelectionMode="None">

<ListView.ItemTemplate>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="image" Grid.Column="0"

MaxHeight="100"

Stretch="Fill"

Source="{x:Bind ImageLocation}" />

<StackPanel Grid.Column="1"

Margin="10 0 0 0">

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

HorizontalAlignment="Left"

Margin="0 0 0 5"

Text="{x:Bind Title}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

FontWeight="Bold"

Text="Views : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind Views}" />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="10 0 0 0"

FontWeight="Bold"

Text="Likes : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind Likes}" />

</StackPanel>

<TextBlock

Text="{x:Bind Description}"

Style="{ThemeResource BodyTextBlockStyle}"

FontStyle="Italic"

Margin="0 10 0 0"

TextTrimming="CharacterEllipsis"

TextWrapping="Wrap"

MaxWidth="500"

MaxHeight="40"

IsTextTrimmedChanged="descriptionTextBlock_IsTextTrimmedChanged" />

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Page>

▶ CollectionPage.xaml.cs


using System;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Media.Animation;
using Microsoft.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 컬렉션 페이지
    /// </summary>
    public sealed partial class CollectionPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 커스텀 데이터 객체
        /// </summary>
        private CustomDataObject customDataObject;

        #endregion

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

        #region 생성자 - CollectonPage()

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

            NavigationCacheMode = NavigationCacheMode.Enabled;

            this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();

            this.listView.Loaded    += listView_Loaded;
            this.listView.ItemClick += listView_ItemClick;
        }

        #endregion

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

        #region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

        /// <summary>
        /// 리스트 뷰 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private async void listView_Loaded(object sender, RoutedEventArgs e)
        {
            if(customDataObject != null)
            {
                this.listView.ScrollIntoView(this.customDataObject, ScrollIntoViewAlignment.Default);

                this.listView.UpdateLayout();

                ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackConnectedAnimation");

                if(animation != null)
                {
                    if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
                    {
                        animation.Configuration = new DirectConnectedAnimationConfiguration();
                    }

                    await this.listView.TryStartConnectedAnimationAsync(animation, customDataObject, "image");
                }

                this.listView.Focus(FocusState.Programmatic);
            }
        }

        #endregion
        #region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

        /// <summary>
        /// 리스트 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_ItemClick(object sender, ItemClickEventArgs e)
        {
            if(this.listView.ContainerFromItem(e.ClickedItem) is ListViewItem container)
            {
                this.customDataObject = container.Content as CustomDataObject;

                this.listView.PrepareConnectedAnimation("ForwardConnectedAnimation", this.customDataObject, "image");
            }

            Frame.Navigate(typeof(DetailPage), this.customDataObject, new SuppressNavigationTransitionInfo());
        }

        #endregion
        #region 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

        /// <summary>
        /// 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;

            string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

            ToolTipService.SetToolTip(textBlock, text);
        }

        #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

using System;

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

using Microsoft.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 컬렉션 페이지

/// </summary>

public sealed partial class CollectionPage : Page

{

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

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

#region Field

/// <summary>

/// 커스텀 데이터 객체

/// </summary>

private CustomDataObject customDataObject;

#endregion

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

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

#region 생성자 - CollectonPage()

/// <summary>

/// 생성자

/// </summary>

public CollectionPage()

{

InitializeComponent();

NavigationCacheMode = NavigationCacheMode.Enabled;

this.listView.ItemsSource = CustomDataObject.GetCustomDataObjectList();

this.listView.Loaded += listView_Loaded;

this.listView.ItemClick += listView_ItemClick;

}

#endregion

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

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

#region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

/// <summary>

/// 리스트 뷰 로드시 처리하기

/// </summary>

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

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

private async void listView_Loaded(object sender, RoutedEventArgs e)

{

if(customDataObject != null)

{

this.listView.ScrollIntoView(this.customDataObject, ScrollIntoViewAlignment.Default);

this.listView.UpdateLayout();

ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackConnectedAnimation");

if(animation != null)

{

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

{

animation.Configuration = new DirectConnectedAnimationConfiguration();

}

await this.listView.TryStartConnectedAnimationAsync(animation, customDataObject, "image");

}

this.listView.Focus(FocusState.Programmatic);

}

#endregion

#region 리스트 뷰 항목 클릭시 처리하기 - listView_ItemClick(sender, e)

/// <summary>

/// 리스트 뷰 항목 클릭시 처리하기

/// </summary>

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

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

private void listView_ItemClick(object sender, ItemClickEventArgs e)

{

if(this.listView.ContainerFromItem(e.ClickedItem) is ListViewItem container)

{

this.customDataObject = container.Content as CustomDataObject;

this.listView.PrepareConnectedAnimation("ForwardConnectedAnimation", this.customDataObject, "image");

}

Frame.Navigate(typeof(DetailPage), this.customDataObject, new SuppressNavigationTransitionInfo());

}

#endregion

#region 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기 - descriptionTextBlock_IsTextTrimmedChanged(sender, e)

/// <summary>

/// 설명 텍스트 블럭 텍스트 트리밍 변경시 처리하기

/// </summary>

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

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

private void descriptionTextBlock_IsTextTrimmedChanged(TextBlock sender, IsTextTrimmedChangedEventArgs e)

{

TextBlock textBlock = sender as TextBlock;

string text = textBlock.IsTextTrimmed ? textBlock.Text : string.Empty;

ToolTipService.SetToolTip(textBlock, text);

}

#endregion

}

▶ DatailPage.xaml


<Page x:Class="TestProject.DetailPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Background="{ThemeResource SystemControlAcrylicElementBrush}">
            <Button Name="goBackButton"
                Content="Go Back"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Background="{ThemeResource SystemAccentColor}" />
        </Grid>
        <Grid Grid.Row="0"
            Margin="20 50 20 20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>
            <Image Name="detailImage"
                VerticalAlignment="Top"
                MaxHeight="350"
                Stretch="Uniform"
                Source="{x:Bind CurrentCustomDataObject.ImageLocation}" />
            <StackPanel Name="detailStackPanel" Grid.Column="1"
                VerticalAlignment="Top"
                Margin="20 0">
                <TextBlock
                    Style="{ThemeResource SubheaderTextBlockStyle}"
                    Margin="0 0 0 10"
                    Text="{x:Bind CurrentCustomDataObject.Title}" />
                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        FontWeight="Bold"
                        Text="Views : " />
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        Margin="5 0 0 0"
                        Text="{x:Bind CurrentCustomDataObject.Views}" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        FontWeight="Bold"
                        Text="Likes : " />
                    <TextBlock
                        Style="{ThemeResource SubtitleTextBlockStyle}"
                        Margin="5 0 0 0"
                        Text="{x:Bind CurrentCustomDataObject.Likes}" />
                </StackPanel>
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1"
            Margin="10">
            <TextBlock
                Style="{ThemeResource SubtitleTextBlockStyle}"
                Text="{x:Bind CurrentCustomDataObject.Description}" />
        </Grid>
    </Grid>
</Page>

<Page x:Class="TestProject.DetailPage"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid Grid.Row="0"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlAcrylicElementBrush}">

<Button Name="goBackButton"

Content="Go Back"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Background="{ThemeResource SystemAccentColor}" />

</Grid>

<Grid Grid.Row="0"

Margin="20 50 20 20">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Name="detailImage"

VerticalAlignment="Top"

MaxHeight="350"

Stretch="Uniform"

Source="{x:Bind CurrentCustomDataObject.ImageLocation}" />

<StackPanel Name="detailStackPanel" Grid.Column="1"

VerticalAlignment="Top"

Margin="20 0">

<TextBlock

Style="{ThemeResource SubheaderTextBlockStyle}"

Margin="0 0 0 10"

Text="{x:Bind CurrentCustomDataObject.Title}" />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

FontWeight="Bold"

Text="Views : " />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind CurrentCustomDataObject.Views}" />

</StackPanel>

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

FontWeight="Bold"

Text="Likes : " />

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Margin="5 0 0 0"

Text="{x:Bind CurrentCustomDataObject.Likes}" />

</StackPanel>

</Grid>

<Grid Grid.Row="1"

Margin="10">

<TextBlock

Style="{ThemeResource SubtitleTextBlockStyle}"

Text="{x:Bind CurrentCustomDataObject.Description}" />

</Grid>

</Page>

▶

[C#/WINUI3/.NET6] MenuFlyout 엘리먼트 : 단축키 설정 MenuFlyoutItem 객체 사용하기

■ MenuFlyout 엘리먼트에서 단축키를 설정하는 MenuFlyoutItem 객체를 사용하는 방법을 보여준다. ▶ 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">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="5"
        Content="Edit Options">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Share">
                    <MenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xe72d;" />
                    </MenuFlyoutItem.Icon>
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="S" Modifiers="Control" />
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem
                    Icon="Copy"
                    FontFamily="Consolas"
                    Text="Copy">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="C" Modifiers="Control" />
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutItem
                    Icon="Delete"
                    FontFamily="Segoe UI"
                    Text="Delete">
                    <MenuFlyoutItem.KeyboardAccelerators>
                        <KeyboardAccelerator Key="Delete" />
                    </MenuFlyoutItem.KeyboardAccelerators>
                </MenuFlyoutItem>
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="Rename" />
                <MenuFlyoutItem Text="Select" />
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</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">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="Edit Options">

<Button.Flyout>

<MenuFlyoutItem.Icon>

</MenuFlyoutItem.Icon>

<MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem>

<MenuFlyoutItem

Icon="Copy"

FontFamily="Consolas"

Text="Copy">

<MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem>

<MenuFlyoutItem

Icon="Delete"

FontFamily="Segoe UI"

Text="Delete">

<MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem.KeyboardAccelerators>

</MenuFlyoutItem>

</MenuFlyout>

</Button.Flyout>

</Button>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] MenuFlyout 엘리먼트 : 아이콘 표시 MenuFlyoutItem 객체 사용하기

■ MenuFlyout 엘리먼트에서 아이콘 표시 MenuFlyoutItem 객체를 사용하는 방법을 보여준다. ▶ 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">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="5"
        Content="Edit Options">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Share">
                    <MenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE72D;" />
                    </MenuFlyoutItem.Icon>
                </MenuFlyoutItem>
                <MenuFlyoutItem
                    Icon="Copy"
                    Text="Copy" />
                <MenuFlyoutItem
                    Icon="Delete"
                    Text="Delete" />
                <MenuFlyoutSeparator />
                <MenuFlyoutItem Text="Rename" />
                <MenuFlyoutItem Text="Select" />
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</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">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="Edit Options">

<Button.Flyout>

<MenuFlyoutItem.Icon>

</MenuFlyoutItem.Icon>

</MenuFlyoutItem>

<MenuFlyoutItem

Icon="Copy"

Text="Copy" />

<MenuFlyoutItem

Icon="Delete"

Text="Delete" />

</MenuFlyout>

</Button.Flyout>

</Button>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] MenuFlyout 엘리먼트 : 계단식 메뉴 만들기

■ MenuFlyout 엘리먼트에서 계단식 메뉴를 만드는 방법을 보여준다. ▶ 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">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="5"
        Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Open" />
                <MenuFlyoutSubItem Text="Send to">
                    <MenuFlyoutItem Text="Bluetooth" />
                    <MenuFlyoutItem Text="Desktop (shortcut)" />
                    <MenuFlyoutSubItem Text="Compressed file">
                        <MenuFlyoutItem Text="Compress and email" />
                        <MenuFlyoutItem Text="Compress to .7z" />
                        <MenuFlyoutItem Text="Compress to .zip" />
                    </MenuFlyoutSubItem>
                </MenuFlyoutSubItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</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">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="File Options">

<Button.Flyout>

</MenuFlyoutSubItem>

</MenuFlyout>

</Button.Flyout>

</Button>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] MenuFlyout 엘리먼트 : MenuFlyoutSeparator/ToggleMenuFlyoutItem 객체 사용하기

■ MenuFlyout 엘리먼트에서 MenuFlyoutSeparator/ToggleMenuFlyoutItem 객체를 사용하는 방법을 보여준다. ▶ 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">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="5"
        Content="Options">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Reset" />
                <MenuFlyoutSeparator />
                <ToggleMenuFlyoutItem
                    Text="Repeat"
                    IsChecked="True" />
                <ToggleMenuFlyoutItem
                    Text="Shuffle"
                    IsChecked="True" />
            </MenuFlyout>
        </Button.Flyout>
    </Button>
</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">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="5"

Content="Options">

<Button.Flyout>

<ToggleMenuFlyoutItem

Text="Repeat"

IsChecked="True" />

<ToggleMenuFlyoutItem

Text="Shuffle"

IsChecked="True" />

</MenuFlyout>

</Button.Flyout>

</Button>

</Page>

TestProject.zip

[C#/WINUI3/.NET6] AppBarButton 객체에서 MenuFlyout 엘리먼트 사용하기

■ AppBarButton 객체에서 MenuFlyout 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
        <AppBarButton
            Icon="Sort"
            IsCompact="True"
            ToolTipService.ToolTip="Sort">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Name="byRatingMenuFlyoutItem"
                        Text="By rating"
                        Tag="rating" />
                    <MenuFlyoutItem Name="byMatchMenuFlyoutItem"
                        Text="By match"
                        Tag="match" />
                    <MenuFlyoutItem Name="byDistanceMenuFlyoutItem"
                        Text="By distance"
                        Tag="distance" />
                </MenuFlyout>
            </Button.Flyout>
        </AppBarButton>
        <TextBlock x:Name="textBlock"
            Margin="0 10 0 0" />
    </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">

<AppBarButton

Icon="Sort"

IsCompact="True"

ToolTipService.ToolTip="Sort">

<Button.Flyout>

<MenuFlyoutItem Name="byRatingMenuFlyoutItem"

Text="By rating"

Tag="rating" />

<MenuFlyoutItem Name="byMatchMenuFlyoutItem"

Text="By match"

Tag="match" />

<MenuFlyoutItem Name="byDistanceMenuFlyoutItem"

Text="By distance"

Tag="distance" />

</MenuFlyout>

</Button.Flyout>

</AppBarButton>

<TextBlock x:Name="textBlock"

Margin="0 10 0 0" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


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.byRatingMenuFlyoutItem.Click   += menuFlyoutItem_Click;
            this.byMatchMenuFlyoutItem.Click    += menuFlyoutItem_Click;
            this.byDistanceMenuFlyoutItem.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)
        {
            if(sender is MenuFlyoutItem menuFlyoutItem)
            {
                string sortOption = menuFlyoutItem.Tag.ToString();

                this.textBlock.Text = "Sort by : " + sortOption;
            }
        }

        #endregion
    }
}

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.byRatingMenuFlyoutItem.Click += menuFlyoutItem_Click;

this.byMatchMenuFlyoutItem.Click += menuFlyoutItem_Click;

this.byDistanceMenuFlyoutItem.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)

{

if(sender is MenuFlyoutItem menuFlyoutItem)

{

string sortOption = menuFlyoutItem.Tag.ToString();

this.textBlock.Text = "Sort by : " + sortOption;

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] CommandBarFlyout 엘리먼트 사용하기

■ CommandBarFlyout 엘리먼트를 사용하는 방법을 보여준다. ▶ 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">
    <Page.Resources>
        <CommandBarFlyout x:Name="commandBarFlyout"
            Placement="Right">
            <AppBarButton Name="shareAppBarButton"
                Icon="Share"
                Label="Share"
                ToolTipService.ToolTip="Share" />
            <AppBarButton Name="saveAppBarButton"
                Icon="Save"
                Label="Save"
                ToolTipService.ToolTip="Save" />
            <AppBarButton Name="deleteAppBarButton"
                Icon="Delete"
                Label="Delete"
                ToolTipService.ToolTip="Delete" />
            <CommandBarFlyout.SecondaryCommands>
                <AppBarButton Name="resizeAppBarButton"
                    Label="Resize" />
                <AppBarButton Name="moveAppBarButton"
                    Label="Move" />
            </CommandBarFlyout.SecondaryCommands>
        </CommandBarFlyout>
    </Page.Resources>
    <StackPanel Margin="10">
        <TextBlock Text="Click or right click the image to open a CommandBarFlyout" />
        <Button Name="imageButton"
            Margin="0 10 0 0">
            <Image Name="image"
                Height="300"
                Source="/IMAGE/rainier.jpg" />
        </Button>
        <TextBlock Name="textBlock"
            Text="" />
    </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">

<Page.Resources>

<CommandBarFlyout x:Name="commandBarFlyout"

Placement="Right">

<AppBarButton Name="shareAppBarButton"

Icon="Share"

Label="Share"

ToolTipService.ToolTip="Share" />

<AppBarButton Name="saveAppBarButton"

Icon="Save"

Label="Save"

ToolTipService.ToolTip="Save" />

<AppBarButton Name="deleteAppBarButton"

Icon="Delete"

Label="Delete"

ToolTipService.ToolTip="Delete" />

<CommandBarFlyout.SecondaryCommands>

<AppBarButton Name="resizeAppBarButton"

Label="Resize" />

<AppBarButton Name="moveAppBarButton"

Label="Move" />

</CommandBarFlyout.SecondaryCommands>

</CommandBarFlyout>

</Page.Resources>

<Button Name="imageButton"

Margin="0 10 0 0">

<Image Name="image"

Height="300"

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

</Button>

<TextBlock Name="textBlock"

Text="" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Input;

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

        #region 생성자 - MainPage()

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

            this.shareAppBarButton.Click  += appBarButton_Click;
            this.saveAppBarButton.Click   += appBarButton_Click;
            this.deleteAppBarButton.Click += appBarButton_Click;
            this.resizeAppBarButton.Click += appBarButton_Click;
            this.moveAppBarButton.Click   += appBarButton_Click;

            this.imageButton.Click            += imageButton_Click;
            this.imageButton.ContextRequested += imageButton_ContextRequested;
        }

        #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)
        {
            this.textBlock.Text = "You clicked : " + (sender as AppBarButton).Label;
        }

        #endregion
        #region 이미지 버튼 클릭시 처리하기 - imageButton_Click(sender, e)

        /// <summary>
        /// 이미지 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void imageButton_Click(object sender, RoutedEventArgs e)
        {
            ShowMenu(FlyoutShowMode.Transient);
        }

        #endregion
        #region 이미지 버튼 컨텍스트 요청시 처리하기 - imageButton_ContextRequested(sender, e)

        /// <summary>
        /// 이미지 버튼 컨텍스트 요청시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void imageButton_ContextRequested(UIElement sender, ContextRequestedEventArgs e)
        {
            ShowMenu(FlyoutShowMode.Standard);
        }

        #endregion

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

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

        /// <summary>
        /// 메뉴 표시하기
        /// </summary>
        /// <param name="flyoutShowMode">플라이아웃 표시 모드</param>
        private void ShowMenu(FlyoutShowMode flyoutShowMode)
        {
            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                FlyoutShowOptions flyoutShowOptions = new FlyoutShowOptions
                {
                    ShowMode  = flyoutShowMode,
                    Placement = FlyoutPlacementMode.RightEdgeAlignedTop
                };

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

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

using Windows.Foundation.Metadata;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Controls.Primitives;

using Microsoft.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.shareAppBarButton.Click += appBarButton_Click;

this.saveAppBarButton.Click += appBarButton_Click;

this.deleteAppBarButton.Click += appBarButton_Click;

this.resizeAppBarButton.Click += appBarButton_Click;

this.moveAppBarButton.Click += appBarButton_Click;

this.imageButton.Click += imageButton_Click;

this.imageButton.ContextRequested += imageButton_ContextRequested;

}

#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)

{

this.textBlock.Text = "You clicked : " + (sender as AppBarButton).Label;

}

#endregion

#region 이미지 버튼 클릭시 처리하기 - imageButton_Click(sender, e)

/// <summary>

/// 이미지 버튼 클릭시 처리하기

/// </summary>

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

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

private void imageButton_Click(object sender, RoutedEventArgs e)

{

ShowMenu(FlyoutShowMode.Transient);

}

#endregion

#region 이미지 버튼 컨텍스트 요청시 처리하기 - imageButton_ContextRequested(sender, e)

/// <summary>

/// 이미지 버튼 컨텍스트 요청시 처리하기

/// </summary>

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

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

private void imageButton_ContextRequested(UIElement sender, ContextRequestedEventArgs e)

{

ShowMenu(FlyoutShowMode.Standard);

}

#endregion

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

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

/// <summary>

/// 메뉴 표시하기

/// </summary>

/// <param name="flyoutShowMode">플라이아웃 표시 모드</param>

private void ShowMenu(FlyoutShowMode flyoutShowMode)

{

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

{

FlyoutShowOptions flyoutShowOptions = new FlyoutShowOptions

{

ShowMode = flyoutShowMode,

Placement = FlyoutPlacementMode.RightEdgeAlignedTop

};

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

}

else

{

this.commandBarFlyout.ShowAt(this.image);

}

#endregion

}

TestProject.zip

[C#/WINUI3/.NET6] MenuBar 엘리먼트 : MenuBarItem/MenuFlyoutSubItem/RadioMenuFlyoutItem 객체를 사용해 하위 메뉴와 라디오 메뉴 만들기

■ MenuBar 엘리먼트에서 MenuBarItem/MenuFlyoutSubItem/RadioMenuFlyoutItem 객체를 사용해 하위 메뉴와 라디오 메뉴를 만드는 방법을 보여준다. ▶ 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}">
    <StackPanel>
        <MenuBar>
            <MenuBarItem Title="File">
                <MenuFlyoutSubItem Text="New">
                    <MenuFlyoutItem
                        Text="Plain Text Document"
                        Click="menuFlyoutItem_Click" />
                    <MenuFlyoutItem
                        Text="Rich Text Document"
                        Click="menuFlyoutItem_Click" />
                    <MenuFlyoutItem
                        Text="Other Formats"
                        Click="menuFlyoutItem_Click" />
                </MenuFlyoutSubItem>
                <MenuFlyoutItem
                    Text="Open"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutItem
                    Text="Save"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutSeparator />
                <MenuFlyoutItem
                    Text="Exit"
                    Click="menuFlyoutItem_Click" />
            </MenuBarItem>
            <MenuBarItem Title="Edit">
                <MenuFlyoutItem
                    Text="Undo"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutItem
                    Text="Cut"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutItem
                    Text="Copy"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutItem
                    Text="Paste"
                    Click="menuFlyoutItem_Click" />
            </MenuBarItem>
            <MenuBarItem Title="View">
                <MenuFlyoutItem
                    Text="Output"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutSeparator/>
                <RadioMenuFlyoutItem
                    GroupName="OrientationGroup"
                    Text="Landscape"
                    Click="menuFlyoutItem_Click" />
                <RadioMenuFlyoutItem
                    GroupName="OrientationGroup"
                    IsChecked="True"
                    Text="Portrait"
                    Click="menuFlyoutItem_Click" />
                <MenuFlyoutSeparator/>
                <RadioMenuFlyoutItem
                    GroupName="SizeGroup"
                    Text="Small icons"
                    Click="menuFlyoutItem_Click" />
                <RadioMenuFlyoutItem
                    GroupName="SizeGroup"
                    IsChecked="True"
                    Text="Medium icons"
                    Click="menuFlyoutItem_Click" />
                <RadioMenuFlyoutItem
                    GroupName="SizeGroup"
                    Text="Large icons"
                    Click="menuFlyoutItem_Click" />
            </MenuBarItem>
            <MenuBarItem Title="Help">
                <MenuFlyoutItem
                    Text="About"
                    Click="menuFlyoutItem_Click" />
            </MenuBarItem>
        </MenuBar>
        <TextBlock Name="textBlock"
            Margin="10"
            Text="" />
    </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}">

<MenuFlyoutItem

Text="Plain Text Document"