Animation in UWP Navigation Pane (SfGroupBar)

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/>