Xamarin - 从按钮更改选项卡式页面

Question

I was currently working with Tabbed Page :

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:me="clr-namespace:Let_s_go_out.Views.Pages;assembly=Let_s_go_out"
             x:Class="Let_s_go_out.Views.MainPage"
             >
  <TabbedPage.Children >
    <me:PlacesList />

    <me:PlaceSearch />


  </TabbedPage.Children>
</TabbedPage>

And in the PlaceSearch content I have a button :

<StackLayout Grid.Row="9" Orientation="Horizontal" >
          <Button Text="Rechercher" HorizontalOptions="Center" VerticalOptions="Center" Command="{Binding Search}"></Button>         
        </StackLayout>

So my question is : How I can go on the "PlaceList" Tabbed page when the Button is clicked ?

Thanks :)

Answer 1

You can use MVVM and MessagingCenter for this as well.

View:

public partial class AwesomeView : TabbedPage
{
    public AwesomeView()
    {
        InitializeComponent();
        BindingContext = new AwesomeViewModel();
    }

    protected override void OnAppearing()
    {
        MessagingCenter.Subscribe<AwesomeViewModel, int>(this, "SetActiveTab", (sender, index) => {
            CurrentPage = Children[index];
        });
    }

    protected override void OnDisappearing()
    {
        MessagingCenter.Unsubscribe<AwesomeViewModel>(this, "SetActiveTab");
    }
}

ViewModel:

public class AwesomeViewModel
{
    public ICommand GoToTabCommand { get; set; }

    private AwesomeViewModel()
    {
        InitCommands();
    }

    private void InitCommands()
    {
        GoToTabCommand = new Command(GoToTab);
    }

    private void GoToTab()
    {
       MessagingCenter.Send<AwesomeViewModel, int>(this, "SetActiveTab", 1); //REPLACE 1 with the index of your tab
    }
}

You just have to bind GoToTabCommand command to a button or any control you want.

I recommend having a constant instead of "SetActiveTab".

Answer 2

Change the index according to your need

private void FAB_Clicked(object sender, EventArgs e)
{
    var tab = this.Parent.Parent as TabbedPage;
    tab.CurrentPage = tab.Children[2];            
}

Answer 3

I was currently working with Tabbed Page :

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:me="clr-namespace:Let_s_go_out.Views.Pages;assembly=Let_s_go_out"
             x:Class="Let_s_go_out.Views.MainPage"
             >
  <TabbedPage.Children >
    <me:PlacesList />

    <me:PlaceSearch />


  </TabbedPage.Children>
</TabbedPage>

And in the PlaceSearch content I have a button :

<StackLayout Grid.Row="9" Orientation="Horizontal" >
          <Button Text="Rechercher" HorizontalOptions="Center" VerticalOptions="Center" Command="{Binding Search}"></Button>         
        </StackLayout>

So my question is : How I can go on the "PlaceList" Tabbed page when the Button is clicked ?

Thanks :)

Answer 4

I don't know if it will help other people, but about the first answer, it worked for me after deleting one "Parent" when defining var tab, see below.

private void FAB_Clicked(object sender, EventArgs e)
{
    var tab = this.Parent as TabbedPage;
    tab.CurrentPage = tab.Children[2];            
}