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

icodebroker MICROSOFT 2024-06-19

■ 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"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <GridView Name="gridView"
            HorizontalAlignment="Center"
            IsItemClickEnabled="True"
            ItemClick="gridView_ItemClick">
            <GridView.ItemContainerStyle>
                <Style BasedOn="{StaticResource GridViewItemRevealStyle}" TargetType="GridViewItem">
                    <Style.Setters>
                        <Setter Property="Margin" Value="10" />
                    </Style.Setters>
                </Style>
            </GridView.ItemContainerStyle>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Name="sourceGrid"
                        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="헤더" />
                        </Grid>
                        <Grid Grid.Row="1"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">
                            <TextBlock
                                Margin="10"
                                Text="내용" />
                        </Grid>
                    </Grid>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <Grid 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="헤더" />
                    <Button
                        HorizontalAlignment="Right"
                        VerticalAlignment="Top"
                        Margin="5"
                        Width="40"
                        Height="40"
                        ToolTipService.ToolTip="Close"
                        Click="closeButton_Click">
                        <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="내용" />
                </Grid>
            </Grid>
        </Grid>
    </Grid>
</Page>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

<Page x:Class="TestProject.CardPage"

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

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

FontFamily="나눔고딕코딩"

FontSize="16">

<GridView Name="gridView"

HorizontalAlignment="Center"

IsItemClickEnabled="True"

ItemClick="gridView_ItemClick">

<GridView.ItemContainerStyle>

<Style.Setters>

</Style.Setters>

</Style>

</GridView.ItemContainerStyle>

<GridView.ItemTemplate>

<Grid Name="sourceGrid"

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="헤더" />

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

Margin="10"

Text="내용" />

</Grid>

</DataTemplate>

</GridView.ItemTemplate>

</GridView>

<Grid 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="헤더" />

<Button

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="5"

Width="40"

Height="40"

ToolTipService.ToolTip="Close"

Click="closeButton_Click">

<Button.Content>

</Button.Content>

</Button>

</Grid>

<Grid Grid.Row="1"

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">

<TextBlock

Style="{ThemeResource BaseTextBlockStyle}"

Margin="10"

Text="내용" />

</Grid>

</Page>

▶ CardPage.xaml.cs


using System;
using System.Collections.Generic;
using Windows.Foundation.Metadata;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

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

        #region Field

        /// <summary>
        /// 현재 항목
        /// </summary>
        private int currentItem;

        #endregion

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

        #region 생성자 - CardPage()

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

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

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

            this.gridView.ItemsSource = list;
        }

        #endregion

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

        #region 그리드 뷰 항목 클릭시 처리하기 - iew_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.currentItem = Convert.ToInt32(gridViewitem.Content);

                animation = gridView.PrepareConnectedAnimation("ForwardAnimation", this.currentItem, "sourceGrid");
            }

            this.smokeGrid.Visibility = Visibility.Visible;

            animation.TryStart(targetGrid);
        }

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

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

            animation.Completed += animation_Completed;

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

            this.gridView.UpdateLayout();

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

            await this.gridView.TryStartConnectedAnimationAsync(animation, this.currentItem, "sourceGrid");
        }

        #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;
        }

        #endregion
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

using System;

using System.Collections.Generic;

using Windows.Foundation.Metadata;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media.Animation;

namespace TestProject

{

/// <summary>

/// 카드 페이지

/// </summary>

public sealed partial class CardPage : Page

{

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

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

#region Field

/// <summary>

/// 현재 항목

/// </summary>

private int currentItem;

#endregion

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

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

#region 생성자 - CardPage()

/// <summary>

/// 생성자

/// </summary>

public CardPage()

{

InitializeComponent();

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

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

{

list.Add(i);

}

this.gridView.ItemsSource = list;

}

#endregion

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

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

#region 그리드 뷰 항목 클릭시 처리하기 - iew_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.currentItem = Convert.ToInt32(gridViewitem.Content);

animation = gridView.PrepareConnectedAnimation("ForwardAnimation", this.currentItem, "sourceGrid");

}

this.smokeGrid.Visibility = Visibility.Visible;

animation.TryStart(targetGrid);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private async void closeButton_Click(object sender, RoutedEventArgs e)

{

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

animation.Completed += animation_Completed;

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

this.gridView.UpdateLayout();

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

{

animation.Configuration = new DirectConnectedAnimationConfiguration();

}

await this.gridView.TryStartConnectedAnimationAsync(animation, this.currentItem, "sourceGrid");

}

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

}

#endregion

}

▶ 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"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Frame Name="frame"
            Margin="10" />
    </Grid>
</Page>

1

2

3

4

5

6

7

8

9

10

11

12

13

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

<Grid>

<Frame Name="frame"

Margin="10" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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

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 = "ConnectedAnimation 클래스 : 동일 페이지 내에서 연결 애니메이션 사용하기";

            #endregion

            this.frame.Navigate(typeof(CardPage));
        }

        #endregion
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

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 = "ConnectedAnimation 클래스 : 동일 페이지 내에서 연결 애니메이션 사용하기";

#endregion

this.frame.Navigate(typeof(CardPage));

}

#endregion

}

TestProject.zip

.NETFRAMEWORK 2D ANIMATION C# CONTROL GRAPHICS MICROSOFT NAVIGATION TRANSITION UWP WINUI