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
Related
I have several page in MAUI Shell XAML:
<ShellContent
Title="Dashboard"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage">
<ShellContent.Icon>
<FontImageSource Glyph="" FontFamily="AwesomeSolid" Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}" />
</ShellContent.Icon>
</ShellContent>
<ShellContent
Title="Ot"
ContentTemplate="{DataTemplate local:OtherPage}"
Route="OtherPage">
<ShellContent.Icon>
<FontImageSource Glyph="" FontFamily="AwesomeSolid" Color="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource Gray100}}" />
</ShellContent.Icon>
</ShellContent>
Shell navigation works fine, but if user taps "back" on OtherPage the application will not return the user back to the main page. Also, navigation from Shell Flyout does not add a back button to the OtherPage.
If I put a button on OtherPage and try to explore navigation stack it seems like it doesn't record previous page:
private async void Button_Clicked(object sender, EventArgs e)
{
Console.WriteLine(Shell.Current.Navigation.NavigationStack.Count); // prints 1
await Shell.Current.Navigation.PopAsync(); // doesn't work
await Shell.Current.GoToAsync(".."); // doesn't work
await Shell.Current.GoToAsync("///MainPage"); // navigates to MainPage
}
From the last call I can see that navigation is working, but navigating from Shell doesn't add page to the navigation stack.
How do I achieve the behavior that:
Application starts on MainPage
User navigates to OtherPage via Shell Flyout
User taps "back" button while on OtherPage and returns to MainPage
The shell content in the Shell.Xaml will be default set as the root page in the navigation stack. In other words, when you navigates to a page via Shell Flyout, that page will be a rootpage.
And the back button will show only when you go to a page which is not added into the Shell as a flyoutitem. So both of the OtherPage and the MainPage will not show the back button when you navigation between the two pages. You navigate between the two pages with the Shell.Current.GoToAsync is same as using the Shell Flyout.
So you can remove one of the ShellContent and only use the Shell.Current.GoToAsync to navigate between the two page or only use the Shell Flyout.
Update
In the OtherPage's xaml.cs:
protected override bool OnBackButtonPressed()
{
await Shell.Current.GoToAsync("///MainPage");
return true;
}
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'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...
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 :
I am trying to create an app using Prism in Xamarin Forms.
Xamarin Forms Version: 2.3.3.175
Prism Version: 6.2.0
The hamburger menu works in Android but when I run it UWP it won't display the icon and also when I navigate through menu, the menu totally disappears and I wont have the method go back to other pages too. In other words, I need to close and restart the app.
Here is what I tried so far.
After creating the prism project I added a MasterDetailPage:
<MasterDetailPage.Master>
<ContentPage Title="Default">
<StackLayout>
<Button Text="Billing" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/BillingPage"/>
<Button Text="Your Order" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/PlaceOrderPage"/>
<Button Text="Settings" Command="{Binding Path=NavigationCommand}" CommandParameter="MyNavigationPage/SettingsPage"/>
<Button Text="Settings"/>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
MasterDetailPage ViewModel
public class MDPageViewModel : BindableBase
{
private INavigationService _navigationService;
public DelegateCommand<string> NavigationCommand => new DelegateCommand<string>(Navigation);
public MDPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
}
private void Navigation(string page)
{
_navigationService.NavigateAsync(page);
}
}
After that I created a navigation page and also respective pages and view models. Here is App.Xaml.cs file:
public partial class App : PrismApplication
{
public App(IPlatformInitializer initializer = null) : base(initializer) { }
protected override void OnInitialized()
{
InitializeComponent();
NavigationService.NavigateAsync("MDPage/MyNavigationPage/ItemsPage");
}
protected override void RegisterTypes()
{
Container.RegisterTypeForNavigation<MDPage>();
Container.RegisterTypeForNavigation<BillingPage>();
Container.RegisterTypeForNavigation<PlaceOrderPage>();
Container.RegisterTypeForNavigation<SettingsPage>();
Container.RegisterTypeForNavigation<MyNavigationPage>();
}
}
So when I run the app in UWP it loads like this
But when I click on the links in menu , menu will disappear and it looks like this.
What I am doing wrong and How can I solve it?
I created a project in github so you can easily view the error.
https://github.com/codemasterblackperl/Hamburger_Menu_Prism_Forms_Repo
This is a bug in the latest version of Xamarin. It works when using 2.3.1.114. I've posted the bug here since i just ran into this.
This will only answer your question partially. Not being able to see the icon got me too, although it's documented in the Prism.Forms docs. In order to get the icon, go to the App.Xaml in your UWP project and add the following data template between <Application.Resources>...</Application.Resources>
<DataTemplate x:Key="ItemTemplate">
<uwp:ItemControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
</DataTemplate>
Define the uwp prefix at the top like xmlns:uwp="using:Xamarin.Forms.Platform"
You App.Xaml should look something like this:
<Application x:Class="MyApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uwp="using:Xamarin.Forms.Platform">
<Application.Resources>
<DataTemplate x:Key="ItemTemplate">
<uwp:ItemControl HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
</DataTemplate>
</Application.Resources>
After you've done that, it will display the icon. However, this will show you that once you click an item in the master, the menu collapses. I've not been able to fix that.
Just use IMasterDetailPageOptions interface in your MasterDetail code-behind:
public partial class ShellView : MasterDetailPage, IMasterDetailPageOptions
{
public ShellView()
{
InitializeComponent();
}
public bool IsPresentedAfterNavigation
{
get { return Device.Idiom != TargetIdiom.Phone; }
}
}