Xamarin.Forms Navigate from TabbedPage - c#

I am new at Xamarin.Forms, I came from android.
I found on Xamarin.Forms Docs that is not recommended to put a TabbedPage in a NavigationPage so what should I do to navigate to another page. And I don't want to navigate from one of the tabbedPage children, but to navigate from the tabbed page to a whole new page ?

not recommended to put a TabbedPage in a NavigationPage
That means we would better set the MainPage of the App as a TabbedPage directly like
public App()
{
InitializeComponent();
MainPage = new TabbedPage(); // it's better than MainPage = new NavigationPage(new TabbedPage());
}
In Tabbed Pagged we could set the child page of it as NavigationPage like following
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:xxx;assembly=xxx"
x:Class="TabbedPageWithNavigationPage.MainPage">
<NavigationPage Title="Page1" IconImageSource="xxx.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Page2" IconImageSource="xxx.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
And in Page1 or Page2 we could navigate to another ContentPage
await Navigation.PushAsync (new xxxPage ());

Related

Display a ToolBar in a Xamarin.Forms modal page

The "new" and recommended way to display a modal page with the Xamarin.Forms Shell uri-based navigation is to set this tag in the XAML file (source): Shell.PresentationMode="ModalAnimated"
and to navigate to it by using a standard route and invoking it with the function Shell.Current.GoToAsync("routeToMyPage").
However, this displays the modal page without a toolbar. Without Shell navigation, I would have wrapped this page in a NavigationPage, but since the pages are initialized through reflection (at least that's what it looks like - don't quote me on this), I don't know how to do that.
Adding a ToolbarItem in the page's XAML code doesn't solve this, neither does the Shell.NavBarIsVisible="True" property, and adding a Button in the Shell.TitleView tag doesn't display a toolbar either.
Is there a way to display the default navigation toolbar without rendering a custom one myself?
Here is the XAML code I used to try to have the Toolbar displayed:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Shell.PresentationMode="ModalAnimated"
Shell.NavBarIsVisible="True"
x:Class="StackOverflow.Views.MyModalPage">
<ContentPage.ToolbarItems >
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
<Shell.TitleView>
<Button Text="Toolbar Button"/>
</Shell.TitleView>
<ContentPage.Content>
</ContentPage.Content>
</ContentPage>
Edit: I have created a small sample project to showcase my issue: https://github.com/Kuurse/StackOverflowExample
You can first create the NavigationPage root page in the app class:
public partial class App : Application
{
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MainPage());
}
}
Then set like this in your mainpage.xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="StackOverflow.Views.MyModalPage"
NavigationPage.HasNavigationBar="True">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Hi"/>
</ContentPage.ToolbarItems>
</ContentPage>
By the way, do you want to display only the default navigation toolbar?

How to Navigate to a certain TabbedPage from TapGesture or Button press

The Goal:
While within a tabbed page I have a frame and a frame tap gesture, while selecting within the frame tap gesture I would like it to navigate to the proper tabbed page as if selecting the tabbed page.
I have tried various navigation methods however they will either have a top back button or not show the bottom tabs, or will not update the lower menu navigation, or will have me go to mainpage and have the first tab selected.
I have a MainPage with 5 tabbed pages.
Example of how my tabbed pages are setup: (using views: in xaml to select the page).
<NavigationPage Title="Offers">
<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_offers.png"/>
<On Platform="Android" Value="tab_offers.png"/>
</OnPlatform>
</NavigationPage.Icon>
<x:Arguments>
<views:OffersPage />
</x:Arguments>
</NavigationPage>
The code used to get the tap gesture within the frame.
<Frame BackgroundColor="Green" HeightRequest="32" WidthRequest="112" Padding="0" CornerRadius="8" HasShadow="False">
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OfferPage" /
</Frame.GestureRecognizers>
<Label Text="Earn Now" TextColor="White" FontSize="14" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"/>
</Frame>
Currently the navigation method I am using is the following:
private async void TapGestureRecognizer_OfferPage(object sender, EventArgs e)
{
await Navigation.PushModalAsync(new NavigationPage(new MainPage()));
}
Essentially, I believe there should be a way to select the tabbed page index or the tabbed page from MainPage. However not sure how to implement it properly.
With the above code it will navigate me back to MainPage however to the first loaded tab. I need it to be on the 4th tab or OffersPage.
Any assistance would be appreciated.
If you want to navigate between 5 tab pages , you could use MessagingCenter .
in TabbedPage
public MyTabbedPage()
{
InitializeComponent();
MessagingCenter.Subscribe<Object, int>(this, "click", ((arg, idx) => {
// idx the index of pages in tabbed that you want to navigate
CurrentPage = this.Children[idx];
}));
}
And send the message when tap the frame
MessagingCenter.Send<object, int>(this,"click",2);// if you want to navigation to the third page .
Try to use this:
private async void TapGestureRecognizer_OfferPage(object sender, EventArgs e)
{
await Navigation.PushAsync(new YourPageName());
}
Let me know if you have any query.

Xamarin.Forms - View missing menu from main page

I created this menu that is working well but on some pages that are open not using the menu it is replaced with a back button. Is there anyway to make sure that menu is on all of the pages?
mainpage.xaml
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
Homepage.xaml.cs
var masterDetailPage = Application.Current.MainPage as MasterDetailPage;
masterDetailPage.Detail = new NavigationPage((new SearchPage("A")));
replaced PushAsync with replacing the detail section
Navigation.PushAsync(new SearchPage("a"));
var masterDetailPage = Application.Current.MainPage as MasterDetailPage;
masterDetailPage.Detail = new NavigationPage((new SearchPage("a")));

2 title bars are coming in xamarin form app

2 tile bars are coming in my xamarin forms app, where
Bar 1 contains back button(left side) and logout button(right side)
Bar 2 contains Content page title(left side) and logout button(right
side)
I want to merge them into single title bar. My code is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LIS.Pages.SampleCollectionList"
xmlns:view="clr-namespace:LIS.View;assembly:LIS" Title="Test">
<ContentPage.ToolbarItems>
<ToolbarItem Name="SearchItem" Icon="logout.png" Priority="0" Clicked="SearchItem_Clicked"></ToolbarItem>
</ContentPage.ToolbarItems>
<Grid>
.....
</Grid>
</ContentPage>
Screenshot
2 title bars are coming in xamarin form app
If you use NavigationPage to manage the navigation of a stack of other pages, when you navigate to another Page, don't create a new NavigationPage, just Push a new page onto the existing NavigationPage.
For example, if you set MainPage like this :
MainPage = new NavigationPage(new MainPage());
When you navigate to the second page, if you create a new NavigationPage :
await Navigation.PushAsync(new NavigationPage(new Page1()));
In this situation, you will have two title bars in your app, effect :
Solution :
Just Push the new page onto the existing NavigationPage :
await Navigation.PushAsync(new Page1());
Effect :

Prism Xamarin Forms Tabbed Page Navigation

I have a Xarmarin Forms application using Prism and Unity and am having trouble with navigation to a tabbed page.
I'm using the following versions: Prism.Forms v6.1.0-pre5 Prism.Unity.Forms v6.2.0-pre5 Xamarin.Forms v2.3.0.38-pre2
My tabbed page looks like this
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:local="clr-namespace:ServiceOrdersMobileApps.Views;assembly=ServiceOrdersMobileApps"
x:Class="ServiceOrdersMobileApps.Views.ServiceOrderTabs">
<NavigationPage Title="Summary">
<x:Arguments>
<local:ServiceOrderSummary />
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Complete">
<x:Arguments>
<local:ServiceOrderDetails />
</x:Arguments>
</NavigationPage>
</TabbedPage>
I'm trying to navigate to the tabbed page with the Service Order Detail Page selected but when I navigate according to this blog post. It navigates past the tabbed page to a separate Service Order Detail Page
var p = new NavigationParameters();
p.Add("serviceorder", context);
await _navigationService.NavigateAsync($"{nameof(ServiceOrderTabs)}/{nameof(ServiceOrderDetails)}",p);
You have the page wrapped in a generic NavigationPage that Prism doesn't know about. You need to create a derived NavigationPage and register it for navigation. Then use that to wrap your COntentPages. Then you can try navigating like "ServiceOrdersTabs/MyNavigationPage/ServiceOrdersDetails".
But even this may not work now that I think about it, because you'll have multiple instances of the same NavigationPage and Prism will use the first one it finds and use that.
For a work around, you'll have to create a different NavigationPage for each tab (ServiceOrderSummaryNavPage, ServiceOrdersDetailsNavPage, etc) to ensure that each Tab is unique.
By the way, from where are you navigating?

Categories