TRANSITION Archives - 2 중 2 번째 페이지

[C#/WINUI2.5] 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"
    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>

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

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>

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

▶

[C#/WINUI2.5] ConnectedAnimation 클래스 : 리스트 페이지와 상세 페이지 사이에서 연결 애니메이션 만들기

■ ConnectedAnimation 클래스를 사용해 리스트 페이지와 상세 페이지 사이에서 연결 애니메이션을 만드는 방법을 보여준다. ▶ CustomItem.cs


using System;
using System.Collections.Generic;

namespace TestProject
{
    /// <summary>
    /// 커스텀 항목
    /// </summary>
    public class CustomItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 제목 - Title

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

        #endregion
        #region 이미지 위치 - ImageLocation

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

        #endregion
        #region 조회 수 - ViewCount

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

        #endregion
        #region 좋아요 수 - LikeCount

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

        #endregion
        #region 설명 - Description

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

        #endregion

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

        #region 생성자 - CustomItem()

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

        #endregion

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

        #region 리스트 구하기 - GetList()

        /// <summary>
        /// 리스트 구하기
        /// </summary>
        /// <returns>리스트</returns>
        public static List<CustomItem> GetList()
        {
            string[] dummyTextArray = 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();

            const int locationCount = 8;

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

            for(int i = 0; i < locationCount; i++)
            {
                list.Add
                (
                    new CustomItem()
                    {
                        Title         = $"항목 {i + 1}",
                        ImageLocation = $"/IMAGE/sample{i + 1}.jpg",
                        ViewCount     = random.Next(100, 999).ToString(),
                        LikeCount     = random.Next(10, 99).ToString(),
                        Description   = dummyTextArray[i % dummyTextArray.Length]
                    }
                );
            }

            return list;
        }

        #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 System.Collections.Generic;

namespace TestProject

{

/// <summary>

/// 커스텀 항목

/// </summary>

public class CustomItem

{

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

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

#region 제목 - Title

/// <summary>

/// 제목

/// </summary>

public string Title { get; set; }

#endregion

#region 이미지 위치 - ImageLocation

/// <summary>

/// 이미지 위치

/// </summary>

public string ImageLocation { get; set; }

#endregion

#region 조회 수 - ViewCount

/// <summary>

/// 조회 수

/// </summary>

public string ViewCount { get; set; }

#endregion

#region 좋아요 수 - LikeCount

/// <summary>

/// 좋아요 수

/// </summary>

public string LikeCount { get; set; }

#endregion

#region 설명 - Description

/// <summary>

/// 설명

/// </summary>

public string Description { get; set; }

#endregion

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

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

#region 생성자 - CustomItem()

/// <summary>

/// 생성자

/// </summary>

public CustomItem()

{

}

#endregion

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

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

#region 리스트 구하기 - GetList()

/// <summary>

/// 리스트 구하기

/// </summary>

/// <returns>리스트</returns>

public static List<CustomItem> GetList()

{

string[] dummyTextArray = 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();

const int locationCount = 8;

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

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

{

list.Add

(

new CustomItem()

{

Title = $"항목 {i + 1}",

ImageLocation = $"/IMAGE/sample{i + 1}.jpg",

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

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

Description = dummyTextArray[i % dummyTextArray.Length]

}

);

}

return list;

}

#endregion

}

▶ ListPage.xaml


<Page x:Class="TestProject.ListPage"
    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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView Name="listView"
            IsItemClickEnabled="True"
            SelectionMode="None"
            Loaded="listView_Loaded"
            ItemClick="listView_ItemClick">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:CustomItem">
                    <Grid Margin="0 10 0 10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition
                                MinWidth="150"
                                Width="Auto" />
                            <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="조회 : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind ViewCount}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    FontWeight="Bold"
                                    Text="좋아요 : " />
                                <TextBlock
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Margin="5 0 0 0"
                                    Text="{x:Bind LikeCount}" />
                            </StackPanel>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock
                                    Style="{ThemeResource BodyTextBlockStyle}"
                                    Margin="0 10 0 0"
                                    MaxWidth="500"
                                    TextTrimming="CharacterEllipsis"
                                    MaxLines="1"
                                    FontStyle="Italic"
                                    Text="{x:Bind Description}" />
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

<Page x:Class="TestProject.ListPage"

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

<ListView Name="listView"

IsItemClickEnabled="True"

SelectionMode="None"

Loaded="listView_Loaded"

ItemClick="listView_ItemClick">

<ListView.ItemTemplate>

<Grid.ColumnDefinitions>

<ColumnDefinition

MinWidth="150"

Width="Auto" />

</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="조회 : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

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

</StackPanel>

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

FontWeight="Bold"

Text="좋아요 : " />

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

Margin="5 0 0 0"

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

</StackPanel>

<TextBlock

Style="{ThemeResource BodyTextBlockStyle}"

Margin="0 10 0 0"

MaxWidth="500"

TextTrimming="CharacterEllipsis"

MaxLines="1"

FontStyle="Italic"

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

</StackPanel>

</Grid>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</Grid>

</Page>

▶ ListPage.xaml.cs

[C#/WINUI2.5] ConnectedAnimation 클래스 : 페이지 이동시 애니메이션 사용하기

■ ConnectedAnimation 클래스에서 페이지 이동시 애니메이션을 사용하는 방법을 보여준다. ▶ Person.cs


using System.ComponentModel;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 사람
    /// </summary>
    public class Person : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 이벤트 - PropertyChanged

        /// <summary>
        /// 속성 변경시 이벤트
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// ID
        /// </summary>
        public int id;

        /// <summary>
        /// 성명
        /// </summary>
        public string name;

        /// <summary>
        /// 나이
        /// </summary>
        public int age;

        /// <summary>
        /// 브러시
        /// </summary>
        public Brush brush;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region ID - ID

        /// <summary>
        /// ID
        /// </summary>
        public int ID
        {
            get => this.id;
            set
            {
                if(this.id != value)
                {
                    this.id = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 성명 - Name

        /// <summary>
        /// 성명
        /// </summary>
        public string Name
        {
            get => this.name;
            set
            {
                if(this.name != value)
                {
                    this.name = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 나이 - Age

        /// <summary>
        /// 나이
        /// </summary>
        public int Age
        {
            get => this.age;
            set
            {
                if(this.age != value)
                {
                    this.age = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion
        #region 브러시 - Brush

        /// <summary>
        /// 브러시
        /// </summary>
        public Brush Brush
        {
            get => this.brush;
            set
            {
                if(this.brush != value)
                {
                    this.brush = value;

                    FirePropertyChangedEvent();
                }
            }
        }

        #endregion

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

        #region 생성자 - Person(id, name, age, brush)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="id">ID</param>
        /// <param name="name">성명</param>
        /// <param name="age">나이</param>
        /// <param name="brush">브러시</param>
        public Person(int id, string name, int age, Brush brush)
        {
            this.id    = id;
            this.name  = name;
            this.age   = age;
            this.brush = brush;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

using System.ComponentModel;

using System.Runtime.CompilerServices;

using Windows.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 사람

/// </summary>

public class Person : INotifyPropertyChanged

{

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

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

#region 속성 변경시 이벤트 - PropertyChanged

/// <summary>

/// 속성 변경시 이벤트

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

#endregion

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

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

#region Field

/// <summary>

/// ID

/// </summary>

public int id;

/// <summary>

/// 성명

/// </summary>

public string name;

/// <summary>

/// 나이

/// </summary>

public int age;

/// <summary>

/// 브러시

/// </summary>

public Brush brush;

#endregion

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

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

#region ID - ID

/// <summary>

/// ID

/// </summary>

public int ID

{

get => this.id;

set

{

if(this.id != value)

{

this.id = value;

FirePropertyChangedEvent();

}

#endregion

#region 성명 - Name

/// <summary>

/// 성명

/// </summary>

public string Name

{

get => this.name;

set

{

if(this.name != value)

{

this.name = value;

FirePropertyChangedEvent();

}

#endregion

#region 나이 - Age

/// <summary>

/// 나이

/// </summary>

public int Age

{

get => this.age;

set

{

if(this.age != value)

{

this.age = value;

FirePropertyChangedEvent();

}

#endregion

#region 브러시 - Brush

/// <summary>

/// 브러시

/// </summary>

public Brush Brush

{

get => this.brush;

set

{

if(this.brush != value)

{

this.brush = value;

FirePropertyChangedEvent();

}

#endregion

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

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

#region 생성자 - Person(id, name, age, brush)

/// <summary>

/// 생성자

/// </summary>

/// <param name="id">ID</param>

/// <param name="name">성명</param>

/// <param name="age">나이</param>

/// <param name="brush">브러시</param>

public Person(int id, string name, int age, Brush brush)

{

this.id = id;

this.name = name;

this.age = age;

this.brush = brush;

}

#endregion

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

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

#region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

/// <summary>

/// 속성 변경시 이벤트 발생시키기

/// </summary>

/// <param name="propertyName">속성명</param>

protected void FirePropertyChangedEvent([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

#endregion

}

▶ App.xaml


<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</Application>

<Application x:Class="TestProject.App"

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

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

</Application>

▶ App.xaml.cs


using System;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.Core;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;

namespace TestProject
{
    /// <summary>
    /// 앱
    /// </summary>
    sealed partial class App : Application
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - App()

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

            Suspending += Application_Suspending;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 시작시 처리하기 - OnLaunched(e)

        /// <summary>
        /// 시작시 처리하기
        /// </summary>
        /// <param name="e">이벤트 인자</param>
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            SystemNavigationManager.GetForCurrentView().BackRequested += SystemNavigationManager_BackRequested;

            Frame rootFrame = Window.Current.Content as Frame;

            if(rootFrame == null)
            {
                rootFrame = new Frame();

                rootFrame.NavigationFailed += rootFrame_NavigationFailed;

                if(e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                }

                Window.Current.Content = rootFrame;
            }

            if(e.PrelaunchActivated == false)
            {
                if(rootFrame.Content == null)
                {
                    rootFrame.Navigate(typeof(MainPage), e.Arguments);
                }

                Window.Current.Activate();
            }

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

        #endregion

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

        #region 애플리케이션 정지시 처리하기 - Application_Suspending(sender, e)

        /// <summary>
        /// 애플리케이션 정지시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Application_Suspending(object sender, SuspendingEventArgs e)
        {
            SuspendingDeferral deferral = e.SuspendingOperation.GetDeferral();

            deferral.Complete();
        }

        #endregion
        #region 시스템 탐색 관리자 뒤로 이동 요청시 처리하기 - SystemNavigationManager_BackRequested(sender, e)

        /// <summary>
        /// 시스템 탐색 관리자 뒤로 이동 요청시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void SystemNavigationManager_BackRequested(object sender, BackRequestedEventArgs e)
        {
            Frame rootFrame = Window.Current.Content as Frame;

            if(rootFrame == null)
            {
                return;
            }

            if(rootFrame.CanGoBack && e.Handled == false)
            {
                e.Handled = true;

                rootFrame.GoBack();
            }
        }

        #endregion
        #region 루트 프레임 네비게이션 실패시 처리하기 - rootFrame_NavigationFailed(sender, e)

        /// <summary>
        /// 루트 프레임 네비게이션 실패시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void rootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            throw new Exception($"페이지 로드를 실패했습니다 : {e.SourcePageType.FullName}");
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

using System;

using Windows.ApplicationModel;

using Windows.ApplicationModel.Activation;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.Core;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Navigation;

namespace TestProject

{

/// <summary>

/// 앱

/// </summary>

sealed partial class App : Application

{

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

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

#region 생성자 - App()

/// <summary>

/// 생성자

/// </summary>

public App()

{

InitializeComponent();

Suspending += Application_Suspending;

}

#endregion

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

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

#region 시작시 처리하기 - OnLaunched(e)

/// <summary>

/// 시작시 처리하기

/// </summary>

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

protected override void OnLaunched(LaunchActivatedEventArgs e)

{

SystemNavigationManager.GetForCurrentView().BackRequested += SystemNavigationManager_BackRequested;

Frame rootFrame = Window.Current.Content as Frame;

if(rootFrame == null)

{

rootFrame = new Frame();

rootFrame.NavigationFailed += rootFrame_NavigationFailed;

if(e.PreviousExecutionState == ApplicationExecutionState.Terminated)

{

}

Window.Current.Content = rootFrame;

}

if(e.PrelaunchActivated == false)

{

if(rootFrame.Content == null)

{

rootFrame.Navigate(typeof(MainPage), e.Arguments);

}

Window.Current.Activate();

}

#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

}

#endregion

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

#region 애플리케이션 정지시 처리하기 - Application_Suspending(sender, e)

/// <summary>

/// 애플리케이션 정지시 처리하기

/// </summary>

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

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

private void Application_Suspending(object sender, SuspendingEventArgs e)

{

SuspendingDeferral deferral = e.SuspendingOperation.GetDeferral();

deferral.Complete();

}

#endregion

#region 시스템 탐색 관리자 뒤로 이동 요청시 처리하기 - SystemNavigationManager_BackRequested(sender, e)

/// <summary>

/// 시스템 탐색 관리자 뒤로 이동 요청시 처리하기

/// </summary>

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

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

private void SystemNavigationManager_BackRequested(object sender, BackRequestedEventArgs e)

{

Frame rootFrame = Window.Current.Content as Frame;

if(rootFrame == null)

{

return;

}

if(rootFrame.CanGoBack && e.Handled == false)

{

e.Handled = true;

rootFrame.GoBack();

}

#endregion

#region 루트 프레임 네비게이션 실패시 처리하기 - rootFrame_NavigationFailed(sender, e)

/// <summary>

/// 루트 프레임 네비게이션 실패시 처리하기

/// </summary>

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

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

private void rootFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)

{

throw new Exception($"페이지 로드를 실패했습니다 : {e.SourcePageType.FullName}");

}

#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"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    NavigationCacheMode="Enabled"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <ItemsPanelTemplate x:Key="GridViewItemsPanelTemplateKey">
            <ItemsWrapGrid
                HorizontalAlignment="Center"
                Orientation="Horizontal" />
        </ItemsPanelTemplate>
        <DataTemplate x:Key="GridViewDataTemplateKey" x:DataType="local:Person">
            <Grid Name="personGrid"
                Margin="10"
                Height="100"
                Width="100"
                Background="{x:Bind Brush}">
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center">
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind ID}" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind Name}" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        Text="{x:Bind Age}"  />
                </StackPanel>
            </Grid>
        </DataTemplate>
        <Style x:Key="GridViewDefaultItemContainerStyleKey" TargetType="GridViewItem">
            <Setter Property="Margin"     Value="10"        />
            <Setter Property="Background" Value="LightGray" />
        </Style>
    </Page.Resources>
    <Grid>
        <GridView Name="gridView"
            ItemsPanel="{StaticResource GridViewItemsPanelTemplateKey}"
            ItemTemplate="{StaticResource GridViewDataTemplateKey}"
            ItemContainerStyle="{StaticResource GridViewDefaultItemContainerStyleKey}"
            IsItemClickEnabled="True"
            ItemsSource="{x:Bind PersonCollection}"
            Loaded="{x:Bind gridView_Loaded}"
            ItemClick="gridView_ItemClick" />
    </Grid>
</Page>

<Page x:Class="TestProject.MainPage"

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

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

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

NavigationCacheMode="Enabled"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<ItemsWrapGrid

HorizontalAlignment="Center"

Orientation="Horizontal" />

</ItemsPanelTemplate>

<Grid Name="personGrid"

Margin="10"

Height="100"

Width="100"

Background="{x:Bind Brush}">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<TextBlock

HorizontalAlignment="Center"

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

<TextBlock

HorizontalAlignment="Center"

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

<TextBlock

HorizontalAlignment="Center"

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

</StackPanel>

</Grid>

</DataTemplate>

</Style>

</Page.Resources>

<Grid>

<GridView Name="gridView"

ItemsPanel="{StaticResource GridViewItemsPanelTemplateKey}"

ItemTemplate="{StaticResource GridViewDataTemplateKey}"

ItemContainerStyle="{StaticResource GridViewDefaultItemContainerStyleKey}"

IsItemClickEnabled="True"

ItemsSource="{x:Bind PersonCollection}"

Loaded="{x:Bind gridView_Loaded}"

ItemClick="gridView_ItemClick" />

</Grid>

</Page>

▶

[FLUTTER] Hero 클래스 사용하기

■ Hero 클래스를 사용하는 방법을 보여준다. ▶ main.dart


import 'package:flutter/material.dart';

void main() {
  runApp(TestApplication());
}

class TestApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application / Main page'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailPage()),
            );
          },
          child: Hero(
            tag: 'image',
            child: Image.asset(
              'assets/sample.png',
              width: 100,
              height: 100,
            )
          ),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Application / Detail page'),
      ),
      body: Hero(
        tag: 'image',
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Image.asset('assets/sample.png')
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(TestApplication());

}

class TestApplication extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Test Application',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MainPage(),

);

}

class MainPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application / Main page'),

body: Center(

child: GestureDetector(

onTap: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => DetailPage()),

);

child: Hero(

tag: 'image',

child: Image.asset(

'assets/sample.png',

width: 100,

height: 100,

)

);

}

class DetailPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Test Application / Detail page'),

body: Hero(

tag: 'image',

child: Padding(

padding: const EdgeInsets.all(10),

child: Image.asset('assets/sample.png')

);

}

test_app.zip