How to Add a Bottom-Placed .NET MAUI Tab Bar with Tab View?
The .NET Multi-platform App UI (MAUI) Tab View offers a simple and intuitive interface for tab navigation in mobile and desktop applications, where users can explore and switch between different tabs. The tab bar of the .NET MAUI Tab View can be positioned either at the top or bottom of the control using the TabBarPlacement property. This guide explains how to place the tab bar at the bottom in Syncfusion® .NET MAUI Tab View.
Step 1: Create a .NET MAUI application project in Visual Studio 2022.
Step 2: Add the Syncfusion.Maui.TabView NuGet package to the project from the NuGet Package Manager.
Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler.
Using C#:
using Syncfusion.Maui.Core.Hosting;
namespace TabBarCustomizationSample;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionCore();
return builder.Build();
}
}
Step 4: Add the .NET MAUI Tab View control namespace to the MainPage.xaml.
XAML
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TabBarCustomizationSample.MainPage"
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
BackgroundColor="{DynamicResource SecondaryColor}">
Step 5: Define the Tab View (SfTabView) in the XAML and set the TabBarPlacement property to “Bottom”. Below is an example where a ListView is populated as the content of each tab, and the tab bar is placed at the bottom.
XAML
<tabView:SfTabView x:Name="TabView" TabBarPlacement=”Bottom” IndicatorPlacement=”Top”>
<tabView:SfTabItem Header="CALLS">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="contact_image"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
<tabView:SfTabItem Header="MESSAGES">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout>
<Image Source="contact_image"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
<tabView:SfTabItem Header="CONTACTS">
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<HorizontalStackLayout >
<Image Source="contact_image"/>
<Label Margin="10,0,0,0" TextColor="Black" Text="{Binding .}"/>
</HorizontalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</tabView:SfTabItem>
</tabView:SfTabView>
Output:
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to add a bottom-placed .NET MAUI Tab Bar with Tab View.
You can refer to our .NET MAUI Tab View feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Tab View documentation to understand how to present and manipulate data. You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Tab View and other .NET MAUI components. Please let us know in the comments if you've any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
