I'm trying to navigate back from the page I have been routed. I have registered all pages as well.
I have Home Page with List view. When clicking ListView Item I'm navigation to DetailsPage from there again I'm navigating to RecordPage. Now when I'm clicking back button on RecordPage, which comes automatically, it throws this exception.
Here is what I have done
AppShell.xaml
<Shell
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyApp.Mobile.UI;assembly=MyApp.Mobile.UI"
Shell.FlyoutBehavior="Disabled">
<ShellContent
ContentTemplate="{DataTemplate local:HomePage}"
Route="InspectionListPage" />
</Shell>
App.xaml.cs
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new AppShell();
Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
Routing.RegisterRoute(nameof(HomePage), typeof(HomePage));
Routing.RegisterRoute(nameof(DetailsPage), typeof(DetailsPage));
Routing.RegisterRoute(nameof(RecordPage), typeof(RecordPage));
}
}
Related
I am trying to create my first Xamarin mobile application, I am a bit confused when it comes to navigating back to the previous screen/tab using the back button (android). I have created a test project and I am using Xamarin form shell to define the hierarchy.
The navigation type I am using is Tab. In my test application I got 2 tabs
This is my current method which I am using to navigate back to the first tab from the second tab if the user presses on the back button.
I override OnBackButtonPressed method and execute a command that executes GoTo method.
public partial class ItemsPage : ContentPage
{
ItemsViewModel _viewModel;
public ICommand goBack;
public ItemsPage()
{
InitializeComponent();
BindingContext = _viewModel = new ItemsViewModel();
goBack = new Command(async (x) => await Shell.Current.GoToAsync("////AboutPage"));
}
protected override void OnAppearing()
{
base.OnAppearing();
_viewModel.OnAppearing();
}
protected override bool OnBackButtonPressed()
{
base.OnBackButtonPressed();
goBack.Execute(null);
return true;
}
}
This works, but the problem is, I have hardcoded the page I wanna go back to. In the future, I will be adding 2 more tabs, so in that case say for example if the user is on the 4th tab and the previous tab was Tab 3, how can I retrieve that information so that I can successfully navigate the user back to that previous tab or page?
I tried to use the navigationstack in the Shell but couldn't figure out how to use it with tabs.
Thank you for your time.
Cheers
Edit
-Code in the AppShell which defines the hierarchy
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TestApp03.Views"
Title="TestApp03"
x:Class="TestApp03.AppShell">
<TabBar>
<ShellContent Title="About" Icon="icon_about.png" Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
<ShellContent Title="Browse" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
</TabBar>
</Shell>
You can use await Shell.Current.GoToAsync(".."); to achieve forward jump. For more usage, please refer to this link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs
i want to navigate from a page(not main page) which is in a tabbed page to a page when clicking on a button. i tried this :
MainPage = new NavigationPage(new listofinterest());
MainPage = new TabbedPageMain()
{
BarBackgroundColor = Color.FromHex("#F8F8F8"),
};
////////
public partial class listofinterest : ContentPage
{
private async void Add(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage(new MainPage()));
}
}
it didn't work i get this error
"PushAsync is not supported globally on Android, please use a NavigationPage.'"
i need help please.
The problem is your overriding the MainPage with the TabbedPageMain. Only set it once.
First set the MainPage in App.xaml.cs:
MainPage = new NavigationPage(new MyPage());
Then you can push other pages from MyPage like this:
await Navigation.PushAsync(new MyOtherPage());
it didn't work i get this error "PushAsync is not supported globally on Android, please use a NavigationPage.'" i need help please.
From your code and description, you want to navigate from one of Tabbedpages to other page in project. If yes, please add to a navigation stack is referred to as the root page of the application in App.xaml.cs.
public App()
{
InitializeComponent();
MainPage =new NavigationPage( new tabbedpage.TabbedPage1());
}
then Tabbedpage.xaml:
<TabbedPage
x:Class="FormsSample.tabbedpage.TabbedPage1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FormsSample.simplecontrol">
<!-- Pages can be added as references or inline -->
<TabbedPage.Children>
<local:Page1 />
<local:Page3 />
<local:Page4 />
</TabbedPage.Children>
Wanting to navigate Page1 from Tabbedpage to other page.
<ContentPage
x:Class="FormsSample.simplecontrol.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="page 1">
<ContentPage.Content>
<ScrollView>
<StackLayout x:Name="Contenttest">
<Button
x:Name="btn1"
Clicked="btn1_Clicked"
Text="navigate to another page" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
private void btn1_Clicked(object sender, EventArgs e)
{
Navigation.PushAsync(new simplecontrol.Page5());
}
About Navigation detailed info, please refer to
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical
I finding through the google but could not find the result.
I have a Shell setup Xamarin form application. Eventhough I am not fully use it's functionally but there is a tab setup in xaml file.
I am wonder can i have a content page hosted under the shellContent and add Tabs from the contentPage.
Do you want to achieve it like this GIF?
You can add x:Name for TabBar in AppShell.xml like this code.
<TabBar x:Name="myTabBars">
<Tab Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
<Tab Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
</TabBar>
In the AppShell.xml.cs, expose this tabbar.
public partial class AppShell : Xamarin.Forms.Shell
{
// public static Shell myshell;
public static TabBar mytabbar;
public AppShell()
{
InitializeComponent();
mytabbar = myTabBars;
}
}
Use it in the ContentPage.
private void Button_Clicked(object sender, EventArgs e)
{
ShellSection shell_section = new ShellSection
{
Title = "home",
};
shell_section.Items.Add(new ShellContent() { Content = new HomePage() });
AppShell.mytabbar.Items.Add(shell_section);
}
I am a xamarin forms prism app, I have 3 tabs and the tab bar is active only on that specific page, If i navigate deep inside a specific tab, the bottom tab is gone. Is there a way to keep the bottom tab active through even when we navigate to other pages inside these tabs?
I tried to do something like this but i am not able to do it in prism.
Without prism it’s pretty straight forward to do as shown in above link but I’m not ablr todo with prism. Can anyone suggest how I can achieve it?
MY CODE:
App.Xaml.cs
protected override async void OnInitialized()
{
InitializeComponent();
await NavigationService.NavigateAsync("NavigationPage/MainPage");
}
MainPage.XML
<?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:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:windows="clr-namespace:Xamarin.Forms.PlatformConfiguration.WindowsSpecific;assembly=Xamarin.Forms.Core"
xmlns:local="clr-namespace:MyTabs.Common.Views"
x:Class="MyTabs.Common.Views.MainPage" BackgroundColor="Olive" BarBackgroundColor="Maroon">
<TabbedPage.Children>
<local:PageOne Title="PageOne"
Icon="PageOne.png" />
<local:PageTwo Title="PageTwo"
Icon="PageTwo.png" />
<NavigationPage Title="PageThree" Icon="PageThree s.png">
<x:Arguments>
<local: PageThree/>
</x:Arguments>
</NavigationPage>
<local:PageFour Title="PageFour"
Icon="PageFour.png" />
</TabbedPage.Children>
</TabbedPage>
PageThreeViewModel:
public class PageThreeViewModel : ViewModelBase
{
private ICommand pageFiveCommand;
public ICommand PageFiveCommand { get { return pageFiveCommand; } }
private void OnCloseCommand()
{
_navigationService.GoBackAsync();
}
public PageThreeCommand ViewModel()
{
pageFiveCommand = new DelegateCommand(OnPageFiveCommand);
}
private async void OnPageFiveCommand()
{
//await _navigationService.NavigateAsync(?NavigationPage/PageFive");
await _navigationService.NavigateAsync("GiftCardPage");
}
}
You can achieve this by Wrapping the ContentPage inside the TabbedPage with NavigationPage.
Code :
<TabbedPage>
<TabbedPage.Children>
<NavigationPage Title="Home" Icon="home.png">
<x:Arguments>
<ContentPage>
//Your ContentPage here
//You can have a ViewModel for this ContentPage and Navigate inside that and will still have the Tabbed Page outside.
</ContentPage>
</x:Arguments>
</NavigationPage>
</TabbedPage.Children>
</TabbedPage>
I am trying to get Master-Detail navigation configured in my Xamarin.Forms app with my UWP target running on Windows 10.
When I run the sample Master-Detail app provided by Xamarin (following https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/), and change the MasterBehavior to Popover, I see the following behavior:
Startup:
Select the hamburger icon:
Make a selection:
In my prism app, I navigate to MainPage/View1:
protected override void OnInitialized()
{
InitializeComponent();
var task = NavigationService.NavigateAsync("MainPage/View1");
...
}
MainPage is my MasterDetailPage with the MasterBehavior set to Popover, and View1 is a ContentPage.
MainPage:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
x:Class="My.Mobile.Application.Frame.MainPage"
MasterBehavior="Popover">
<MasterDetailPage.Master>
<views:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:View1 />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
View1:
public View1()
{
NavigationPage.SetHasNavigationBar(this,false);
InitializeComponent();
}
On startup, I do not see any navigation bar, just the contents of View1 (currently just a red screen):
If I change the MasterBehavior of MainPage.xaml to Default instead of Popover, and remove the SetHasNavigationBar in View1, I see the side menu when the app launches:
MainPage:
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:My.Mobile.Application.Views;assembly=My.Mobile.Application"
x:Class="My.Mobile.Application.Frame.MainPage"
MasterBehavior="Default">
<MasterDetailPage.Master>
<views:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<views:View1 />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
View1:
public View1()
{
//NavigationPage.SetHasNavigationBar(this,false);
InitializeComponent();
}
When I make a selection after startup with MasterBehavior set to Default, I now see the hamburger menu.
Is there anything that I can add or verify in my solution to mimic the Xamarin sample behavior with the MasterBehavior set to Popup?
The problem is here: var task = NavigationService.NavigateAsync("MainPage/View1");
Since you want to show the hamburger menu, you need to wrap your Detail in a NavigationPage. So first register a NavigationPage for navigation
Container.RegisterTypeForNavigation<NavigationPage>();
Then add it to your navigation path:
var task = NavigationService.NavigateAsync("MainPage/NavigationPage/View1");
Also, you can remove a the detail markup in your MasterPage XAML because the navigation service will build it up for you.
Try to do something like this:
public partial class ShellView : MasterDetailPage, IMasterDetailPageOptions
{
public ShellView()
{
InitializeComponent();
}
public bool IsPresentedAfterNavigation
{
get { return Device.Idiom != TargetIdiom.Phone; }
}
}