Programmatically Toggling the Drawer in .NET MAUI Navigation Drawer

29 Jul 20263 minutes to read

You can toggle the drawer in the .NET MAUI Navigation Drawer in the following ways:

Prerequisites

Before using the SfNavigationDrawer, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.NavigationDrawer

For step-by-step setup, refer to the Getting Started documentation.

Opening the Drawer Programmatically

You can open the drawer using the IsOpen property of DrawerSettings or the ToggleDrawer method on Navigation Drawer.

Using the IsOpen property

IsOpen is a bool property that defaults to false. Setting it to true opens the drawer; setting it to false closes it.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings IsOpen="True">
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
</navigationDrawer:SfNavigationDrawer>
using Syncfusion.Maui.NavigationDrawer;

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer
{
    DrawerSettings = new DrawerSettings
    {
        IsOpen = true
    }
};

Using the ToggleDrawer method

ToggleDrawer is a method on Navigation Drawer to open or close the drawer based on the existing state.

<navigationDrawer:SfNavigationDrawer x:Name="navigationDrawer">
    <navigationDrawer:SfNavigationDrawer.DrawerSettings>
        <navigationDrawer:DrawerSettings>
            <navigationDrawer:DrawerSettings.DrawerContentView>
                <Label Text="Drawer Content"/>
            </navigationDrawer:DrawerSettings.DrawerContentView>
        </navigationDrawer:DrawerSettings>
    </navigationDrawer:SfNavigationDrawer.DrawerSettings>
    <Button Text="Toggle Drawer"
            Clicked="OnToggleDrawerClicked"
            VerticalOptions="Start"/>
</navigationDrawer:SfNavigationDrawer>
Button button = new Button()
{
    Text = "Toggle Drawer",
    VerticalOptions = LayoutOptions.Start
};
button.Clicked += OnToggleDrawerClicked;

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer()
{
    DrawerSettings = new DrawerSettings()
    {
        DrawerContentView = new Label
        {
            Text = "Drawer Content"
        }
    },
    ContentView = button,
};

The Button’s Clicked event can be handled in C# as follows:

private void OnToggleDrawerClicked(object sender, EventArgs e)
{
     navigationDrawer.ToggleDrawer();
}

Toggling drawer by swipe gesture

Toggling drawer by swipe gesture is explained in the Swipe Gesture and Sensitivity section.

See also