Sliding Panel Contents

28 Jun 2019 / 20 minutes to read

The sliding panel contents are divided into three parts and they are as follows

The header and footer contents are optional and Drawer content is the mandatory one which is due to the maximum space allocated for Drawer content view.

Drawer Main Content

The sliding main content of the SfNavigationDrawer which is a part of DrawerPanel can be set using DrawerContentView property with desired views.

namespace navigationDrawerSample
{
    [Activity(Label = "NavigationDrawerSample", MainLauncher = true, Icon = "@drawable/icon")]
    public class MainActivity : Activity
    {
        Button DrawerButton;
        ListView viewItem;
        TextView profileContentLabel;
        ArrayAdapter<string> arrayAdapter;
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

            SfNavigationDrawer navigationDrawer;
            navigationDrawer = new SfNavigationDrawer(this);

            List<string> positionlist = new List<string>();
            positionlist.Add("Home");
            positionlist.Add("Profile");
            positionlist.Add("Inbox");
            positionlist.Add("Outbox");
            positionlist.Add("Sent Items");
            positionlist.Add("Trash");
            arrayAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, positionlist);
            viewItem = new ListView(this);
            viewItem.Adapter = arrayAdapter;
            viewItem.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
            viewItem.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);

            LinearLayout HomeLayout = new LinearLayout(this);

            profileContentLabel = new TextView(this);
            profileContentLabel.TextSize = 20;
            profileContentLabel.Text = "Home";
            profileContentLabel.SetTextColor(Android.Graphics.Color.Black);
            profileContentLabel.SetBackgroundColor(Android.Graphics.Color.LightBlue);
            profileContentLabel.Gravity = GravityFlags.Center;
            profileContentLabel.LayoutParameters = new ViewGroup.LayoutParams(770, 100);

            HomeLayout.AddView(profileContentLabel);

            LinearLayout contentLayout = new LinearLayout(this);
            contentLayout.Orientation = Orientation.Vertical;

            LinearLayout buttonLayout = new LinearLayout(this);
            buttonLayout.SetBackgroundColor(Android.Graphics.Color.Gray);
            buttonLayout.SetGravity(GravityFlags.Center);

            buttonLayout.LayoutParameters = new LinearLayout.LayoutParams(1000, 1000);

            DrawerButton = new Button(this);
            DrawerButton.Text = "Drawer";
            DrawerButton.LayoutParameters = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WrapContent, ViewGroup.LayoutParams.WrapContent);
            DrawerButton.Gravity = GravityFlags.Center;

            buttonLayout.AddView(DrawerButton);
            DrawerButton.Click += (sender, e) =>
            {
                navigationDrawer.ToggleDrawer();
            };
            contentLayout.SetBackgroundColor(Android.Graphics.Color.SkyBlue);
            contentLayout.AddView(HomeLayout);
            contentLayout.AddView(buttonLayout);


            FrameLayout frameLayout = new FrameLayout(this);
            frameLayout.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
            frameLayout.AddView(viewItem);
            navigationDrawer.DrawerContentView = frameLayout;

            navigationDrawer.ContentView = contentLayout;

            SetContentView(navigationDrawer);
        }
    }
}

DrawerContentView

Drawer Header Content

Gets or sets the header of the DrawerView panel in the SfNavigationDrawer control using DrawerHeaderView property.

namespace navigationDrawerSample
{
	[Activity(Label = "navigationDrawerSample", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : Activity
	{
           SfNavigationDrawer navigationDrawer;
           protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            
            navigationDrawer = new SfNavigationDrawer(this);

            ImageView userImg = new ImageView(this);
            userImg.SetImageResource(Resource.Drawable.Icon);
            userImg.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
            TextView userName = new TextView(this);
            userName.Text = "James Pollock";
            userName.TextSize = 20;
            userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
            userName.SetTextColor(Android.Graphics.Color.White);
            LinearLayout headerLayout = new LinearLayout(this);
            headerLayout.Orientation = Orientation.Vertical;
            headerLayout.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
            headerLayout.SetPadding(0, 20, 0, 0);
            headerLayout.AddView(userImg);
            headerLayout.AddView(userName);
            navigationDrawer.DrawerHeaderView = headerLayout;
            SetContentView(navigationDrawer);
    }
}
}

DrawerHeaderView

Gets or sets the footer for the DrawerView panel in the SfNavigationDrawer control using DrawerFooterView property.

namespace navigationDrawerSample
{
	[Activity(Label = "navigationDrawerSample", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : Activity
	{
            SfNavigationDrawer navigationDrawer;
            protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            navigationDrawer = new SfNavigationDrawer(this);
            TextView userName = new TextView(this);
            userName.Text = "James Pollock";
            userName.Gravity = GravityFlags.Center;
            userName.TextSize = 20;
            userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
            userName.SetTextColor(Android.Graphics.Color.White);
            LinearLayout footerLayout = new LinearLayout(this);
            footerLayout.Orientation = Orientation.Vertical;
            footerLayout.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
            footerLayout.SetPadding(0, 20, 0, 0);
            footerLayout.AddView(userName);
            navigationDrawer.DrawerFooterView = footerLayout;
            SetContentView(navigationDrawer);
    }
}
}

DrawerFooterView

Drawer Size

Gets or sets the height and width of the DrawerView panel in the SfNavigationDrawer control using DrawerHeight and DrawerWidth properties.

navigationDrawer.DrawerHeight = (float)(300);
navigationDrawer.DrawerWidth = (float)(200);

Multiple drawers

The Navigation Drawer allows users to open the drawer on multiple sides with different toggle methods. The DrawerSettings class and its properties need to be used where users need to provide multiple drawers. The multiple drawers can be implemented using the following drawer settings:

  • Default drawer settings
  • Secondary drawer settings

NOTE

The header and footer content are optional, but the drawer content is mandatory to allocate space for the drawer.

Default drawer settings

Implement the default drawer using the default drawer settings class. The following code sample demonstrates how to set the properties of default drawer settings inside the DrawerSettings class.

DrawerSettings defaultDrawerSettings = new DrawerSettings();
defaultDrawerSettings.DrawerHeight = 150;
defaultDrawerSettings.Position = Position.Left;
defaultDrawerSettings.Transition = Transition.SlideOnTop;
defaultDrawerSettings.ContentBackgroundColor = Color.Red;
defaultDrawerSettings.DrawerWidth = 150;
navigationDrawer.DrawerHeaderHeight = 150;
navigationDrawer.DrawerFooterHeight = 150;
navigationDrawer.DefaultDrawerSettings = defaultDrawerSettings;

NOTE

The Navigation Drawer works with the value given for the properties inside the DrawerSettings class when using the default drawer settings.

Header view of the default drawer

The header content can be provided to the default drawer using the DrawerHeaderView property inside the DrawerSettings class of DefaultDrawerSettings. The following code sample demonstrates how to set header content to the default drawer.

DrawerSettings defaultDrawerSettings = new DrawerSettings();
TextView userName = new TextView(this);
userName.Text = "James Pollock";
userName.TextSize = 20;
userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
userName.SetTextColor(Android.Graphics.Color.White);
LinearLayout headerLayout = new LinearLayout(this);
headerLayout.Orientation = Orientation.Vertical;
headerLayout.SetPadding(0, 20, 0, 0);
headerLayout.AddView(userName);
defaultDrawerSettings.DrawerHeaderView = headerLayout;

Content view of the default drawer

The drawer content can be provided to the default drawer using the DrawerContentView property inside the DrawerSettings class. The following code sample demonstrates how to set drawer content to the default drawer.

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(this);
DrawerSettings defaultDrawerSettings = new DrawerSettings();
defaultDrawerSettings.DrawerHeight = 150;
defaultDrawerSettings.Position = Position.Left;
List<string> positionlist = new List<string>();
positionlist.Add("Home");
positionlist.Add("Profile");
positionlist.Add("Inbox");
positionlist.Add("Outbox");
arrayAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, positionlist);
viewItem = new ListView(this);
viewItem.Adapter = arrayAdapter;
viewItem.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
FrameLayout frameLayout = new FrameLayout(this);
frameLayout.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
frameLayout.AddView(viewItem);
defaultDrawerSettings.DrawerContentView = frameLayout;
navigationDrawer.DefaultDrawerSettings = defaultDrawerSettings;
SetContentView(navigationDrawer);

The footer content can be provided to the default drawer using the DrawerFooterView property inside the DrawerSettings class of DefaultDrawerSettings. The following code sample demonstrates how to set footer content to the default drawer.

DrawerSettings defaultDrawerSettings = new DrawerSettings();
TextView userName = new TextView(this);
userName.Text = "James Pollock";
userName.TextSize = 20;
userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
userName.SetTextColor(Android.Graphics.Color.White);
LinearLayout footerLayout = new LinearLayout(this);
footerLayout.Orientation = Orientation.Vertical;
footerLayout.SetPadding(0, 20, 0, 0);
footerLayout.AddView(userName);
defaultDrawerSettings.DrawerFooterView = footerLayout;

Secondary drawer settings

Implement the secondary drawer using the secondary drawer settings class. Its properties and functionalities are same as the default drawer. The secondary drawer can be set to different positions similar to the default drawer. The following code sample demonstrates how to set the properties of secondary drawer settings inside the DrawerSettings class.

DrawerSettings secondaryDrawerSettings = new DrawerSettings();
secondaryDrawerSettings.DrawerHeight = 150;
secondaryDrawerSettings.Position = Position.Left;
secondaryDrawerSettings.Transition = Transition.SlideOnTop;
secondaryDrawerSettings.ContentBackgroundColor = Color.Red;
secondaryDrawerSettings.DrawerWidth = 150;
navigationDrawer.DrawerHeaderHeight = 150;
navigationDrawer.DrawerFooterHeight = 150;
navigationDrawer.SecondaryDrawerSettings = secondaryDrawerSettings;

NOTE

When the default drawer and the secondary drawer are set to the same position, the default drawer will open on swiping.

Header view of the secondary drawer

The header content can be provided to the secondary drawer using the DrawerHeaderView property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set the header content to the secondary drawer.

DrawerSettings secondaryDrawerSettings = new DrawerSettings();
TextView userName = new TextView(this);
userName.Text = "James Pollock";
userName.TextSize = 20;
userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
userName.SetTextColor(Android.Graphics.Color.White);
LinearLayout headerLayout = new LinearLayout(this);
headerLayout.Orientation = Orientation.Vertical;
headerLayout.SetPadding(0, 20, 0, 0);
headerLayout.AddView(userName);
secondaryDrawerSettings.DrawerHeaderView = headerLayout;

Content view of the secondary drawer

The drawer content can be provided to the secondary drawer using the DrawerContentView property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set the drawer content to the secondary drawer.

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer(this);
DrawerSettings secondaryDrawerSettings = new DrawerSettings();
secondaryDrawerSettings.DrawerHeight = 150;
secondaryDrawerSettings.Position = Position.Left;
List<string> positionlist = new List<string>();
positionlist.Add("Home");
positionlist.Add("Profile");
positionlist.Add("Inbox");
positionlist.Add("Outbox");
arrayAdapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, positionlist);
viewItem = new ListView(this);
viewItem.Adapter = arrayAdapter;
viewItem.SetBackgroundColor(Android.Graphics.Color.ParseColor("#1aa1d6"));
FrameLayout frameLayout = new FrameLayout(this);
frameLayout.LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);
frameLayout.AddView(viewItem);
secondaryDrawerSettings.DrawerContentView = frameLayout;
navigationDrawer.SecondaryDrawerSettings = secondaryDrawerSettings;
SetContentView(navigationDrawer);

The footer content can be provided to the secondary drawer using the DrawerFooterView property inside the DrawerSettings class of SecondaryDrawerSettings. The following code sample demonstrates how to set footer content to the secondary drawer.

DrawerSettings secondaryDrawerSettings = new DrawerSettings();
TextView userName = new TextView(this);
userName.Text = "James Pollock";
userName.TextSize = 20;
userName.SetBackgroundColor(Android.Graphics.Color.Transparent);
userName.SetTextColor(Android.Graphics.Color.White);
LinearLayout footerLayout = new LinearLayout(this);
footerLayout.Orientation = Orientation.Vertical;
footerLayout.SetPadding(0, 20, 0, 0);
footerLayout.AddView(userName);
secondaryDrawerSettings.DrawerFooterView = footerLayout;

Toggling method

Users can toggle the secondary drawer using the ToggleSecondaryDrawer method.

  • c#
  • navigationDrawer.ToggleSecondaryDrawer();

    Opening the drawer programmatically

    The IsOpen property in the DrawerSettings of SecondaryDrawerSettings is used to open or close the drawer programmatically.

    NOTE

    Users can open only one drawer at a time.