■ ConnectedAnimation 클래스를 사용해 연결 애니메이션을 만드는 방법을 보여준다.
▶ CustomDataObject.cs
|
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 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
|
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 |
<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> |
▶ CollectionPage.xaml.cs
|
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 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
|
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 |
<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> |
▶ DatailPage.xaml.cs
|
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 |
using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Navigation; using Microsoft.UI.Xaml.Media.Animation; namespace TestProject { /// <summary> /// 상세 페이지 /// </summary> public sealed partial class DetailPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 현재 커스텀 데이터 객체 - CurrentCustomDataObject /// <summary> /// 현재 커스텀 데이터 객체 /// </summary> public CustomDataObject CurrentCustomDataObject { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - DetailPage() /// <summary> /// 생성자 /// </summary> public DetailPage() { InitializeComponent(); this.goBackButton.Loaded += goBackButton_Loaded; this.goBackButton.Click += goBackButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Protected #region 탐색되는 경우 처리하기 - OnNavigatedTo(e) /// <summary> /// 탐색되는 경우 처리하기 /// </summary> /// <param name="e">이벤트 인자</param> protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); CurrentCustomDataObject = e.Parameter as CustomDataObject; ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("ForwardConnectedAnimation"); if(animation != null) { animation.TryStart(this.detailImage, new UIElement[] { this.detailStackPanel }); } } #endregion #region 탐색하는 경우 처리하기 - OnNavigatingFrom(e) /// <summary> /// 탐색하는 경우 처리하기 /// </summary> /// <param name="e">이벤트 인자</param> protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) { base.OnNavigatingFrom(e); ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("BackConnectedAnimation", this.detailImage); } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region Go Back 버튼 로드시 처리하기 - goBackButton_Loaded(sender, e) /// <summary> /// Go Back 버튼 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void goBackButton_Loaded(object sender, RoutedEventArgs e) { this.goBackButton.Focus(FocusState.Programmatic); } #endregion #region Go Back 버튼 클릭시 처리하기 - goBackButton_Click(sender, e) /// <summary> /// Go Back 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void goBackButton_Click(object sender, RoutedEventArgs e) { Frame.GoBack(); } #endregion } } |
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 |
<?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> |
▶ MainWindow.xaml.cs
|
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 |
using Microsoft.UI.Xaml; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); this.frame.Navigate(typeof(CollectionPage)); } #endregion } } |
