New to Telerik UI for Xamarin? Download free 30-day trial

TKSideDrawer for Xamarin.iOS: Transitions

TKSideDrawer transitions let you use different animation effects for showing/dismissing. You can also easily create your custom animation by subclassing the base class TKSideDrawerTransition.

Transition Types

Transition Type Figures
Push
Reveal
ReverseSlideOut
SlideAlong
SlideInOnTop
ScaleUp
FadeIn
ScaleDownPusher

The default transition is SlideInOnTop. In order to change the transition type, you should set the TransitionType property of TKSideDrawer:

sideDrawer.TransitionType = TKSideDrawerTransitionType.Reveal;

Transition Duration

You can configure the speed of the transition setting the TransitionDuration property of TKSideDrawer

sideDrawer.TransitionDuration = 0.5f;

SideDrawer Transitions example can be found in our Native Xamarin.iOS examples.

Using Custom Transitions

You can create a custom transition by sublcassing TKSideDrawerTransition and overriding its methods. After you create your transtion you should tell the side drawer to use this transition by setting its TransitionManager property.

MyTransition transition = new MyTransition (sideDrawer);
sideDrawer.TransitionManager = transition;

Here is the MyTransition implementation:

public class MyTransition : TKSideDrawerTransition
{
    private CGPoint sideDrawerIdentityCenter;
    private CGPoint hostviewIdentityCenter;

    public MyTransition(TKSideDrawer sideDrawer) : base(sideDrawer)
    {
    }

    public override void Show ()
    {
        if (!this.SideDrawer.IsVisible) {
            this.SideDrawer.Frame = new CGRect (0, -this.SideDrawer.Superview.Bounds.Size.Height, this.SideDrawer.Width, this.SideDrawer.Superview.Bounds.Size.Height);
            sideDrawerIdentityCenter = this.SideDrawer.Center;
            hostviewIdentityCenter = this.SideDrawer.Hostview.Center;
        }

        this.TransitionBegan (true);
        UIView.Animate (this.SideDrawer.TransitionDuration, delegate {
            this.SideDrawer.Center = new CGPoint(sideDrawerIdentityCenter.X, sideDrawerIdentityCenter.Y + this.SideDrawer.Bounds.Size.Height);
            this.SideDrawer.Hostview.Center = new CGPoint(hostviewIdentityCenter.X + this.SideDrawer.Width, hostviewIdentityCenter.Y);
        }, delegate {
            this.TransitionEnded(true);
        });
    }

    public override void Dismiss ()
    {
        this.TransitionBegan (false);
        UIView.Animate (this.SideDrawer.TransitionDuration, delegate {
            this.SideDrawer.Center = new CGPoint(this.SideDrawer.Width / 2.0, -this.SideDrawer.Frame.Size.Height / 2.0);
            this.SideDrawer.Hostview.Center = new CGPoint(this.SideDrawer.Hostview.Superview.Bounds.Width / 2.0,
                this.SideDrawer.Hostview.Superview.Bounds.Height / 2.0);
        }, delegate {
            this.TransitionEnded(false);
        });
    }

    public override void TransitionBegan (bool showing)
    {
        if (showing) {
            this.SideDrawer.Hidden = false;
            this.SideDrawer.Superview.BringSubviewToFront (this.SideDrawer.Hostview);
            this.SideDrawer.Hostview.UserInteractionEnabled = false;
        }
    }

    public override void TransitionEnded (bool showing)
    {
        if (!showing) {
            this.SideDrawer.Hidden = true;
            this.SideDrawer.Hostview.UserInteractionEnabled = true;
        }
    }
}

SideDrawer Custom Transition example can be found in our Native Xamarin.iOS examples.

In this article