Animation in UWP Navigation Pane (SfGroupBar)

10 May 20211 minute to read

While the collapsed content popup is opening, transition effects can be applied using the property PopupAnimation. The values of Enumeration ContentPopupAnimationTypes are

  • Fade
  • Scale
  • None

Fading Transition

The content popup looks like fading in ContentPopupAnimationTypes.Fade mode

<navigation:SfGroupBar PopupAnimation="Fade" VerticalAlignment="Stretch">

<navigation:SfGroupBar/>

Scaling Transition

The content popup looks like scaling along X-axis in ContentPopupAnimationTypes.Scale mode.

<navigation:SfGroupBar PopupAnimation="Scale" VerticalAlignment="Stretch">

<navigation:SfGroupBar/>

No Transition

No transition effects are applied in this ContentPopupAnimationTypes.None mode.

<navigation:SfGroupBar PopupAnimation="None" VerticalAlignment="Stretch">

<navigation:SfGroupBar/>

Changing Animation Speed

Animation speed can be adjusted using the property AnimationSpeed. It is necessary to choose an animation mode other than None.

<navigation:SfGroupBar PopupAnimation="Fade" AnimationSpeed="500" VerticalAlignment="Stretch">

<navigation:SfGroupBar/>