A animation helper that morphs between two controls #4338
Add sample for TransitionHelper.
- Loading branch information
commit b890cad82fd1bacd7c97d91a3fc6cce31437e5ce
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| //create a TransitionHelper. | ||
| var TransitionHelper transitionHelper = new TransitionHelper(); | ||
|
|
||
| //Configure TransitionHelper. | ||
| transitionHelper.AnimationConfigs = new AnimationConfig[]{ | ||
| new AnimationConfig | ||
| { | ||
| Id = "background" | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "image", | ||
| AdditionalAnimations = new AnimationTarget[]{ AnimationTarget.Scale } | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "guide" | ||
| }, | ||
| }; | ||
| transitionHelper.Source = FirstControl; | ||
| transitionHelper.Target = SecondControl; | ||
|
|
||
| //Animate. | ||
| await transitionHelper.AnimateAsync() | ||
|
|
||
| //Reverse. | ||
| await transitionHelper.ReverseAsync(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TransitionHelperPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| mc:Ignorable="d"> | ||
| <Grid x:Name="XamlRoot" | ||
| animations:TransitionHelper.Id="root" /> | ||
| </Page> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| // Licensed to the .NET Foundation under one or more agreements. | ||
| // The .NET Foundation licenses this file to you under the MIT license. | ||
| // See the LICENSE file in the project root for more information. | ||
|
|
||
| using System.Numerics; | ||
| using Microsoft.Toolkit.Uwp.UI; | ||
| using Microsoft.Toolkit.Uwp.UI.Animations; | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
| using Windows.UI.Xaml.Input; | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages | ||
| { | ||
| /// <summary> | ||
| /// A page that shows how to use the <see cref="TransitionHelper"/> helper. | ||
| /// </summary> | ||
| public sealed partial class TransitionHelperPage : Page, IXamlRenderListener | ||
| { | ||
| private readonly TransitionHelper _transitionHelper = new(); | ||
| private FrameworkElement _firstControl; | ||
| private FrameworkElement _secondControl; | ||
| private FrameworkElement _thirdControl; | ||
| private FrameworkElement _secondNameTextBlock; | ||
| private FrameworkElement _secondDescTextBlock; | ||
| private FrameworkElement _thirdNameTextBlock; | ||
| private FrameworkElement _thirdDescTextBlock; | ||
| private Button _secondButton; | ||
| private Button _secondBackButton; | ||
| private Button _thirdButton; | ||
|
|
||
| /// <summary> | ||
| /// Initializes a new instance of the <see cref="TransitionHelperPage"/> class. | ||
| /// </summary> | ||
| public TransitionHelperPage() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
|
|
||
| public void OnXamlRendered(FrameworkElement control) | ||
| { | ||
| this._firstControl = control.FindChild("FirstControl"); | ||
| this._secondControl = control.FindChild("SecondControl"); | ||
| this._thirdControl = control.FindChild("ThirdControl"); | ||
| this._secondNameTextBlock = control.FindChild("SecondNameTextBlock"); | ||
| this._secondDescTextBlock = control.FindChild("SecondDescTextBlock"); | ||
| this._thirdNameTextBlock = control.FindChild("ThirdNameTextBlock"); | ||
| this._thirdDescTextBlock = control.FindChild("ThirdDescTextBlock"); | ||
| this._secondButton = control.FindChild("SecondButton") as Button; | ||
| this._secondBackButton = control.FindChild("SecondBackButton") as Button; | ||
| this._thirdButton = control.FindChild("ThirdButton") as Button; | ||
| this._firstControl.Tapped += FirstControl_Tapped; | ||
| this._secondBackButton.Click += SecondBackButton_Click; | ||
| this._secondButton.Click += SecondButton_Click; | ||
| this._thirdButton.Click += ThirdButton_Click; | ||
| } | ||
|
|
||
| private void FirstControl_Tapped(object sender, TappedRoutedEventArgs e) | ||
| { | ||
| _transitionHelper.AnimationConfigs = new AnimationConfig[]{ | ||
| new AnimationConfig | ||
| { | ||
| Id = "background" | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "image", | ||
| AdditionalAnimations = new AnimationTarget[]{ AnimationTarget.Scale } | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "guide" | ||
| }, | ||
| }; | ||
| _transitionHelper.Source = _firstControl; | ||
| _transitionHelper.Target = _secondControl; | ||
| _transitionHelper.IgnoredElementHideTranslation = new Vector3(20, 0, 0); | ||
| TransitionHelper.SetIsIgnored(_secondNameTextBlock, true); | ||
| TransitionHelper.SetIsIgnored(_secondDescTextBlock, true); | ||
| _ = _transitionHelper.AnimateAsync(); | ||
| } | ||
|
|
||
| private void SecondBackButton_Click(object sender, RoutedEventArgs e) | ||
| { | ||
| _ = _transitionHelper.ReverseAsync(); | ||
| } | ||
|
|
||
| private void SecondButton_Click(object sender, RoutedEventArgs e) | ||
| { | ||
| _transitionHelper.AnimationConfigs = new AnimationConfig[]{ | ||
| new AnimationConfig | ||
| { | ||
| Id = "background" | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "image", | ||
| AdditionalAnimations = new AnimationTarget[]{ AnimationTarget.Scale } | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "guide" | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "name", | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "desc", | ||
| }, | ||
| }; | ||
| _transitionHelper.Source = _secondControl; | ||
| _transitionHelper.Target = _thirdControl; | ||
| _transitionHelper.IgnoredElementHideTranslation = new Vector3(0, 20, 0); | ||
| TransitionHelper.SetIsIgnored(_secondNameTextBlock, false); | ||
| TransitionHelper.SetIsIgnored(_secondDescTextBlock, false); | ||
| _ = _transitionHelper.AnimateAsync(); | ||
| } | ||
|
|
||
| private void ThirdButton_Click(object sender, RoutedEventArgs e) | ||
| { | ||
| _transitionHelper.AnimationConfigs = new AnimationConfig[]{ | ||
| new AnimationConfig | ||
| { | ||
| Id = "background" | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "image", | ||
| AdditionalAnimations = new AnimationTarget[]{ AnimationTarget.Scale } | ||
| }, | ||
| new AnimationConfig | ||
| { | ||
| Id = "guide" | ||
| } | ||
| }; | ||
| _transitionHelper.Source = _thirdControl; | ||
| _transitionHelper.Target = _firstControl; | ||
| TransitionHelper.SetIsIgnored(_thirdNameTextBlock, true); | ||
| TransitionHelper.SetIsIgnored(_thirdDescTextBlock, true); | ||
| _ = _transitionHelper.AnimateAsync(); | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| <Page | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:ui="using:Microsoft.Toolkit.Uwp.UI" | ||
| xmlns:animations="using:Microsoft.Toolkit.Uwp.UI.Animations" | ||
| xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media" | ||
| mc:Ignorable="d"> | ||
| <Grid> | ||
| <StackPanel | ||
| x:Name="FirstControl" | ||
| Margin="100" | ||
| HorizontalAlignment="Left" | ||
| VerticalAlignment="Top" | ||
| Orientation="Horizontal" | ||
| Spacing="10"> | ||
| <Grid Width="50" Height="50"> | ||
| <Border | ||
| animations:TransitionHelper.Id="background" | ||
| Background="White" | ||
| CornerRadius="8"> | ||
| <ui:Effects.Shadow> | ||
| <media:AttachedCardShadow | ||
| BlurRadius="4" | ||
| CornerRadius="8" | ||
| Opacity="0.4" /> | ||
| </ui:Effects.Shadow> | ||
| </Border> | ||
| <PersonPicture | ||
| Width="40" | ||
| BorderThickness="0" | ||
| animations:TransitionHelper.Id="image" | ||
| ProfilePicture="ms-appx:///Assets/Photos/Owl.jpg" /> | ||
| </Grid> | ||
| <TextBlock VerticalAlignment="Center" animations:TransitionHelper.Id="guide"> | ||
| ⬅ Click Here | ||
| </TextBlock> | ||
| </StackPanel> | ||
| <Grid | ||
| x:Name="SecondControl" | ||
| Margin="150" | ||
| HorizontalAlignment="Center" | ||
| VerticalAlignment="Top" | ||
| Visibility="Collapsed"> | ||
| <Border | ||
| animations:TransitionHelper.Id="background" | ||
| Background="White" | ||
| CornerRadius="8"> | ||
| <ui:Effects.Shadow> | ||
| <media:AttachedCardShadow | ||
| BlurRadius="4" | ||
| CornerRadius="8" | ||
| Opacity="0.4" /> | ||
| </ui:Effects.Shadow> | ||
| </Border> | ||
| <StackPanel | ||
| Padding="20" | ||
| Orientation="Horizontal" | ||
| Spacing="20"> | ||
| <PersonPicture | ||
| Width="50" | ||
| BorderThickness="0" | ||
| animations:TransitionHelper.Id="image" | ||
| ProfilePicture="ms-appx:///Assets/Photos/Owl.jpg" /> | ||
| <StackPanel | ||
| Width="400" | ||
| VerticalAlignment="Center" | ||
| Spacing="5"> | ||
| <TextBlock x:Name="SecondNameTextBlock" animations:TransitionHelper.Id="name">Magic</TextBlock> | ||
| <TextBlock x:Name="SecondDescTextBlock" animations:TransitionHelper.Id="desc">Magic is a cute cat.</TextBlock> | ||
| </StackPanel> | ||
| <StackPanel animations:TransitionHelper.Id="guide" Spacing="2"> | ||
| <Button x:Name="SecondBackButton">go back</Button> | ||
| <Button x:Name="SecondButton">Click Here</Button> | ||
| </StackPanel> | ||
| </StackPanel> | ||
| </Grid> | ||
| <Grid | ||
| x:Name="ThirdControl" | ||
| Margin="0, 150" | ||
| HorizontalAlignment="Center" | ||
| VerticalAlignment="Center" | ||
| Visibility="Collapsed"> | ||
| <Border | ||
| animations:TransitionHelper.Id="background" | ||
| Background="White" | ||
| CornerRadius="8"> | ||
| <ui:Effects.Shadow> | ||
| <media:AttachedCardShadow | ||
| BlurRadius="4" | ||
| CornerRadius="8" | ||
| Opacity="0.4" /> | ||
| </ui:Effects.Shadow> | ||
| </Border> | ||
| <StackPanel | ||
| Padding="20" | ||
| HorizontalAlignment="Center" | ||
| BorderBrush="DimGray" | ||
| BorderThickness="0,0,0,0.5" | ||
| Spacing="20"> | ||
| <PersonPicture | ||
| Width="80" | ||
| BorderThickness="0" | ||
| HorizontalAlignment="Center" | ||
| animations:TransitionHelper.Id="image" | ||
| ProfilePicture="ms-appx:///Assets/Photos/Owl.jpg" /> | ||
| <StackPanel Spacing="5"> | ||
| <TextBlock | ||
| x:Name="ThirdNameTextBlock" | ||
| HorizontalAlignment="Center" | ||
| animations:TransitionHelper.Id="name" | ||
| FontSize="24"> | ||
| Magic | ||
| </TextBlock> | ||
| <TextBlock | ||
| x:Name="ThirdDescTextBlock" | ||
| HorizontalAlignment="Center" | ||
| animations:TransitionHelper.Id="desc"> | ||
| Magic is a cute cat, but sometimes very naughty. | ||
| </TextBlock> | ||
| </StackPanel> | ||
| <StackPanel Padding="50,100" animations:TransitionHelper.IsIgnored="True"> | ||
| <Rectangle | ||
| Width="200" | ||
| Height="20" | ||
| Margin="10" | ||
| HorizontalAlignment="Left" | ||
| Fill="Silver" | ||
| Opacity="0.6" | ||
| RadiusX="5" | ||
| RadiusY="5" /> | ||
| <Rectangle | ||
| Width="300" | ||
| Height="20" | ||
| Margin="10" | ||
| HorizontalAlignment="Left" | ||
| Fill="Silver" | ||
| Opacity="0.6" | ||
| RadiusX="5" | ||
| RadiusY="5" /> | ||
| <Rectangle | ||
| Width="200" | ||
| Height="20" | ||
| Margin="10" | ||
| HorizontalAlignment="Left" | ||
| Fill="Silver" | ||
| Opacity="0.6" | ||
| RadiusX="5" | ||
| RadiusY="5" /> | ||
| <Rectangle | ||
| Width="400" | ||
| Height="20" | ||
| Margin="10" | ||
| HorizontalAlignment="Left" | ||
| Fill="Silver" | ||
| Opacity="0.6" | ||
| RadiusX="5" | ||
| RadiusY="5" /> | ||
| </StackPanel> | ||
| </StackPanel> | ||
| <Button | ||
| x:Name="ThirdButton" | ||
| Margin="10" | ||
| HorizontalAlignment="Right" | ||
| VerticalAlignment="Top" | ||
| animations:TransitionHelper.Id="guide"> | ||
| Click Here | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </Page> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.