0

I want to change the tab icon and page after selected, I have 2 pages but I want to change with 1 tab and change the icon and page after selected, how can I do that?

        public MainPage()
    {
        InitializeComponent();

        var login = new NavigationPage(new login())
        {
            Title = "login",
            Icon = "login.png"
        };
        var register = new NavigationPage(new register())
        {
            Title = "register",
            Icon = "register.png"
        };

        if(CurrentPage is register)
        {
            Children.Add(login);
        }
        else
        {
            Children.Add(register);
        }


        this.CurrentPageChanged += (object sender, EventArgs e) =>
        {

            var i = this.Children.IndexOf(this.CurrentPage);

            if (i == 0)
            {
                login.Title = "login";
                login.Icon = "login.png";
            }
            else
            {
                register.Title = "register";
                register.Icon = "register.png";
            }
        };

enter image description here

Cena
  • 3,316
  • 2
  • 17
  • 34

1 Answers1

-1

You can create two layout and use button to switch between the two layouts:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        Content = firstlayout();
    }

    public StackLayout firstlayout() {

        StackLayout stacklayout = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Primary colors" },
                new BoxView { Color = Color.Red },
                new BoxView { Color = Color.Yellow },
                new BoxView { Color = Color.Blue },
            }
        };

        Button button = new Button
        {
            Text = "Click to change content2",
            VerticalOptions = LayoutOptions.EndAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 60,
            BackgroundColor = Color.Green,
            TextColor = Color.White
        };
        button.Clicked +=  (sender, args) => this.Content = secondlayout();
        
        stacklayout.Children.Add(button);

        return stacklayout;
    }

    public StackLayout secondlayout()
    {

        StackLayout stacklayout = new StackLayout
        {
            Margin = new Thickness(20),
            Children =
            {
                new Label { Text = "Secondary colors" },
                new BoxView { Color = Color.Green },
                new BoxView { Color = Color.Orange },
                new BoxView { Color = Color.Purple }
            }
        };

        Button button = new Button
        {
            Text = "Click to change content1",
            VerticalOptions = LayoutOptions.EndAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            HeightRequest = 60,
            BackgroundColor= Color.Green,
            TextColor = Color.White             
        };
        button.Clicked += (sender, args) => this.Content = firstlayout();

        stacklayout.Children.Add(button);

        return stacklayout;
    }

}

Result:

enter image description here

Or you can change Application.Current.MainPage to different pages:

private void Button_Clicked(object sender, EventArgs e)
{
    Application.Current.MainPage = new MainPage();

    //Or

    Application.Current.MainPage = new LoginPage();

}
nevermore
  • 15,432
  • 1
  • 12
  • 30