Offset Animation gets stomped. Here is how to solve it in UWP Creators Update

In Windows Anniversary update Windows Composition and XAML introduced new features of implicit animations and to support that made some policy/behavior changes on how visuals are shared among platform and the framework. Essentially both platform and framework started sharing properties on same interop visual which made it super easy for developers to animate layout and property changes using implicit animation but had a side effect i.e. if you (developer) were animating offset of a interop visual using implicit or explicit animation and framework decided to run layout your animation got stomped or cancelled as composition animations have the policy of last one wins. This abnormal behavior led you to workaround it to get to your desired behavior. You can look at Robert’s post to understand how to workaround this in Anniversary update.

In Creators update release Windows UI platform decided to address this problem with addition of a new property named Translation.¬†As part of ElementCompositionPreview API visual layer added a new method called EnableTranslation(UIElement element, bool flag). Translation is a property that is added to the backing Visual’s property set for the UIElement, true flag adds the property to the property set.

Translation is different than Offset and both serve different purpose. Offset property is used by framework and layout system to manage apps layout. Translation once enabled is fully in app’s control and is not clobbered by layout or any changes to Offset. Composition does the heavy work of making sure that both offset and translation values are set properly to give the right UI experience.

Here is sample code on how to enable translation and animate:

ElementCompositionPreview.EnableTranslation(myelement, true);

var animation = _compositor.CreateVector3KeyFrameAnimation();
animation.Duration = TimeSpan.FromMilliSeconds(3);
animation.Target = "Translation"; 
animation.InsertKeyFrame(1f, Vector3(20f,20f,0f);


The above sample will animate myElement to Vector3(20f, 20f, 0f) even if there are layout changes. You can also use translation as part of Implicit Animations as well.

Hope this helps with your scenarios.

Thanks for your feedback!