Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require.
Customization
This post will offer you a way for customize the TabBar of the Shell on iOS and Android platforms by adding a centered button.
To achieve to do it like above, first of all, open Visual Studio 2019 and create a “Shell Forms App”
Add the Nuget Package
Click right on the solution and select “Manage Nuget Packages”. In the search box enter “ExtendedShellTabBar” and add it to the whole project in the solution.
The Centered Icon
If like me you have a licence of “MFractor”, add an icon in your project like below. If not, add your icon manually in drawables ressources for Android and XCAssets for iOS.
The XAML Shell
Update your “AppShell.xaml” file like below :
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ExtendedShellTabBarSample.Views"
xmlns:tabbar="clr-namespace:ExtendedShellTabBar.VisualElements;assembly=ExtendedShellTabBar"
Title="ExtendedShellTabBarSample"
x:Class="ExtendedShellTabBarSample.AppShell">
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<tabbar:ExtendedShellTabBar>
<tabbar:ExtendedShellTabBar.CenteredTab>
<tabbar:ExtendedShellCenteredTab
Command="{Binding ClickCommand}"
BorderColor="White"
BorderThickness="2"
CornerRadius="30"
Icon="centeredadd.png"
Width="60"
Height="60" />
</tabbar:ExtendedShellTabBar.CenteredTab>
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
<ShellContent Title="Browse" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</tabbar:ExtendedShellTabBar>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<!--<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>-->
</Shell>
The View Model
Add a AppShellViewModel.cs file to handle the “ClickCommand” :
public class AppShellViewModel
{
public ICommand ClickCommand { get; set; }
public AppShellViewModel()
{
ClickCommand = new Command(async () =>
{
await Application.Current.MainPage.DisplayAlert("Click !", "You click the centered button inside the TabBar", "OK");
});
}
}
And don’t forget to declare the ViewModel in the code behind , the file “AppShell.xaml.cs” :
public partial class AppShell : Xamarin.Forms.Shell
{
public AppShell()
{
InitializeComponent();
this.BindingContext = new AppShellViewModel();
Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
}
}