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.
The .NET MAUI Navigation Drawer control provides support for the following key features:
Let’s take a closer look at these features.
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.
| | |
| | |
Customizing Drawer Position in .NET MAUI Navigation Drawer
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.
Refer to the following images.
| | | |
Custom Animated Transitions in .NET MAUI Navigation Drawer
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.
You have the power to define the size of the sliding pane by using the following properties:
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.
The side-pane content is only viewable when the drawer is in the open state. The side pane contains the following sections:
Note: For more details, refer to the .NET MAUI Navigation Drawer documentation.
You have seen the top features of the .NET MAUI Navigation Drawer control. Now, let’s see how to add it to your app.
First, create a .NET MAUI application.
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.
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();
}
}
} Add the Syncfusion.Maui.NavigationDrawer namespace in your XAML page.
xmlns:navigationDrawer="clr-namespace:Syncfusion.Maui. NavigationDrawer;assembly=Syncfusion.Maui.NavigationDrawer"
Now, initialize the Syncfusion .NET MAUI Navigation Drawer control. Refer to the following code example.
<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer" />
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.
For more details, refer to the .NET MAUI Navigation Drawer control demo on GitHub.
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!