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")));
Related
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 ());
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.
I'm just starting out in xamarin forms, right now I'm trying to make it so both the titlebar and navbar for my pages change colour depending on what page you're on. I also have the toolbarposition set to bottom.
The problem is changing the colour only changes the bottom navigation bar, not the top title bar.
My mainpage (the tabbed page) code behind
public partial class MainPage : TabbedPage
{
public MainPage()
{
On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
InitializeComponent();
this.BarBackgroundColor = Color.FromHex("#008B8B");
this.BarTextColor = Color.White;
}
}
This changes my navigation bar at the bottom to the colour I want, but leaves the top title bar the default blue colour.
Budget & Expenses are two generic content pages (as you can see)
If you have not set the page title, then correct it would be blank. To set the color of the title bar at the top for each page, I've used navigation pages for each tabbed page child, then set the background color of those navigation pages
Example: The xaml for your app's main page
<controls:TabbedPage
xmlns:controls="clr-namespace:bla.Controls" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="bla.Views.HomePage"
>
<controls:TabbedPage.Children>
<NavigationPage BarTextColor="White" Title="Home" Icon="home.png" Padding="0,-12,0,0">
<x:Arguments>
<HomePage/>
</x:Arguments>
</NavigationPage>
<NavigationPage Title="Communities" BarTextColor="White" Icon="people_outline.png">
<x:Arguments>
<OtherPage />
</x:Arguments>
</NavigationPage>
</controls:TabbedPage.Children>
Your app.xaml:
MainPage = GetMainPage();
MainPage.SetValue(NavigationPage.BarBackgroundColorProperty, Color.Green);
public static Page GetMainPage()
{
return new HomePage(); //home page is a tabbed page
}
You could use static resources in your App.xaml for the style of your NavigationPage for all the project solution.
Paste this code in your App.xaml
<Application.Resources>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="Color of Bar Background" />
<Setter Property="BarTextColor" Value="Color of your text on you Bar" />
</Style>
<Application.Resources>
This line is that answers your problem.
<Setter Property="BarTextColor" Value="Color of your text on you Bar" />
I hope it helped you...
I am working with Xamarin Forms creating both Android and iOS application. I have tabbed page - at Android tabbed page is being shown at top and when I have a lot of tabs, not all of them are being shown, but they can be slided in horizontal direction.
At iOS when I have more than 5 tabs, then there is a "more button" created, that I can open and see rest of tabs.
How to delete "more" button when have more than 5 tabs at iOS tabbed page and put slideable tabs (similar to android) ?
You can use Naxam.TopTabbedPage.Forms from Nuget
Usage:
in your iOS project AppDelegate.cs file
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
global::Xamarin.Forms.Forms.Init();
TopTabbedRenderer.Init(); //add this line
LoadApplication(new App());
return base.FinishedLaunching(app, options);
}
And in your forms
in xaml
<?xml version="1.0" encoding="utf-8" ?>
<forms:TopTabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App11"
x:Class="App11.MainTabbedPage"
xmlns:forms="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.TopTabbedPage.Forms"
BarBackgroundColor="#2196F3">
<local:Page1 Title="PAGE 1"/>
<local:Page2 Title="PAGE 2"/>
<local:Page3 Title="PAGE 3"/>
<local:Page4 Title="PAGE 4"/>
<local:Page5 Title="PAGE 5"/>
</forms:TopTabbedPage>
in xaml.cs
using Naxam.Controls.Forms;
namespace TopTabbedPageDemo
{
public partial class MainTabbedPage : TopTabbedPage
{
public MainTabbedPage()
{
InitializeComponent();
}
}
}
Is it possible to move first tab title starting position that it is not cut in half? the problem happens only if there are a lot of tabs. After moving between tabs the problem disapears, but when page is initialize it happens.
Try to setup the CurrentPage to the corresponding Content Page;
i.e;
if you want 1st contentpage to display while initialization set as;
this.CurrentPage = tab1; // where tab1 is the x:Name for the contentpage
hope it helps;
thanks
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?