StartExpressionAnimation methods provide a way to easily start a composition expression animation to sync a
ScrollViewer instance with another control. This binds the manipulation status on a
ScrollViewer property set with either the translation or the offset of another visual element, to follow or mirror the motion in the source
<Grid> <!--This is a ListView we can use to display a series of items. It will contain the ScrollViewer that will be targeted by the expression animation.--> <ListView Name="listView"> <ListView.ItemTemplate> <DataTemplate> <Image Width="100" Height="100" Source="ms-appx:///Assets/ToolkitLogo.png" /> </DataTemplate> </ListView.ItemTemplate> </ListView> <!--This is the panel that will be animated in sync with the main ScrollViewer control inside the ListView in the page, using the ScrollViewerExtensions leveraging composition ExpressionAnimations. Note how the panel is not inside the ListView, but it's just rendering "fixed" items right on top of the ListView. We can use the expression animation to "bind" the scrolling of the ListView and keep the panel "in sync" with it.--> <StackPanel x:Name="shapesPanel"> <Polygon Height="100" Width="100" Points="0,0 0,72 44,36" Stroke="DarkGreen" Fill="Green" VerticalAlignment="Center" HorizontalAlignment="Center"/> </StackPanel> </Grid>
using Microsoft.Toolkit.Uwp.UI.Animations; ScrollViewer scrollViewer = listView.FindDescendant<ScrollViewer>(); // Binds the Y scroll axis of the ScrollViewer to the Y translation axis of the target listScrollViewer.StartExpressionAnimation(shapesPanel, Axis.Y); // It is also possible to synchronize different axes, as well as targeting // different Visual properties. By default, the expression works with the // Visual.Translate property, but Visual.Offset can be used as well. listScrollViewer.StartExpressionAnimation(shapesPanel, Axis.X, Axis.Y, VisualProperty.Offset);
You can find more examples in the unit tests.