How to switch pages in the Xamarin Shell without a back button in the top navigation

user_16245660 0
Viewed 405

I have picker in my left menu navigation shell that change the main page language,
for example actually the app in English. When I change to French, it change and redirect to main page with French text.
The problem is when I press the back arrow in navigation page, it back to old language (English).

Here the shell navigation

<Shell ..>
    <Shell.FlyoutHeader>
<Picker  ItemsSource="{Binding MultiLang, Mode=TwoWay}" SelectedItem="{Binding SelectedLang}">
     </Picker>
</Shell.FlyoutHeader>


<ShellContent x:Name="home"
Route="main"
ContentTemplate="{DataTemplate home:Dashboard}" />
</Shell>

and this is the method that redirects to the main page:

private async void ChangeLange(string lang)
{
...
            Routing.RegisterRoute(nameof(Dashboard), typeof(Dashboard));
            await Shell.Current.GoToAsync($"{nameof(Dashboard)}");// it redirect but with button back
            RemoveStackNavigation ()
         //   await Shell.Current.GoToAsync("//main"); like this , it dosent refresh the page with 

            Shell.Current.FlyoutIsPresented = false; 
}

here is the MVMM

        public string _selectedLang;
        public string  SelectedLang
        {
            get
            {
                return _selectedLang;
            }
            set
            {
                if (_selectedLang != value)
                {
                    _selectedLang = value;
                    OnPropertyChanged("SelectedLang");
                    ChangeBuilding(value);

                }
            }
        }

I tried to RemoveStackNavigation before make redirection to Dashboard like this :

        public static void RemoveStackNavigation()
        {
            var existingPages = Shell.Current.Navigation.NavigationStack.ToList();
            foreach (var page in existingPages)
            {
                if (page != null)
                    Shell.Current.Navigation.RemovePage(page);
            }
        }
xamarin.forms navigation shell c#
2 Answers

The navigation stack of Shell has something special. Clear the navigation stack is not a good choice. We always use Routes to do the navigation for the Shell. You need to know which would generate the stack.

  • A route, which defines the path to content that exists as part of the Shell visual hierarchy.
  • A page. Pages that don't exist in the Shell visual hierarchy can be pushed onto the navigation stack from anywhere within a Shell application. For example, a details page won't be defined in the Shell visual hierarchy, but can be pushed onto the navigation stack as required.

For more details, please check the MS docs. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

When you press the back button, override the back button event and then judge the route to do the navigation would be better. Use the specific route name to go back.

Update:

After compilation the Navigation Bar that we call in Xamarin Forms, turns into the Action Bar for Android during runtime.

Set the toolbar after LoadApplication(new App()); in OnCreate of MainActivity.

        AndroidX.AppCompat.Widget.Toolbar toolbar
     = this.FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Resource.Id.toolbar);
    SetSupportActionBar(toolbar);

And then overrode OnOptionsItemSelected(). When you press the backbutton on navigation bar, this event would be triggered.

 public override bool OnOptionsItemSelected(IMenuItem item)
    {
   
     }
user_118500330

I didn't understand so much of what happens, but I assume that you want to change the language of your app when you swipe the picker. I think the problem isn't in the navigation, but the way of pages are created.

For example, if you run now your app and it goes to a Main page it will stored in a temp cache, so if you go to another page and go back, it will load faster than the first time that you entered in app.

Something that you can test is (ONLY TEST):

  • Put this picker result (e.g: if is French than a variable is 1, if is English, 2, etc) and this variable as static, just to it don't refresh and you lost this value.
  • In your main page, create a Label and the set the dynamic text:
switch(pickerResult):
case "1":
 lblTest.Text = "french";
break;
case "2":
 lblTest.Text = "English";
break;
case "3":
 lblTest.Text = "Italian";
break;

AND, the page that you go when you click in back button that now is showing in English, create exactly the same label above, and see if works.

If it works, then some hints:

  • Your page can be with static texts;
  • Your page isn't getting the language in runtime;

SO, to solve this, you need to create some List<Words> and get the properly language when the picker was changed:

private void SelectedIndexChanged(sender s, EventArgs e)
{
  switch(pickerResult):
  case "1":
     App.wordsList = GetListOfWords("french");
  break;
}

This GetListOfWords is a function to you call your xml or App Resource or whatever you're using to change the language (even if was a translator).

Now your wordsList (or whatever are your way to call it) will be updated.

user_147002370
Related