Search code examples
c#.netxamlmaui

How to set OnClick listener for Tab in TabBar?


In advance, sorry for my English (I'm from Russian, but on ru.stack I didn't receive an answer for my question) So, I have an idea: I have 2 TabBars in one Shell and I need realize switch TabBar by click on Tab from first TabBar. I think that I need something like OnClickListener, but I don't know how to create or override him.

I tried to use transit-ContentPage:

Tab-start from first TabBar:

<ShellContent
                x:Name="tabMain"
                Title="На главную"
                Icon="Images/ChatsPage/main_page.svg"
                ContentTemplate="{DataTemplate help:toHomeShell}"/>

toHomeShell.xaml.cs:

public toHomeShell()
    {
        Content = new VerticalStackLayout
        {
            Children = 
            {
                new Image 
                {
                    Source="Images/ChatsPage/background.svg",
                    Aspect=Aspect.AspectFill,
                    ZIndex=0,
                    HeightRequest =10000
                }
            }
        };
        Shell.Current.GoToAsync("//session");

but this working so long and I think, it isn't good code. Please help me :) Thank u so much!


Solution

  • You can add PropertyChanged event to your Tabbar. Like this:

    private void listenerChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        var listener = sender as TabBar;
        if (listener.CurrentItem.Title=="One")
        {
        }
        else if (listener.CurrentItem.Title == "Two") { }
    }
    

    For shell.xaml:

    <TabBar PropertyChanged="listenerChanged">
         <Tab Title="One" Icon="{StaticResource IconOne}">
             <ShellContent
                 Title="One"
                 ContentTemplate="{DataTemplate local:MainPage}"
                 Route="OnePage" />
         </Tab>
         <Tab Title="Two" Icon="{StaticResource IconTwo}">
             <ShellContent
                 Title="Two"
                 ContentTemplate="{DataTemplate local:MainPage}"
                 Route="TwoPage" />
         </Tab>