Popup Animations
3 Sep 20204 minutes to read
Built-in animations are available in SfPopupLayout, which is applied when the PopupView opens and closes in the screen.
SfPopupLayout has different animation modes as listed below.
NOTE
Setting of AnimationMode is same for both
Displaying pop-up when the SfPopupLayout is set as root view
andDisplaying pop-up when the SfPopupLayout is not set as root view
Zoom
Zoom-out animation will be applied when the PopupView opens and Zoom-in animation will be applied when the PopupView closes.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.Zoom;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
Fade
Fade-out animation will be applied when the PopupView opens and Fade-in animation will be applied when the PopupView closes
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.Fade;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
SlideOnLeft
PopupView will be animated from left-to-right, when it opens and from right-to-left when the PopupView closes.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.SlideOnLeft;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
SlideOnRight
PopupView will be animated from right-to-left, when it opens and from left-to-right when the PopupView closes.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.SlideOnRight;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
SlideOnTop
PopupView will be animated from top-to-bottom, when it opens and from bottom-to-top when the PopupView closes.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.SlideOnTop;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
SlideOnBottom
PopupView will be animated from bottom-to-top, when it opens and from top-to-bottom when the PopupView closes.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.SlideOnBottom;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.
None
Animation will not be applied.
//MyViewController.cs
public MyViewController()
{
....
popupLayout = new SfPopupLayout();
popupLayout.Content = GetContentOfPopup();
popupLayout.PopupView.AnimationMode = AnimationMode.None;
this.View.AddSubview(popupLayout);
....
}
Executing the above codes renders the following output in an iOS device.