How can I Enable/Disable a tab in AppShell via binding ? It does not work for me, I am doing something wrong - tabs

Question

Please send me in the right direction here - I'm really confused.
See, I have this App.Shell:
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="ExpensesMobile.AppShell"
x:DataType="Login_VM:Login_VM"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:Approvals="clr-namespace:ExpensesMobile.View.Approvals"
xmlns:Settings="clr-namespace:ExpensesMobile.View.AppSettings"
xmlns:Login_VM="clr-namespace:ExpensesMobile.ViewModel.Login"
xmlns:Login="clr-namespace:ExpensesMobile.View.Login"
xmlns:Globals="clr-namespace:ExpensesMobile"
xmlns:ExpenseReports="clr-namespace:ExpensesMobile.View.ExpenseReports"
xmlns:res="clr-namespace:ExpensesMobile.Resources.Strings"
Title="{x:Static res:AppRes.ExpenseReports}"
Shell.FlyoutBehavior="Disabled">
<Shell.Items>
<ShellContent x:Name="Login" ContentTemplate="{DataTemplate Login:Login}" Route="Login" Shell.FlyoutBehavior="Disabled" Shell.NavBarIsVisible="False" ></ShellContent>
</Shell.Items>
<TabBar Route="Login">
<ShellContent ContentTemplate="{DataTemplate Login:Login}" Shell.FlyoutBehavior="Disabled" Shell.NavBarIsVisible="False" ></ShellContent>
</TabBar>
<TabBar x:Name="MyTabBar" Shell.NavBarHasShadow="true" Route="Home">
<Tab
x:Name="tabExpenseReports"
Title="{x:Static res:AppRes.ExpenseReports}"
Icon="ExpenseReports"
Shell.BackgroundColor="#001933"
Shell.ForegroundColor="#AB1300">
<ShellContent
x:Name="Pending"
ContentTemplate="{DataTemplate ExpenseReports:Pending}"
Route="Pending"
Title="{x:Static res:AppRes.Pending}"
Icon="pending.svg"
Shell.NavBarIsVisible="False">
</ShellContent>
<ShellContent
x:Name="Finalized"
ContentTemplate="{DataTemplate ExpenseReports:Finalized}"
Route="Finalized"
Title="{x:Static res:AppRes.Finalized}"
Icon="finalized.svg"
Shell.NavBarIsVisible="False">
</ShellContent>
</Tab>
<Tab
x:Name="tabApprovals"
Title="{x:Static res:AppRes.Approvals}"
Icon="approvals"
IsEnabled="{Binding TabApprovalsIsEnabled}"
Shell.BackgroundColor="#AB1300"
Shell.ForegroundColor="#001933">
<ShellContent
x:Name="Approvals"
ContentTemplate="{DataTemplate Approvals:Approvals}"
Shell.NavBarIsVisible="False"
Route="Approvals"
Title="{x:Static res:AppRes.Approvals}"
Icon="approvals.svg">
</ShellContent>
<ShellContent
x:Name="Approved"
ContentTemplate="{DataTemplate ExpenseReports:Approved}"
Shell.NavBarIsVisible="False"
Route="Approved"
Title="{x:Static res:AppRes.Approved}"
Icon="approved.svg">
</ShellContent>
</Tab>
<Tab
Title="{x:Static res:AppRes.Settings}"
Icon="settings" Shell.BackgroundColor="#193300"
x:Name="tabSettings">
<ShellContent
ContentTemplate="{DataTemplate Settings:Settings}"
Route="Settings" />
</Tab>
</TabBar>
</Shell>
In the Login page I decide whether the logged-in user is an admin or not. If he isn't, then he shouldn't have access to the tab "Approvals".
I have tried in several ways to make the tab disabled in this case. This is what I have right now:
In the class "Globals" I have this (I have them in the Globals class because I will need to refer to these values across the application):
using ExpensesMobile.Model;
namespace ExpensesMobile
{
public static class Globals
{
public static ExpensesMobileDB ExpensesMobileDB;
public static LoginStatus loginStatus;
public enum LoginStatus
{
loginRefused,
loginAcceptedAdmin,
loginAcceptedRegularUser
}
}
}
In Login_VM I have this code:
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using ExpensesMobile.Resources.Strings;
using ExpensesMobile.Services;
using ExpensesMobile.Utils;
using ExpensesMobile.View.ExpenseReports;
using System.Diagnostics;
using static ExpensesMobile.Globals;
namespace ExpensesMobile.ViewModel.Login
{
[QueryProperty(nameof(Login), "Login")]
public partial class Login_VM : Base_VM
{
public readonly LoginService loginService;
private readonly IConnectivity connectivity;
[ObservableProperty]
private string password;
[ObservableProperty]
private bool tabApprovalsIsEnabled = false;
[ObservableProperty]
private string username;
public Login_VM(LoginService loginService, IConnectivity connectivity)
{
this.loginService = loginService;
this.connectivity = connectivity;
//TEMP CODE - DEBUG
username = ".....";
password = ".....";
}
private static async Task ShowToast(LoginStatus loginStatus)
{
string text;
if (loginStatus == LoginStatus.loginAcceptedAdmin)
text = AppRes.LoginConfirmationManager;
else
text = AppRes.LoginConfirmationUser;
await Utils.Utils.ShowToast(text);
}
[RelayCommand]
private async Task LoginAsync()
{
if (IsBusy)
{
return;
}
try
{
if (connectivity.NetworkAccess != NetworkAccess.Internet)
{
await Shell.Current.DisplayAlert(AppRes.MsgConnectivity1, AppRes.MsgConnectivity2, "OK"); //No connectivity, Please check your internet connection and then try again;
return;
}
IsBusy = true;
LoginStatus loginStatus = LoginService.Login(username, password);
if (loginStatus == LoginStatus.loginAcceptedAdmin)
{
TabApprovalsIsEnabled = true;
await ShowToast(loginStatus);
await Shell.Current.GoToAsync($"//{nameof(Pending)}");
}
else if (LoginService.Login(username, password) == LoginStatus.loginAcceptedRegularUser)
{
TabApprovalsIsEnabled = false;
await ShowToast(loginStatus);
await Shell.Current.GoToAsync($"//{nameof(Pending)}");
}
else if (LoginService.Login(username, password) == LoginStatus.loginRefused)
{
await Shell.Current.DisplayAlert(AppRes.Login, AppRes.LoginWrongUsernameOrPass, "OK"); //Wrong username and/or password !
}
Globals.loginStatus = loginStatus;
}
catch (Exception ex)
{
Debug.WriteLine($"Unable to login: {ex.Message}");
ErrorHandling.HandleError(ex);
}
finally
{
IsBusy = false;
}
}
}
}
If I login as a regular user, the line 'tabApprovalsIsEnabled = false;' executes.
I have added this line because I wanted App.Shell to bind to Login_VM and not to Globals directly (that is a regular class, and has no knowledge of ObservableProperties).
However, although the tab Approvals has the xaml 'IsEnabled="{Binding TabApprovalsIsEnabled}"', this is not taken into consideration and my tab remains enabled.
Obviously I am missing something, and probably I am ignorant enough of the sequence of operations in MAUI - probably the code above executes and sets the property "tabApprovalsIsEnabled" to false AFTER the binding in AppShell has been done, I don't know....
How could I solve this problem, please ?
Thank you very much,
Alex.

Answer 1

You should reset the value of property TabApprovalsIsEnabled not tabApprovalsIsEnabled .
Please refer to the following code:
[RelayCommand]
private async Task LoginAsync()
{
// other code
try
{
// other code
LoginStatus loginStatus = LoginService.Login(username, password);
if (loginStatus == LoginStatus.loginAcceptedAdmin)
{
// replace `tabApprovalsIsEnabled` with `TabApprovalsIsEnabled`
//tabApprovalsIsEnabled = true;
TabApprovalsIsEnabled = true;
//........
}
else if (LoginService.Login(username, password) == LoginStatus.loginAcceptedRegularUser)
{
// replace `tabApprovalsIsEnabled` with `TabApprovalsIsEnabled`
// tabApprovalsIsEnabled = false;
TabApprovalsIsEnabled = true;
}
else if (LoginService.Login(username, password) == LoginStatus.loginRefused)
{
//Wrong username and/or password !
await Shell.Current.DisplayAlert(AppRes.Login, AppRes.LoginWrongUsernameOrPass, "OK");
}
Globals.loginStatus = loginStatus;
}
catch (Exception ex)
{
Debug.WriteLine($"Unable to login: {ex.Message}");
ErrorHandling.HandleError(ex);
}
finally
{
IsBusy = false;
}
}
Note:
We need set BindingContext for AppShell.xaml.cs. Then if we change the value of property TabApprovalsIsEnabled of the current ViewModel, the UI could refresh automatically.
public partial class AppShell : Shell
{
Login_VM _VM;
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute("DetailPage", typeof(DetailPage));
_VM = new Login_VM();
this.BindingContext = _VM;
}
[Obsolete]
protected override void OnAppearing()
{
base.OnAppearing();
Device.StartTimer(TimeSpan.FromSeconds(5), () =>
{
_VM.TabApprovalsIsEnabled = false;
return false;
});
}
}