Getting Started

This example will guide you through the steps needed to add a basic RadSideDrawer control in your application.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

Example

If your app is setup, you are ready to add a RadSideDrawer control.

You can proceed with defining the component:

<telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="200">
    <telerikPrimitives:RadSideDrawer.MainContent>
        <Label Text="Main content" />
    </telerikPrimitives:RadSideDrawer.MainContent>
    <telerikPrimitives:RadSideDrawer.DrawerContent>
        <StackLayout>
            <Button Text="Mail" />
            <Button Text="Calendar" />
            <Button Text="People" />
            <Button Text="Tasks" />
        </StackLayout>
    </telerikPrimitives:RadSideDrawer.DrawerContent>
</telerikPrimitives:RadSideDrawer>
var drawerContent = new StackLayout();
drawerContent.Children.Add(new Button { Text = "Mail" });
drawerContent.Children.Add(new Button { Text = "Calendar" });
drawerContent.Children.Add(new Button { Text = "People" });
drawerContent.Children.Add(new Button { Text = "Tasks" });

var sideDrawer = new RadSideDrawer
{
    MainContent = new Label { Text = "Main content" },
    DrawerContent = drawerContent,
    DrawerLength = 200
};

You also have to add the following namespace:

xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
using Telerik.XamarinForms.Primitives;

Finally, set the drawer as content of your page.

Here is the result:

SideDrawer example

See Also