■ SlideNavigationTransitionInfo 클래스의 Effect 속성을 사용해 페이지 전환시 슬라이드 애니메이션을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트
■ Grid 클래스의 BackgroundTransition 속성에서 BrushTransition 객체를 사용해 테마 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Name="grid" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" MinHeight="200" BorderThickness="1" BorderBrush="DimGray" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RequestedTheme="Light"> <StackPanel Margin="10" Spacing="10"> <TextBlock Style="{ThemeResource SubheaderTextBlockStyle}" Text="Lorem Ipsum" /> <TextBlock Margin="0 10 0 0" TextWrapping="WrapWholeWords" Text="The background of this grid animates when the theme changes." /> <Button Margin="0 10 0 0" Content="Button" /> <CheckBox Margin="0 10 0 0" Content="CheckBox" /> </StackPanel> </Grid> <Button Name="changeThemeButton" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5" Content="Change Theme" /> </Grid> </Page> |
▶ MainPage.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 |
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.grid.BackgroundTransition = new BrushTransition(); this.changeThemeButton.Click += changeThemeButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Change Theme 버튼 클릭시 처리하기 - changeThemeButton_Click(sender, e) /// <summary> /// Change Theme 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void changeThemeButton_Click(object sender, RoutedEventArgs e) { this.grid.RequestedTheme = this.grid.RequestedTheme == ElementTheme.Dark ? ElementTheme.Light : ElementTheme.Dark; } #endregion } } |
TestProject.zip
■ ContentPresenter 클래스의 BackgroundTransition 속성에서 BrushTransition 객체를 사용해 색상 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <ContentPresenter Name="contentPresenter" Grid.Column="0" Width="50" Height="50" Background="Blue" /> <Button Name="backgroundColorButton" Grid.Column="1" Padding="5" Content="Change Background Color" /> </Grid> </Page> |
▶ MainPage.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 |
using Microsoft.UI; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.contentPresenter.BackgroundTransition = new BrushTransition(); this.backgroundColorButton.Click += backgroundColorButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 배경색 버튼 클릭시 처리하기 - backgroundColorButton_Click(sender, e) /// <summary> /// 배경색 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void backgroundColorButton_Click(object sender, RoutedEventArgs e) { if((this.contentPresenter.Background as SolidColorBrush).Color == Colors.Blue) { this.contentPresenter.Background = new SolidColorBrush(Colors.Yellow); } else { this.contentPresenter.Background = new SolidColorBrush(Colors.Blue); } } #endregion } } |
TestProject.zip
■ Rectangle 클래스의 TranslationTransition 속성에서 Vector3Transition 객체를 사용해 이동 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}" /> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Name="translateButton1" Tag="0" Content="Set Translation to (0, 0, 0)" /> <Button Name="translateButton2" Margin="0 10 0 0" Tag="100" Content="Set Translation to (100, 100, 100)" /> <Button Name="translateButton3" Margin="0 10 0 0" Tag="200" Content="Set Translation to (200, 200, 200)" /> <TextBlock Margin="0 10 0 0" Text="Components" /> <CheckBox Name="translateXCheckBox" Margin="0 10 0 0" Content="Animate X" IsChecked="True" /> <CheckBox Name="translateYCheckBox" Margin="0 10 0 0" Content="Animate Y" IsChecked="True" /> <CheckBox Name="translateZCheckBox" Margin="0 10 0 0" Content="Animate Z" IsChecked="True" /> <NumberBox Name="translationNumberBox" Margin="0 10 0 0" Header="Translation (0.0 to 200.0)" Minimum="0" Maximum="200" Value="1" /> <Button Name="translateButton" Margin="0 10 0 0" Content="Set custom Translation" Padding="5" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using System; using System.Numerics; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Input; using Windows.System; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.rectangle.TranslationTransition = new Vector3Transition(); this.translateButton1.Click += translateButton_Click; this.translateButton2.Click += translateButton_Click; this.translateButton3.Click += translateButton_Click; this.translationNumberBox.KeyDown += translationNumberBox_KeyDown; this.translateButton.Click += translateButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Translation 넘버 박스 키 다운시 처리하기 - translationNumberBox_KeyDown(sender, e) /// <summary> /// Translation 넘버 박스 키 다운시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void translationNumberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { translateButton_Click(null, null); } } #endregion #region Translate 버튼 클릭시 처리하기 - translateButton_Click(sender, e) /// <summary> /// Translate 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void translateButton_Click(object sender, RoutedEventArgs e) { Vector3Transition translationTransition = rectangle.TranslationTransition; translationTransition.Components = ((this.translateXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) | ((this.translateYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) | ((this.translateZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0); float customValue; if(sender != null && (sender as Button).Tag != null) { customValue = (float)Convert.ToDouble((sender as Button).Tag); } else { customValue = NormalizeValue(translationNumberBox); } this.rectangle.Translation = new Vector3(customValue); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 정규화하기 - NormalizeValue(numberBox) /// <summary> /// 값 정규화하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float NormalizeValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ Rectangle 클래스의 ScaleTransition 속성에서 Vector3Transition 객체를 사용해 스케일 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="50" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}" /> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Name="scaleButton1" Tag="0.5" Content="Set Scale to (0.5, 0.5, 0.5)" /> <Button Name="scaleButton2" Margin="0 10 0 0" Tag="1.0" Content="Set Scale to (1.0, 1.0, 1.0)" /> <Button Name="scaleButton3" Margin="0 10 0 0" Tag="2.0" Content="Set Scale to (2.0, 2.0, 2.0)" /> <TextBlock Margin="0 10 0 0" Text="Components" /> <CheckBox Name="scaleXCheckBox" Margin="0 10 0 0" Content="Animate X" IsChecked="True" /> <CheckBox Name="scaleYCheckBox" Margin="0 10 0 0" Content="Animate Y" IsChecked="True" /> <CheckBox Name="scaleZCheckBox" Margin="0 10 0 0" Content="Animate Z" IsChecked="True" /> <NumberBox Name="scaleNumberBox" Margin="0 10 0 0" Header="Scale (0.0 to 5.0)" Minimum="0" Maximum="5" Value="1" /> <Button Name="scaleButton" Margin="0 10 0 0" Content="Set custom scale" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using System; using System.Numerics; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Input; using Windows.System; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.rectangle.ScaleTransition = new Vector3Transition(); this.scaleButton1.Click += scaleButton_Click; this.scaleButton2.Click += scaleButton_Click; this.scaleButton3.Click += scaleButton_Click; this.scaleNumberBox.KeyDown += scaleNumberBox_KeyDown; this.scaleButton.Click += scaleButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Scale 넘버 박스 키 다운시 처리하기 - scaleNumberBox_KeyDown(sender, e) /// <summary> /// Scale 넘버 박스 키 다운시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void scaleNumberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { scaleButton_Click(null, null); } } #endregion #region Scale 버튼 클릭시 처리하기 - scaleButton_Click(sender, e) /// <summary> /// Scale 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void scaleButton_Click(object sender, RoutedEventArgs e) { Vector3Transition scaleTransition = this.rectangle.ScaleTransition; scaleTransition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) | ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) | ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0); float customValue; if(sender != null && (sender as Button).Tag != null) { customValue = (float)Convert.ToDouble((sender as Button).Tag); } else { customValue = NormalizeValue(this.scaleNumberBox); } this.rectangle.Scale = new Vector3(customValue); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 정규화하기 - NormalizeValue(numberBox) /// <summary> /// 값 정규화하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float NormalizeValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ Rectangle 클래스의 RotationTransition 속성에서 ScalarTransition 객체를 사용해 회전 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1"> <GradientStop Offset="0.0" Color="LightGray" /> <GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColor}" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <NumberBox Name="rotationNumberBox" Width="200" Header="Rotation (0.0 to 360.0)" Minimum="0" Maximum="360" Value="45" /> <Button Name="rotateButton" Margin="0 10 0 0" Padding="5" Content="Set Rotation" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using System.Numerics; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Input; using Windows.System; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.rectangle.RotationTransition = new ScalarTransition(); this.rotationNumberBox.KeyDown += rotationNumberBox_KeyDown; this.rotateButton.Click += rotateButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Rotation 넘버 박스 키 다운시 처리하기 - rotationNumberBox_KeyDown(sender, e) /// <summary> /// Rotation 넘버 박스 키 다운시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void rotationNumberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { rotateButton_Click(null, null); } } #endregion #region Rotate 버튼 클릭시 처리하기 - rotateButton_Click(sender, e) /// <summary> /// Rotate 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void rotateButton_Click(object sender, RoutedEventArgs e) { this.rectangle.CenterPoint = new Vector3((float)this.rectangle.ActualWidth / 2, (float)this.rectangle.ActualHeight / 2, 0f); this.rectangle.Rotation = NormalizeValue(this.rotationNumberBox); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 정규화하기 - NormalizeValue(numberBox) /// <summary> /// 값 정규화하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float NormalizeValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ Rectangle 클래스의 OpacityTransition 속성에서 ScalarTransition 객체를 사용해 불투명도 변경에 대한 애니메이션을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}" Opacity="0.5" /> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <NumberBox Name="opacityNumberBox" Width="200" Header="Opacity (0.0 to 1.0)" Minimum="0" Maximum="1" Value="0.5" /> <Button Name="opacityButton" Margin="0 10 0 0" Content="Set Opacity" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using Microsoft.UI.Composition; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Input; using Microsoft.UI.Xaml.Media; using Windows.Foundation.Metadata; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 합성자 /// </summary> private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread(); #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.rectangle.OpacityTransition = new ScalarTransition(); this.opacityNumberBox.KeyDown += opacityNumberBox_KeyDown; this.opacityButton.Click += opacityButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 불투명도 넘버 박스 키 다운시 처리하기 - opacityNumberBox_KeyDown(sender, e) /// <summary> /// 불투명도 넘버 박스 키 다운시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void opacityNumberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == Windows.System.VirtualKey.Enter) { opacityButton_Click(null, null); } } #endregion #region 불투명도 버튼 클릭시 처리하기 - opacityButton_Click(sender, e) /// <summary> /// 불투명도 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void opacityButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } float opacity = NormalizeValue(this.opacityNumberBox); this.rectangle.Opacity = opacity; } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 정규화하기 - NormalizeValue(numberBox) /// <summary> /// 값 정규화하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float NormalizeValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ PopupThemeTransition 엘리먼트를 사용해 팝업 테마 변환을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Button Name="showPopupButton" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Content="Show Popup" /> <Popup Name="popup" Width="200" Height="200"> <Popup.ChildTransitions> <TransitionCollection> <PopupThemeTransition /> </TransitionCollection> </Popup.ChildTransitions> <Grid> <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="200" Height="200" StrokeThickness="2" Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}" Fill="{ThemeResource FlyoutBackgroundThemeBrush}" /> <StackPanel VerticalAlignment="Center" Margin="25" Width="200"> <TextBlock HorizontalAlignment="Center" Margin="10" TextAlignment="Center" TextWrapping="WrapWholeWords" FontFamily="Segoe UI" Text="This is a popup using PopupThemeTransition" /> <Button Name="closePopupButton" HorizontalAlignment="Center" Padding="5" Content="Close Popup" /> </StackPanel> </Grid> </Popup> </Grid> </Page> |
▶ MainPage.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 |
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.showPopupButton.Click += showPopupButton_Click; this.closePopupButton.Click += closePopupButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Show Popup 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e) /// <summary> /// Show Popup 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void showPopupButton_Click(object sender, RoutedEventArgs e) { this.popup.IsOpen = true; this.closePopupButton.Focus(FocusState.Programmatic); } #endregion #region Close Popup 버튼 클릭시 처리하기 - closePopupButton_Click(sender, e) /// <summary> /// Close Popup 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void closePopupButton_Click(object sender, RoutedEventArgs e) { this.popup.IsOpen = false; this.showPopupButton.Focus(FocusState.Programmatic); } #endregion } } |
TestProject.zip
■ AddDeleteThemeTransition 엘리먼트를 사용해 추가/삭제 테마 변환을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ListView Name="listView" Grid.Column="0"> <ListView.ItemContainerTransitions> <TransitionCollection> <AddDeleteThemeTransition /> </TransitionCollection> </ListView.ItemContainerTransitions> </ListView> <StackPanel Grid.Column="2" VerticalAlignment="Center"> <Button Name="addButton" Content="Add" /> <Button Name="deleteButton" Margin="0 10 0 0" Content="Delete" /> <Button Name="addAndDeleteButton" Margin="0 10 0 0" Content="Add and Delete" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 항목 카운트 /// </summary> private int itemCount = 10; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); for(int i = 0; i < this.itemCount; i++) { this.listView.Items.Add(new ListViewItem() { Content = "Item " + i }); } this.addButton.Click += addButton_Click; this.deleteButton.Click += deleteButton_Click; this.addAndDeleteButton.Click += addAndDeleteButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Add 버튼 클릭시 처리하기 - addButton_Click(sender, e) /// <summary> /// Add 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addButton_Click(object sender, RoutedEventArgs e) { this.listView.Items.Add(new ListViewItem() { Content = "New Item " + this.itemCount.ToString()}); this.itemCount++; } #endregion #region Delete 버튼 클릭시 처리하기 - deleteButton_Click(sender, e) /// <summary> /// Delete 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void deleteButton_Click(object sender, RoutedEventArgs e) { if(this.listView.Items.Count > 0) { this.listView.Items.RemoveAt(0); } } #endregion #region Add and Delete 버튼 클릭시 처리하기 - addAndDeleteButton_Click(sender, e) /// <summary> /// Add and Delete 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addAndDeleteButton_Click(object sender, RoutedEventArgs e) { addButton_Click(sender, e); deleteButton_Click(sender, e); } #endregion } } |
TestProject.zip
■ ContentThemeTransition 엘리먼트를 사용해 컨텐트 테마 변환을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ListView x:Name="ContentList" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="300" BorderThickness="1" BorderBrush="Black"> <ListView.ItemContainerTransitions> <TransitionCollection> <ContentThemeTransition /> </TransitionCollection> </ListView.ItemContainerTransitions> </ListView> <Button Name="refreshDataButton" Grid.Column="2" VerticalAlignment="Center" Content="Refresh data" /> </Grid> </Page> |
▶ MainPage.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 |
using System.Collections.Generic; 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(); SetListViewData(); this.refreshDataButton.Click += refreshDataButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Refresh data 버튼 클릭시 처리하기 - refreshDataButton_Click(sender, e) /// <summary> /// Refresh data 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void refreshDataButton_Click(object sender, RoutedEventArgs e) { SetListViewData(true); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 리스트 뷰 데이터 설정하기 - SetListViewData(updated) /// <summary> /// 리스트 뷰 데이터 설정하기 /// </summary> /// <param name="updated">업데이트 여부</param> private void SetListViewData(bool updated = false) { List<string> list = new List<string>(); for(int i = 0; i < 5; i++) { list.Add(updated ? "Updated content " + i : "Item " + i); } this.listView.ItemsSource = list; } #endregion } } |
TestProject.zip
■ RepositionThemeTransition 엘리먼트를 사용해 위치 변경 테마 변환을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" Margin="5" Width="75" Height="75" Fill="Red" /> <Rectangle Name="rectangle2" Grid.Column="1" Margin="5" Width="75" Height="75" Fill="Green" /> <Rectangle Grid.Column="2" Margin="5" Width="75" Height="75" Fill="Blue"> <Rectangle.Transitions> <TransitionCollection> <RepositionThemeTransition /> </TransitionCollection> </Rectangle.Transitions> </Rectangle> </Grid> <Button Name="repositionButton" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" Content="Reposition" /> </Grid> </Page> |
▶ MainPage.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 |
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.repositionButton.Click += repositionButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region Reposition 버튼 클릭시 처리하기 - repositionButton_Click(sender, e) /// <summary> /// Reposition 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void repositionButton_Click(object sender, RoutedEventArgs e) { this.rectangle2.Visibility = this.rectangle2.Visibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible; } #endregion } } |
TestProject.zip
■ EntranceThemeTransition 엘리먼트의 IsStaggeringEnabled 속성을 사용해 진입 테마 변환을 만드는 방법을 보여준다. ▶ MainPage.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 |
<?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"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Name="rectangleStackPanel" Grid.Column="0" Orientation="Horizontal"> <StackPanel.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition IsStaggeringEnabled="True" /> </TransitionCollection> </StackPanel.ChildrenTransitions> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> </StackPanel> <StackPanel Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"> <Button Name="addOneButton" Tag="1" Content="Add one" /> <Button Name="addFiveButton" Margin="0 10 0 0" Tag="5" Content="Add five" /> <Button Name="clearAllButton" Margin="0 10 0 0" Content="Clear all" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using System; using Microsoft.UI; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Media; using Microsoft.UI.Xaml.Shapes; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.addOneButton.Click += addButton_Click; this.addFiveButton.Click += addButton_Click; this.clearAllButton.Click += clearAllButton_Click; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region Add 버튼 클릭시 처리하기 - addButton_Click(sender, e) /// <summary> /// Add 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addButton_Click(object sender, RoutedEventArgs e) { int value = Convert.ToInt32((sender as Button).Tag); for(int i = 0; i < value; i++) { Thickness thickness = new Thickness(5.0); this.rectangleStackPanel.Children.Add ( new Rectangle() { Width = 50, Height = 50, Margin = thickness, Fill = new SolidColorBrush(Colors.LightBlue) } ); } } #endregion #region Clear All 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e) /// <summary> /// Clear All 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void clearAllButton_Click(object sender, RoutedEventArgs e) { this.rectangleStackPanel.Children.Clear(); } #endregion } } |
TestProject.zip
■ NavigationTransitionInfo 클래스의 파생 클래스들을 사용해 페이지간 시각적 피드백을 제공하는 페이지 전환을 만드는 방법을 보여준다. ▶ SimplePage1.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 |
<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> |
▶ SimplePage1.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 |
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 } } |
▶
■ BrushTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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 Margin="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ContentPresenter Name="contentPresenter" Grid.Column="0" Width="100" Height="100" Background="Blue"> <ContentPresenter.BackgroundTransition> <BrushTransition /> </ContentPresenter.BackgroundTransition> </ContentPresenter> <Button Grid.Column="2" VerticalAlignment="Center" Content="배경색 변경" Click="changeButton_Click" /> </Grid> </Page> |
▶ MainPage.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 |
using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.UI; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; 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 = "BrushTransition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 배경색 변경 버튼 클릭시 처리하기 - setButton_Click(sender, e) /// <summary> /// 배경색 변경 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void changeButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } if((this.contentPresenter.Background as SolidColorBrush).Color == Colors.Blue) { this.contentPresenter.Background = new SolidColorBrush(Colors.Yellow); } else { this.contentPresenter.Background = new SolidColorBrush(Colors.Blue); } } #endregion } } |
TestProject.zip
■ Vector3Transition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.TranslationTransition> <Vector3Transition /> </Rectangle.TranslationTransition> </Rectangle> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <Button Content="이동 설정 : (0, 0, 0)" Tag="0" Click="setButton_Click" /> <Button Content="이동 설정 : (100, 100, 100)" Tag="100" Click="setButton_Click" /> <Button Content="이동 설정 : (200, 200, 200)" Tag="200" Click="setButton_Click" /> <TextBlock Text="컴포넌트" /> <CheckBox Name="scaleXCheckBox" IsChecked="True" Content="X축 애니메이션" /> <CheckBox Name="scaleYCheckBox" IsChecked="True" Content="Y축 애니메이션" /> <CheckBox Name="scaleZCheckBox" IsChecked="True" Content="Z축 애니메이션" /> <muxc:NumberBox x:Name="numberBox" Header="이동 설정 (0.0 ~ 200.0)" Minimum="0" Maximum="200" Value="1" KeyDown="numberBox_KeyDown" /> <Button Content="커스텀 이동 설정" Click="setButton_Click" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
using Microsoft.UI.Xaml.Controls; using System; using System.Numerics; using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.System; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "Vector3Transition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e) /// <summary> /// 넘버 박스 키 DOWN 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { setButton_Click(null, null); } } #endregion #region 이동 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e) /// <summary> /// 이동 설정 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void setButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } Vector3Transition transition = this.rectangle.TranslationTransition; transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) | ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) | ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0); Button button = sender as Button; float customValue; if(button != null && button.Tag != null) { customValue = Convert.ToSingle(button.Tag); } else { customValue = CheckValue(this.numberBox); } this.rectangle.Translation = new Vector3(customValue); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 체크하기 - CheckValue(numberBox) /// <summary> /// 값 체크하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float CheckValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ Vector3Transition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.ScaleTransition> <Vector3Transition /> </Rectangle.ScaleTransition> </Rectangle> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <Button Content="배율 설정 : (0.5, 0.5, 0.5)" Tag="0.5" Click="setButton_Click" /> <Button Content="배율 설정 : (1.0, 1.0, 1.0)" Tag="1.0" Click="setButton_Click" /> <Button Content="배율 설정 : (2.0, 2.0, 2.0)" Tag="2.0" Click="setButton_Click" /> <TextBlock Text="컴포넌트" /> <CheckBox Name="scaleXCheckBox" IsChecked="True" Content="X축 애니메이션" /> <CheckBox Name="scaleYCheckBox" IsChecked="True" Content="Y축 애니메이션" /> <CheckBox Name="scaleZCheckBox" IsChecked="True" Content="Z축 애니메이션" /> <muxc:NumberBox x:Name="numberBox" Header="배율 설정 (0.0 ~ 5.0)" Minimum="0" Maximum="5" Value="1" KeyDown="numberBox_KeyDown" /> <Button Content="커스텀 배율 설정" Click="setButton_Click" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
using Microsoft.UI.Xaml.Controls; using System; using System.Numerics; using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.System; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "Vector3Transition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e) /// <summary> /// 넘버 박스 키 DOWN 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { setButton_Click(null, null); } } #endregion #region 배율 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e) /// <summary> /// 배율 설정 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void setButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } Vector3Transition transition = this.rectangle.ScaleTransition; transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) | ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) | ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0); Button button = sender as Button; float customValue; if(button != null && button.Tag != null) { customValue = Convert.ToSingle(button.Tag); } else { customValue = CheckValue(this.numberBox); } this.rectangle.Scale = new Vector3(customValue); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 체크하기 - CheckValue(numberBox) /// <summary> /// 값 체크하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float CheckValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ ScalarTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.5 0" EndPoint="0.5 1"> <GradientStop Color="LightGray" Offset="0.0" /> <GradientStop Color="{ThemeResource SystemAccentColor}" Offset="1.0" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RotationTransition> <ScalarTransition /> </Rectangle.RotationTransition> </Rectangle> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <muxc:NumberBox Name="numberBox" Header="회전 (0.0 ~ 360.0)" Minimum="0" Maximum="360" Value="45" KeyDown="numberBox_KeyDown" /> <Button Width="100" Height="30" Content="회전 설정" Click="setButton_Click" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 127 |
using Microsoft.UI.Xaml.Controls; using System.Numerics; using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.System; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "ScalarTransition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e) /// <summary> /// 넘버 박스 키 DOWN 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { setButton_Click(null, null); } } #endregion #region 회전 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e) /// <summary> /// 회전 설정 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void setButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } this.rectangle.CenterPoint = new Vector3 ( (float)this.rectangle.ActualWidth / 2, (float)this.rectangle.ActualHeight / 2, 0f ); this.rectangle.Rotation = CheckValue(this.numberBox); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 체크하기 - CheckValue(numberBox) /// <summary> /// 값 체크하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private float CheckValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return (float)numberBox.Value; } #endregion } } |
TestProject.zip
■ ScalarTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="50"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Name="rectangle" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}" Opacity="0.5"> <Rectangle.OpacityTransition> <ScalarTransition /> </Rectangle.OpacityTransition> </Rectangle> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <muxc:NumberBox Name="numberBox" Header="불투명도 (0.0 ~ 1.0)" Minimum="0" Maximum="1" Value="0.5" KeyDown="numberBox_KeyDown" /> <Button Width="120" Height="30" Content="불투명도 설정" Click="setButton_Click" /> </StackPanel> </Grid> </Page> |
▶ MainPage.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 |
using Microsoft.UI.Xaml.Controls; using Windows.Foundation; using Windows.Foundation.Metadata; using Windows.Graphics.Display; using Windows.System; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "ScalarTransition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e) /// <summary> /// 넘버 박스 키 DOWN 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e) { if(e.Key == VirtualKey.Enter) { setButton_Click(null, null); } } #endregion #region 불투명도 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e) /// <summary> /// 불투명도 설정 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void setButton_Click(object sender, RoutedEventArgs e) { if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { return; } double value = CheckValue(this.numberBox); this.rectangle.Opacity = value; } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 값 체크하기 - CheckValue(numberBox) /// <summary> /// 값 체크하기 /// </summary> /// <param name="numberBox">넘버 박스</param> /// <returns>값</returns> private double CheckValue(NumberBox numberBox) { if(double.IsNaN(numberBox.Value)) { numberBox.Value = 0; } return numberBox.Value; } #endregion } } |
TestProject.zip
■ PopupThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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 Background="CadetBlue"> <Button Name="showPopupButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="30" Content="팝업 표시" Click="showPopupButton_Click" /> <Popup Name="popup" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200"> <Popup.ChildTransitions> <TransitionCollection> <PopupThemeTransition /> </TransitionCollection> </Popup.ChildTransitions> <Grid> <Ellipse Width="200" Height="200" StrokeThickness="2" Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}" Fill="{ThemeResource FlyoutBackgroundThemeBrush}" /> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Spacing="5"> <TextBlock HorizontalAlignment="Center" Margin="10" TextAlignment="Center" TextWrapping="WrapWholeWords" Text="PopupThemeTransition 엘리먼트를 사용한 팝업 입니다." /> <Button Name="closePopupButton" HorizontalAlignment="Center" Width="100" Height="30" Content="팝업 닫기" Click="closePopupButton_Click" /> </StackPanel> </Grid> </Popup> </Grid> </Page> |
▶ MainPage.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 |
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 = "PopupThemeTransition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 팝업 표시 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e) /// <summary> /// 팝업 표시 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void showPopupButton_Click(object sender, RoutedEventArgs e) { this.popup.IsOpen = true; this.closePopupButton.Focus(FocusState.Programmatic); } #endregion #region 팝업 닫기 버튼 클릭시 처리하기 - closePopupButton_Click(sender, e) /// <summary> /// 팝업 닫기 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void closePopupButton_Click(object sender, RoutedEventArgs e) { this.popup.IsOpen = false; this.showPopupButton.Focus(FocusState.Programmatic); } #endregion } } |
TestProject.zip
■ AddDeleteThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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> <Grid Margin="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black"> <ListView Name="listView"> <ListView.ItemContainerTransitions> <TransitionCollection> <AddDeleteThemeTransition /> </TransitionCollection> </ListView.ItemContainerTransitions> </ListView> </Border> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <Button Width="100" Height="30" Content="추가" Click="addButton_Click" /> <Button Width="100" Height="30" Content="삭제" Click="deleteButton_Click" /> <Button Width="100" Height="30" Content="추가/삭제" Click="addDeleteButton_Click" /> </StackPanel> </Grid> </Grid> </Page> |
▶ MainPage.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 |
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 { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 항목 카운트 /// </summary> private int itemCount = 10; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "AddDeleteThemeTransition 엘리먼트 사용하기"; #endregion for(int i = 0; i < this.itemCount; i++) { this.listView.Items.Add(new ListViewItem() { Content = "항목 " + i }); } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e) /// <summary> /// 추가 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addButton_Click(object sender, RoutedEventArgs e) { this.listView.Items.Add(new ListViewItem() { Content = "새 항목 " + this.itemCount.ToString()}); this.itemCount++; } #endregion #region 삭제 버튼 클릭시 처리하기 - deleteButton_Click(sender, e) /// <summary> /// 삭제 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void deleteButton_Click(object sender, RoutedEventArgs e) { if(this.listView.Items.Count > 0) { this.listView.Items.RemoveAt(0); } } #endregion #region 추가/삭제 버튼 클릭시 처리하기 - addDeleteButton_Click(sender, e) /// <summary> /// 추가/삭제 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addDeleteButton_Click(object sender, RoutedEventArgs e) { addButton_Click(sender, e); deleteButton_Click(sender, e); } #endregion } } |
TestProject.zip
■ ContentThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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> <Grid Margin="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Border Grid.Column="0" BorderThickness="1" BorderBrush="Black"> <ListView Name="listView"> <ListView.ItemContainerTransitions> <TransitionCollection> <ContentThemeTransition /> </TransitionCollection> </ListView.ItemContainerTransitions> </ListView> </Border> <Button Grid.Column="2" VerticalAlignment="Center" Width="100" Height="30" Content="업데이트" Click="updateButton_Click" /> </Grid> </Grid> </Page> |
▶ MainPage.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 |
using System; using System.Collections.Generic; 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 = "ContentThemeTransition 엘리먼트 사용하기"; #endregion SetListViewData(); } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 업데이트 버튼 클릭시 처리하기 - updateButton_Click(sender, e) /// <summary> /// 업데이트 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void updateButton_Click(object sender, RoutedEventArgs e) { SetListViewData(); } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 리스트 뷰 데이터 설정하기 - SetListViewData() /// <summary> /// 리스트 뷰 데이터 설정하기 /// </summary> private void SetListViewData() { List<string> list = new List<string>(); for (int i = 0; i < 5; i++) { list.Add($"항목 : {DateTime.Now}"); } this.listView.ItemsSource = list; } #endregion } } |
TestProject.zip
■ RepositionThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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> <Grid Margin="100"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Rectangle Grid.Column="0" Margin="5" Width="75" Height="75" Fill="Red" /> <Rectangle Name="rectangle2" Grid.Column="1" Margin="5" Width="75" Height="75" Fill="Green" /> <Rectangle Grid.Column="2" Margin="5" Width="75" Height="75" Fill="Blue"> <Rectangle.Transitions> <TransitionCollection> <RepositionThemeTransition /> </TransitionCollection> </Rectangle.Transitions> </Rectangle> </Grid> <Button Grid.Column="2" VerticalAlignment="Center" Width="100" Height="30" Content="재배치" Click="repositionButton_Click" /> </Grid> </Grid> </Page> |
▶ MainPage.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 |
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 = "RepositionThemeTransition 엘리먼트 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 재배치 버튼 클릭시 처리하기 - repositionButton_Click(sender, e) /// <summary> /// 재배치 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void repositionButton_Click(object sender, RoutedEventArgs e) { this.rectangle2.Visibility = (this.rectangle2.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible; } #endregion } } |
TestProject.zip
■ EntranceThemeTransition 엘리먼트의 IsStaggeringEnabled 속성을 사용하는 방법을 보여준다. ▶ MainPage.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 |
<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> <Grid Margin="30"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <StackPanel Name="stackPanel" Grid.Row="0" Orientation="Horizontal"> <StackPanel.ChildrenTransitions> <TransitionCollection> <EntranceThemeTransition IsStaggeringEnabled="True" /> </TransitionCollection> </StackPanel.ChildrenTransitions> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" /> </StackPanel> <StackPanel Grid.Column="2" VerticalAlignment="Center" Spacing="10"> <Button Content="1개 추가" Width="100" Height="30" Tag="1" Click="addButton_Click" /> <Button Content="5개 추가" Width="100" Height="30" Tag="5" Click="addButton_Click" /> <Button Content="모두 지우기" Width="100" Height="30" Click="clearAllButton_Click" /> </StackPanel> </Grid> </Grid> </Page> |
▶ MainPage.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 |
using System; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Windows.UI.Xaml.Shapes; 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 = "EntranceThemeTransition 엘리먼트 : IsStaggeringEnabled 속성 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e) /// <summary> /// 추가 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void addButton_Click(object sender, RoutedEventArgs e) { int value = Convert.ToInt32((sender as Button).Tag); for(int i = 0; i < value; i++) { this.stackPanel.Children.Add ( new Rectangle() { Width = 50, Height = 50, Margin = new Thickness(5), Fill = new SolidColorBrush(Windows.UI.Colors.LightBlue) } ); } } #endregion #region 모두 지우기 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e) /// <summary> /// 모두 지우기 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void clearAllButton_Click(object sender, RoutedEventArgs e) { this.stackPanel.Children.Clear(); } #endregion } } |
TestProject.zip
■ Frame 클래스에서 페이지 전환시 애니메이션을 사용하는 방법을 보여준다. ▶ SamplePage1.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 |
<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 Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Margin="5" MinWidth="250" MinHeight="{StaticResource TileHeightKey}" Background="{ThemeResource SystemAccentColor}" /> <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 Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="5 10"> <TextBlock TextWrapping="WrapWholeWords" Style="{ThemeResource BodyTextBlockStyle}"> <TextBlock.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. </TextBlock.Text> </TextBlock> </Grid> </Grid> </ScrollViewer> </Page> |
▶ SamplePage1.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 |
using Windows.Foundation.Metadata; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; using Windows.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("ForwardAnimation", this.sourceGrid); if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { animation.Configuration = configuration; } } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Proptected #region 탐색되는 경우 처리하기 - OnNavigatedTo(e) /// <summary> /// 탐색되는 경우 처리하기 /// </summary> /// <param name="e">이벤트 인자</param> protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation"); if(animation != null) { animation.TryStart(this.sourceGrid); } } #endregion } } |
▶ SamplePage2.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 |
<Page x:Class="TestProject.SamplePage2" 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="*" /> </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="contentPanel" 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"> <TextBlock.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. </TextBlock.Text> </TextBlock> </StackPanel> </Grid> </ScrollViewer> </Page> |
▶ SamplePage2.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 |
using Windows.Foundation.Metadata; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation; namespace TestProject { /// <summary> /// 샘플 페이지 2 /// </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("BackwardAnimation", 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("ForwardAnimation"); if(animation != null) { this.contentPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() }; animation.TryStart(this.targetGrid); } } #endregion } } |
▶
■ ConnectedAnimation 클래스에서 단순 연결 애니메이션을 사용하는 방법을 보여준다. ▶ SamplePage1.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 |
<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 Name="sourceGrid" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Margin="5" MinWidth="250" MinHeight="{StaticResource TileHeightKey}" Background="{ThemeResource SystemAccentColor}" /> <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 Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Margin="5 10"> <TextBlock TextWrapping="WrapWholeWords" Style="{ThemeResource BodyTextBlockStyle}"> <TextBlock.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. </TextBlock.Text> </TextBlock> </Grid> </Grid> </ScrollViewer> </Page> |
▶ SamplePage1.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 |
using Windows.Foundation.Metadata; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; using Windows.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("ForwardAnimation", this.sourceGrid); if(configuration != null && ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7)) { animation.Configuration = configuration; } } #endregion ////////////////////////////////////////////////////////////////////////////////////////// Proptected #region 탐색되는 경우 처리하기 - OnNavigatedTo(e) /// <summary> /// 탐색되는 경우 처리하기 /// </summary> /// <param name="e">이벤트 인자</param> protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); ConnectedAnimation animation = ConnectedAnimationService.GetForCurrentView().GetAnimation("BackwardAnimation"); if(animation != null) { animation.TryStart(this.sourceGrid); } } #endregion } } |
▶ SamplePage2.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 |
<Page x:Class="TestProject.SamplePage2" 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="*" /> </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="contentPanel" 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"> <TextBlock.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. </TextBlock.Text> </TextBlock> </StackPanel> </Grid> </ScrollViewer> </Page> |
▶ SamplePage2.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 |
using Windows.Foundation.Metadata; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; using Windows.UI.Xaml.Navigation; namespace TestProject { /// <summary> /// 샘플 페이지 2 /// </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("BackwardAnimation", 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("ForwardAnimation"); if(animation != null) { this.contentPanel.Transitions = new TransitionCollection { new EntranceThemeTransition() }; animation.TryStart(this.targetGrid); } } #endregion } } |
▶