Home > Back-end >  How to set OnClick listener for Tab in TabBar?
How to set OnClick listener for Tab in TabBar?

Time:11-05

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!

CodePudding user response:

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>
  • Related