Animation Settings

The various animations that occur while scrolling, loading, and manipulating elements in a listbox can be configured through its AnimationSettings property.

Most animations can be configured through a pair of properties (see Table 1) that determine their duration and easing function. The default duration and easing function can be set through the DefaultDuration and DefaultEasingFunction properties, respectively. These values will be used when a duration or easing-function property does not have an explicit value.

tip

The values assigned to the DefaultDuration and DefaultEasingFunction properties will only be taken into consideration if a new ListBoxAnimationSettings instance is provided.

Table 1: Animation settings properties

Property	Description	Default Value
AddingItemDuration	The duration of the animation when an item is added.	null
DefaultDuration	The default duration to use for any "duration" property that does not have an explicit value.	750 milliseconds
DefaultEasingFunction	The default easing function to use for any "easing-function" property that does not have an explicit value.	PowerEase( Power=3, EasingMode=EaseOut )
ItemSizeChangingDuration	The duration of the animation when an item's size is changing.	null
LineScrollingDuration	The duration of the line-scrolling animation.	null
LineScrollingEasingFunction	The easing function used by the line-scrolling animation.	PowerEase( Power=3, EasingMode=EaseOut )
LoadingDuration	The duration of the item-loading animation.	null
PageScrollingDuration	The duration of the page-scrolling animation.	null
PageScrollingEasingFunction	The easing function used by the page-scrolling animation.	PowerEase( Power=3, EasingMode=EaseOut )
RemovingItemDuration	The duration of the animation when an item is removed.	null
ThumbScrollingDuration	The duration of the thumb-scrolling animation.	null
ThumbScrollingEasingFunction	The easing function used by the thumb-scrolling animation.	PowerEase( Power=3, EasingMode=EaseOut )
ViewChangingDuration	The duration of the view-change animation.	null

The following XAML snippets show how to disable and modify the behavior of various animations.

<!-- Disable all animations -->
<Grid x:Name="LayoutRoot">
   <Grid.Resources>
       <xclb:ListBoxAnimationSettings x:Key="disableAllAnimationSettings"
                                       DefaultDuration="00:00:00.0"
                                       DefaultEasingFunction="{x:Null}"/>
   </Grid.Resources>
   <xclb:ListBox x:Name="listBox"
                         ItemsSource="{Binding Path=Orders}"
                         AnimationSettings="{StaticResource disableAllAnimationSettings}"/>
</Grid>

<!-- Slow down all the animations -->
<Grid x:Name="LayoutRoot">
   <Grid.Resources>
      <xclb:ListBoxAnimationSettings x:Key="slowMotionAnimationSettings"
                                      AddingItemDuration="00:00:01.500"
                                      ItemSizeChangingDuration="00:00:01.500"
                                      LineScrollingDuration="00:00:01.500"
                                      LoadingDuration="00:00:01.500"                                     
                                      PageScrollingDuration="00:00:01.500"                                     
                                      RemovingItemDuration="00:00:01.500"                                     
                                      ThumbScrollingDuration="00:00:01.500"                                     
                                      ViewChangingDuration="00:00:01.500"/>
   </Grid.Resources>
   <xclb:ListBox x:Name="listBox"
                         ItemsSource="{Binding Path=Orders}"
                         AnimationSettings="{StaticResource slowMotionAnimationSettings}"/>
</Grid>