Introducing the .NET MAUI Navigation Drawer Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the .NET MAUI Navigation Drawer Control

Introducing the .NET MAUI Navigation Drawer Control

We are excited to announce the latest addition to our Syncfusion .NET MAUI toolkit: the Navigation Drawer control in Essential Studio 2023 Volume 4.

The .NET MAUI Navigation Drawer is a control designed to facilitate the creation of a navigation pane in an application. Comprising a content area and a sliding pane, this control can be effortlessly opened either by swiping the edges of the screen or through programmatic invocation.

Let’s explore the features of the new .NET MAUI Navigation Drawer control and the steps to get started with it.

Key features

The .NET MAUI Navigation Drawer control provides support for the following key features:

Let’s take a closer look at these features.

Drawer position

The Navigation Drawer control offers a variety of options to tailor the location of your navigation drawer to suit your app’s layout. Whether positioned on the left, right, top, or bottom, the Navigation Drawer provides the flexibility to seamlessly adapt to your design preferences.

Left Navigation Drawer Position .NET MAUI
Left
Right Navigation Drawer Position
Right
Bottom Navigation Drawer Position
Bottom
Top Navigation Drawer Position
Top

Customizing Drawer Position in .NET MAUI Navigation Drawer

Animated transition

The Navigation Drawer smoothly glides into view, adding a layer of elegance to your app’s navigation. It allows you to set different animation types by using the Transition property.

  • Slide on top – The navigation pane overlays the main content area when opened.
  • Push – The navigation pane is hidden. When opened, it will push the main content area on the opposite side up to the width of the drawer.
  • Reveal – The navigation pane is hidden behind the main content. The main content moves away on the opposite side up to the width of the drawer to show the drawer content.

Refer to the following images.

Slide on top Navigation Transition
Slide on top
 
Pull Navigation Transition
Pull
  
Reveal Navigation Transition
Reveal

Custom Animated Transitions in .NET MAUI Navigation Drawer

Customizing animation duration

You can fine-tune the speed of your animated transitions with customizable animation durations. Adjusting these durations allows you to strike the perfect balance between responsiveness and aesthetics.

Customizing drawer size

You have the power to define the size of the sliding pane by using the following properties:

  • DrawerHeight – It allows you to adjust the height of the side pane when the Position is set to Top or Bottom.
  • DrawerWidth – It allows you to adjust the width of the side pane when the Position is set to Left or Right.

Set main content

You can set the main content of the Navigation Drawer by using the ContentView property, which is always visible.

Note: Setting the ContentView property for NavigationDrawer on initializing is mandatory.

Setting Main Content in .NET MAUI Navigation Drawer
Setting Main Content in .NET MAUI Navigation Drawer

Set side-pane content

The side-pane content is only viewable when the drawer is in the open state. The side pane contains the following sections:

  • Drawer content – You can set the drawer content by using the DrawerContentView It will be displayed between the header and footer content.
  • Header content – You can set the header content of the drawer by using the DrawerHeaderView property. It will be displayed at the top of the drawer.
  • Footer content – You can set the footer content of the drawer by using the DrawerFooterView property. It will be displayed at the bottom of the drawer.
Setting Side-pane Content in .NET MAUI Navigation Drawer
Setting Side-pane Content in .NET MAUI Navigation Drawer

Note: For more details, refer to the .NET MAUI Navigation Drawer documentation.

Getting started with .NET MAUI Navigation Drawer control

You have seen the top features of the .NET MAUI Navigation Drawer control. Now, let’s see how to add it to your app.

Step 1: Create a .NET MAUI app

First, create a .NET MAUI application.

Step 2: Add the required NuGet package

Syncfusion .NET MAUI controls are available on the NuGet Gallery. Open the NuGet package manager in Visual Studio. Search for Syncfusion.Maui.NavigationDrawer and then install it.

Step 3: Register the handler

Register the handler for the Syncfusion core in the MauiProgram.cs file.

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
using Syncfusion.Maui.Core.Hosting;
namespace NavigationDrawerSample
{
  public static class MauiProgram
  {
	public static MauiApp CreateMauiApp()
	{
	   var builder = MauiApp.CreateBuilder();
	   builder
	      .UseMauiApp<App>()
	      .ConfigureSyncfusionCore()
	      .ConfigureFonts(fonts =>
	      {
	         fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
	      });
	   return builder.Build();
        }
   }
}

Step 4: Add the namespace

Add the Syncfusion.Maui.NavigationDrawer namespace in your XAML page.

xmlns:navigationDrawer="clr-namespace:Syncfusion.Maui. NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer"

Step 5: Initialize the Syncfusion .NET MAUI Navigation Drawer control

Now, initialize the Syncfusion .NET MAUI Navigation Drawer control. Refer to the following code example.

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" />

Step 6: Set the main content and side-pane content

Refer to the following code example to set the main content and side pane content to the Navigation Drawer.

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
 <navigationdrawer:SfNavigationDrawer.DrawerSettings>
  <navigationdrawer:DrawerSettings DrawerWidth="250"
                                   DrawerHeaderHeight= “160”>
   <navigationdrawer:DrawerSettings.DrawerHeaderView>
    <Grid BackgroundColor="#1aa1d6" RowDefinitions="120,40">
     <Image Source= "user.png"
            HeightRequest= "110"
            Margin="0,10,0,0"
            BackgroundColor="#1aa1d6"
            VerticalOptions="Center"
            HorizontalOptions="Center"/>
     <Label Text="James Pollock"
            Grid.Row= "1"
            HorizontalTextAlignment= "Center"
            HorizontalOptions="Center"
            FontSize= "20"
            TextColor= "White"/>
    </Grid>
   </navigationdrawer:DrawerSettings.DrawerHeaderView>
   <navigationdrawer:DrawerSettings.DrawerContentView>
    <ListView x:Name="listView"
              ItemSelected="listView_ItemSelected">
     <ListView.ItemTemplate>
      <DataTemplate>
       <ViewCell>
        <VerticalStackLayout HeightRequest="40">
         <Label Margin="10,7,0,0"
                Text="{Binding}"
                FontSize= "16"/>
        </VerticalStackLayout>
       </ViewCell>
      </DataTemplate>
     </ListView.ItemTemplate>
    </ListView>
   </navigationdrawer:DrawerSettings.DrawerContentView>
  </navigationdrawer:DrawerSettings>
 </navigationdrawer:SfNavigationDrawer.DrawerSettings>
 <navigationdrawer:SfNavigationDrawer.ContentView>
  <Grid x:Name="mainContentView" BackgroundColor="White" RowDefinitions="Auto,*">
   <HorizontalStackLayout BackgroundColor="#1aa1d6" Spacing="10" Padding="5,0,0,0">
    <ImageButton x:Name="hamburgerButton"
                 HeightRequest= "50"
                 WidthRequest= "50"
                 HorizontalOptions="Start"
                 Source="hamburgericon.png"
                 BackgroundColor="#1aa1d6"
                 Clicked="hamburgerButton_Clicked"/>
    <Label x:Name="headerLabel" 
           HeightRequest= "50" 
           HorizontalTextAlignment= "Center" 
           VerticalTextAlignment= "Center" 
           Text="Home" FontSize="16" 
           TextColor= "White" 
           BackgroundColor="#1aa1d6"/>
   </HorizontalStackLayout>
   <Label Grid.Row= "1" 
          x:Name= "contentLabel" 
          VerticalOptions="Center" 
          HorizontalOptions="Center" 
          Text= "Content View" 
          FontSize= "14" 
          TextColor= "Black"/>
  </Grid>
 </navigationdrawer:SfNavigationDrawer.ContentView>
</navigationdrawer:SfNavigationDrawer>

After executing the previous code examples, you’ll get the output shown in the following image.

Integrating Navigation Drawer Control in .NET MAUI App
Integrating Navigation Drawer Control in .NET MAUI App

GitHub references

For more details, refer to the .NET MAUI Navigation Drawer control demo on GitHub.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new Syncfusion .NET MAUI Navigation Drawer control that rolled out in the 2023 Volume 4 release. You can learn more about the latest .NET MAUI advancements on our Release Notes and What’s New pages. Try them out and leave your feedback in the comments section below!

Download Essential Studio for .NET MAUI to start evaluating them immediately.

If you have any questions, contact us through our support forum, support portal, or feedback portal. We are always happy to help you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed