Combine NavigationDrawer and TabView in same App.

[Brian Senecal]

I am fairly new to MAUI and just a few months into programming again after an almost 10-year absence. I am writing an app and I want to have a group of tabs at the bottom of the screen for the main functions of the app, a hamburger menu with less-used sections of the app, and a dropdown menu of some sort in the upper right to switch accounts. I am using a MVVM design but having issues getting this all to work together. Do you have a sample similar to this? I am doing all the design in XAML.

Any recommendations would be welcome.

[Brundha Velusamy]

Hi Brian Senecal

 

Greetings from Syncfusion support!!

 

We have reviewed your query and, based on your requirements, created a sample app using TabView and NavigationDrawer. In this sample, we have placed the TabView inside the NavigationDrawer's content view to meet your needs. Additionally, we have attached a sample and a demonstration video for your reference. Please review them and let us know your thoughts.

 

For more information, please refer to the help documentation link below:

 

TabView : Getting started with .NET MAUI Tab View (SfTabView) | Syncfusion

 

NavigationDrawer: Getting Started with .NET MAUI Navigation Drawer control | Syncfusion

 

If your requirements differ from the suggested solution, kindly provide detailed specifications to facilitate a more effective investigation and solution.

 

Regards,

Brundha V

Attachment: SampleApp_89e0539b.zip

[Brian Senecal]

I've tried to implement the things you displayed in the sample program. However, I cannot get the tab bar to show properly. I'm not sure what I am doing wrong. I've made so many changes that I don't know where I am in it anymore. I included a short video to give you an idea of what I want the tab bar to look like. Can you point me in the right direction? 

Attachment: BoardwalkBarter_6d179f67.zip

[Brundha Velusamy]

Hi Brian,

We have modified the sample based on your requirements. In the sample, we have set up a navigation drawer and a tab view to manage the content display in the main area of the app. Here’s a detailed explanation of the modifications and how they function:

XAML Structure:

Navigation Drawer (SfNavigationDrawer):

• Drawer Header View: Displays an avatar, and the user's name in the menu.
• Drawer Content View: Contains a ListView that displays menu items (MenuModels), such as Settings, About, and Help.
• Content View:
• Top content:
• This is the top part of the page, which contains the menu icon and the app banner. By clicking the menu icon, we can toggle the navigation drawer.
• Main Content Area:
• This is the central part of the page (MainGrid), which changes content based on the selected menu item or tab.
• Initially, it displays the content of the Albums view.
• Tab View (SfTabView):
• Placed at the bottom of the page, it allows switching between different sections, like Albums, Offers, Home, Analysis, and Tools.

Here’s the refined XAML structure:

<sf:SfNavigationDrawer x:Name="navDrawer">

      <sf:SfNavigationDrawer.DrawerSettings>

                <sf:DrawerSettings>

                    <sf:DrawerSettings.DrawerHeaderView/>

                    <sf:DrawerSettings.DrawerContentView>

                        <ScrollView>

                            <VerticalStackLayout Spacing="10" Padding="5,0">

 

                                <!--By using the ItemSelected event, we are assigning the respective content to the MainGrid for the selected item accordingly-->

 

                                <ListView ItemsSource="{Binding MenuModels}"

                                          x:Name="listView"

                                          ItemSelected="ListView_ItemSelected">

                                    <ListView.ItemTemplate>

                                        <DataTemplate>

                                            …

                                        </DataTemplate>

                                    </ListView.ItemTemplate>

                                </ListView>                               

                            </VerticalStackLayout>

                        </ScrollView>

                    </sf:DrawerSettings.DrawerContentView>

                </sf:DrawerSettings>

            </sf:SfNavigationDrawer.DrawerSettings>

 

            <sf:SfNavigationDrawer.ContentView>

 

                <Grid RowDefinitions="50,*,80">

                    <Grid Grid.Row="0" >

                        <!--menu icon along with app banner-->

                    </Grid>

 

                    <!-- This is the Gird which displays the main content for the application when we select the particular items from tab-view or navgation-drawer-->

                    <Grid Grid.Row="1" x:Name="MainGrid"/>

 

                    <!--By using the TabItemTapped event, we are assigning the respective content to the MainGrid for the selected item accordingly-->

                    <Grid Grid.Row="2">

                        <tab:SfTabView x:Name="tabView" TabBarHeight="80" TabBarPlacement="Bottom"

                                       TabItemTapped="tabView_TabItemTapped"

                                       TabBarBackground="#C0AD8C" Padding="0" IndicatorPlacement="Fill">

                            …

                        </tab:SfTabView>

                    </Grid>

                </Grid>

            </sf:SfNavigationDrawer.ContentView>

        </sf:SfNavigationDrawer>

Code behind:

Event Handlers:

• Drawer Toggle: The navigation drawer can be toggled open or closed by tapping the menu button.
• ListView Item Selection: Selecting an item from the ListView in the navigation drawer changes the main content to the corresponding view.
• Tab Item Tapped: Tapping a tab item updates the main content to the respective view.

Method:

• ResetMainContent: This method helps, reset the main content for each menu or tab item selection.

Here’s the refined XAML structure:

public partial class MainPage : ContentPage

{

    public MainPage()

    {

        InitializeComponent();

        MainGrid.Children.Add(new Albums().Content);

    }

…

    private void Handle_Clicked(object sender, TappedEventArgs e)

    {

        navDrawer.ToggleDrawer();

    }

 

    private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)

    {

        var selectedItem = e.SelectedItemIndex;

 

        ResetMainContent();

 

        if (selectedItem == 0)

        {

            MainGrid.Children.Add(new Settings().Content);

        }

        else if (selectedItem == 1)

        {

            MainGrid.Children.Add(new About().Content);

        }

        else if (selectedItem == 2)

        {

            MainGrid.Children.Add(new Help().Content);

        }

        navDrawer.IsOpen = false;

    }

 

 

    private void tabView_TabItemTapped(object sender, Syncfusion.Maui.TabView.TabItemTappedEventArgs e)

    {

        if(listView.SelectedItem == null)

        {

            ResetMainContent();

        }

 

        listView.SelectedItem = null;

 

        var tabItem = e.TabItem;

        if (tabItem != null)

        {

            if (tabItem.Header.Equals("Albums"))

            {

                MainGrid.Children.Add(new Albums().Content);

            }

            else if (tabItem.Header.Equals("Offers"))

            {

                MainGrid.Children.Add(new Offers().Content);

            }

            else if (tabItem.Header.Equals("Home"))

            {

                MainGrid.Children.Add(new Home().Content);

            }

            else if (tabItem.Header.Equals("Analysis"))

            {

                MainGrid.Children.Add(new Analysis().Content);

            }

            else if (tabItem.Header.Equals("Tools"))

            {

                MainGrid.Children.Add(new Tools().Content);

            }

        }

    }

 

    // It helps to reset the MainGrid content

    public void ResetMainContent()

    {

        MainGrid.Children.Clear();

    }

}

We have attached the modified sample and the demonstration video for your reference. Please review them and let us know your thoughts.

Regards,

Brundha V

Attachment: BoardwalkBarter_1ccf8adb.zip