How can i Change tab item Content on Xamarin forms shell

Question

I need to change one of my tabs' content depending on the condition of the user logged in or just a guest
this is my shell

<?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:pages="clr-namespace:E_commerce_App.Views.Pages"
xmlns:views="clr-namespace:E_commerce_App.Views" x:DataType="views:TabContainer"
x:Class="E_commerce_App.Views.TabContainer"
TabBarBackgroundColor="#F7F7F7" BackgroundColor="red"
TabBarTitleColor="red" TabBarUnselectedColor="Black"
>

<TabBar>
    <Tab Title="Categories" Icon="menu.png">
        <ShellContent>
            <pages:Categories />
        </ShellContent>
    </Tab>
    <Tab Title="Cart" Icon="cart.png">
        <ShellContent >
            <pages:Cart />
        </ShellContent>
    </Tab>
    <Tab Title="Profile" Icon="user.png">
        <ShellContent
            ContentTemplate="{DataTemplate pages:Profile}" />
    </Tab>



</TabBar>

</Shell>

Answer 1

Hello,
Welcome to Microsoft Q&A!

I need to change one of my tabs' content depending on the condition of the user logged in or just a guest

Sure, you could make IMarkupExtension for ShellContent, and give current IMarkupExtension a bool property, when it is guest model return guest page.

public class OnGuest : BindableObject, IMarkupExtension<ContentPage>  
{  
    public readonly static BindableProperty IsGuestProperty = BindableProperty.Create(nameof(IsGuest), typeof(bool), typeof(OnGuest), null);  
    public bool IsGuest  
    {  
        get { return (bool)GetValue(IsGuestProperty); }  
        set { SetValue(IsGuestProperty, value); }  
    }  
  
  
    object IMarkupExtension.ProvideValue(IServiceProvider serviceProvider)  
    {  
        return (this as IMarkupExtension<Binding>).ProvideValue(serviceProvider);  
    }  
  
  
    public ContentPage ProvideValue(IServiceProvider serviceProvider)  
    {  
        if (IsGuest)  
        {  
            return new GuestPage();  
        }  
        else  
        {  
            return new UserPage();  
        }           
    }  
}  

Xaml Code

<Tab Title="About" Icon="icon_about.png">  
    <ShellContent>  
        <local:OnGuest IsGuest="True"/>  
    </ShellContent>  
</Tab>  

For more info please refer to Creating XAML Markup Extensions.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.