Wrong UWP offset animation
For my application, I want to be able to use the Composition API to animate the displacement UIElement This element is predefined in Xaml and I found that the visual level of these controls is only calculated AFTER the animation has started ...
This causes the animation to only show if it was called a second time
My Xaml
<StackPanel x:Name="ActionButtonsPanel" Margin="50,175,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
<Button x:Name="CreateNewButton" Tag="" Content="Create New..." Style="{StaticResource IconButtonStyle}" Click="CreateNewButton_Click"/>
<Button x:Name="OpenFileButton" Tag="" Content="Open File..." Style="{StaticResource IconButtonStyle}" Margin="0,10,0,0" Click="OpenFileButton_Click"/>
</StackPanel>
My code
private void ShowNextButtons(UIElement Item1, UIElement Item2) {
var _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var visual1 = ElementCompositionPreview.GetElementVisual(Item1);
visual1.CenterPoint = new Vector3(0, (float) Item1.RenderSize.Height / 2F, 0);
var animationGroup1 = _compositor.CreateAnimationGroup();
var offset1 = visual1.Offset; //First Time: Offset = <0,0,0>
var fadeOut = _compositor.CreateScalarKeyFrameAnimation();
fadeOut.Target = "Opacity";
fadeOut.Duration = TimeSpan.FromMilliseconds(1000);
fadeOut.InsertKeyFrame(0, 1);
fadeOut.InsertKeyFrame(1, 0);
//animationGroup1.Add(fadeOut); Not included: To be able to click a second time
var slideOut = _compositor.CreateScalarKeyFrameAnimation();
slideOut.Target = "Offset.X";
slideOut.Duration = TimeSpan.FromMilliseconds(1000);
slideOut.InsertKeyFrame(0, offset1.X);
slideOut.InsertKeyFrame(1, offset1.X - 20F);
animationGroup1.Add(slideOut);
visual1.StartAnimationGroup(animationGroup1);
}
The animation Offset.X
is only displayed the second time the method was called
source to share
You will most likely run into an issue with the Composition and XAML position parameters that conflict with each other. http://blog.robmikh.com/uwp/xaml/composition/2016/07/16/changes-to-xaml-composition-interop.html
Your simplest solution is to wrap everything you animate inside Borders and apply any layout properties to those borders (like margins) and then your offset animations should now work on what you're animating (since the XAML layout engine should now be gone reasons to overwrite Composition Offset property in animation target with relative XAML position)
Alternatively, if you target the update to authors, you can animate the translation property of the composition. See: http://varunshandilya.com/offset-animation-gets-stomped-here-is-how-to-solve-it-in-uwp-creators-update/
source to share