How can I hide a tab of a Shell TabBar conditionally? - maui

Question

I have a .Net MAUI app. In AppShell, it has a TabBar:
<TabBar>
<Tab Title="Home" Icon="{StaticResource IconHome}">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</Tab>
<Tab Title="Estimator" Icon="{StaticResource IconCalculator}" >
<ShellContent ContentTemplate="{DataTemplate calculator:CoverageCalculatorPage}" />
</Tab>
<Tab Title="Distributors" Icon="{StaticResource IconLocator}">
<ShellContent ContentTemplate="{DataTemplate locator:DistributorsLocatorPage}" />
</Tab>
<Tab Title="Scan QR" Icon="{StaticResource IconQrScanner}">
<ShellContent ContentTemplate="{DataTemplate qrScanner:QrScannerPage}" />
</Tab>
<Tab Title="More" Icon="{StaticResource IconMore}">
<ShellContent ContentTemplate="{DataTemplate more:MoreFeaturesPage}" />
</Tab>
</TabBar>
I need to hide the "Scan QR" tab when run on Windows, and show only on iOS or Android. I realize that there is IsVisible property of Tab, but how can I make it conditional, based on the platform?

Answer 1

You can use class DeviceInfo.Platform to get the platform information. And add a bool variable to bind to property IsVisible of Tab.
Please refer to the following code:
public partial class AppShell : Shell
{
      public bool IsVisible {get;set;}
      public AppShell()
      {
            InitializeComponent();
            if (Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.iOS || Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.Android)
            {
                  IsVisible = true;
            }
            else
            {
                  IsVisible = false;
            }
            
            BindingContext = this;
}
}
And bind variable IsVisible to property IsVisible:
<Tab Title="Scan QR" Icon="grass.png" IsVisible="{Binding IsVisible}">
<ShellContent ContentTemplate="{DataTemplate local:QrScannerPage}" />
</Tab>