Animation in WPF Tab Navigation

23 Oct 2019 / 1 minute to read

Transition Effect property is used to set the animation effect for the tab navigation control. The Transition effect is an enum that contains five values namely:

  • Slide – The item/page navigates with slide effect.
<syncfusion:TabNavigationControl TransitionEffect="Slide" ItemsSource="{Binding MyCollection}">
</syncfusion:TabNavigationControl>
  • Fade – During navigation, the previous item fades out and the new item appears with variation in opacity.
<syncfusion:TabNavigationControl TransitionEffect="Fade" ItemsSource="{Binding MyCollection}">
</syncfusion:TabNavigationControl>
  • Zoom – The new item appears with a zooming effect.
<syncfusion:TabNavigationControl TransitionEffect="Zoom" ItemsSource="{Binding MyCollection}">
</syncfusion:TabNavigationControl>
  • Blur – The new item appears with blur effect.
 <syncfusion:TabNavigationControl TransitionEffect="Blur"  ItemsSource="{Binding MyCollection}">
 </syncfusion:TabNavigationControl>
  • Push – The new item descends from the top
<syncfusion:TabNavigationControl TransitionEffect="Push" ItemsSource="{Binding MyCollection}">
</syncfusion:TabNavigationControl>
  • PushIn – The new item ascends from the bottom
<syncfusion:TabNavigationControl TransitionEffect="PushIn" ItemsSource="{Binding MyCollection}">
</syncfusion:TabNavigationControl>
  • Wipe – The old item gets washed out and the new item appears.
 <syncfusion:TabNavigationControl TransitionEffect="Wipe" ItemsSource="{Binding MyCollection}">
 </syncfusion:TabNavigationControl>