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 :
Related
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?
I have a ContentPage which is assigned to the Xamarin.Forms.Shell class as a ShellContent and require the back button to be displayed in the navigation bar of the ContentPage.
The XAML source of the ContentPage in concern is as follows:
<?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="UI_test.TestPage">
<Shell.NavBarIsVisible>True</Shell.NavBarIsVisible>
<Shell.BackButtonBehavior>
<BackButtonBehavior IsEnabled="True" />
</Shell.BackButtonBehavior>
<Shell.FlyoutBehavior>Disabled</Shell.FlyoutBehavior>
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I found that that assigning a custom value to the attributes TextOverride and IconOverride of the <BackButtonBehavior> tag will display the back button, but I am looking for a way to display the platform's default back button (rather than a custom one) as the above ContentPage does not display as back button in its navigation bar as seen in the screenshot below.
Thanks in advance.
Your project seems to contain one page only, It won't appear if no navigation has been made, and it makes sense. If you do a Shell.GotoAsync(..) or Shell.Navigation.PushAsync(..) to navigate to another page it will then appears (the default native back button) allowing to go back to the previous page in the navigation stack.
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 ());
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?