Animation in WPF Tab Navigation

31 Oct 20222 minutes 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>