Xamarin Forms Toolbar / Navbar Formatting

Question

I am currently learning Xamarin Forms and I am starting by recreating an pp I have previously developed for iOS. I have been trying to format the navigation bar (I think its called toolbar in forms) and don't even know if what I want to do it possible.

This took me >5 minutes to knock together in xcode

This is currently what my xamarin project looks like

Firstly my bar buttons are grouped right for some reason, I've seen some old posts from 2014 about this not being possible. Have they changed this? I know Xamarin has changed ALOT since 2014 and I cant find the question having been asked recently (maybe it is no possible??).

Secondly the colour of my page in iOS is visible under the nav bar. It is not in Xamarin, I set the background colour using the following code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="NavigationDemo.MenuPage"
    BackgroundColor="Fuchsia"
    Title = "Navigation Bar">

Surely this should stretch behind?

So for a Xamarin rookie, how can I set it so that the iOS bar buttons appear left / right instead of right / right.... AND how can I get the background colour of my content page to appear under the navigation/toolbar?

Thanks

Welcome to the world of platform custom renderers.. You'd need renderers for the freedom you had in native to get it in forms. Anyway not a direct answer but a clue: i was on your road, built much with renderers, then just ended by creating my own navigation bar in pure forms as when you start customizing you want more and more custom stuff as you go.. in your page constructor set " NavigationPage.SetHasNavigationBar(this, false); NavigationPage.SetBackButtonTitle(this, "Back"); " it's up to you to draw your navigation bar as you want, overlay it using Grid. — Nick Kovalsky

sme sme · Accepted Answer · 2018-02-07T02:49:04

Enabling Transparency:

var navPage = new NavigationPage(new MyContentPage());

switch (Device.RuntimePlatform)
{
    case Device.iOS:
        navPage.On<Xamarin.Forms.PlatformConfiguration.iOS>()
            .EnableTranslucentNavigationBar();
        break;
}

I haven't tested it on a page that isn't a navigation page, but I suppose it should work. You could try var myPage = new MyContentPage(); instead.

Changing the color of text/icons in navigation bar:

In AppDelegate.cs, create a method called InitNavbarAndTabBarAppearance(), and call it in the FinishedLaunching() method, before initializing Xamarin.Forms:

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    ...
    InitNavBarAndTabBarAppearance();

    global::Xamarin.Forms.Forms.Init();
    ...
}

InitNavbarAndTabBarAppearance():

private void InitNavBarAndTabBarAppearance()
{
    // Color of the navigation bar title:
    UINavigationBar.Appearance.SetTitleTextAttributes(
        new UITextAttributes()
        {
            TextColor = UIColor.Black,
        });

    // Color of the navigation bar buttons/toolbar items:
    UINavigationBar.Appearance.TintColor = UIColor.FromRGB(0, 122, 255);

    // Color of the selected tab icon & text:
    UITabBarItem.Appearance.SetTitleTextAttributes(
        new UITextAttributes()
        {
            TextColor = UIColor.FromRGB(0, 122, 255)
        }, 
        UIControlState.Selected);

    // Color of the unselected tab icon & text:
    UITabBarItem.Appearance.SetTitleTextAttributes(
        new UITextAttributes()
        {
            TextColor = UIColor.FromRGB(146, 146, 146)
        }, 
        UIControlState.Normal);
}

Left-side toolbar items:

To have icons on the left-side of the navigation bar, you'll need a custom renderer. See Here: https://timeyoutake.it/2016/01/02/creating-a-left-toolbaritem-in-xamarin-forms/

Xamarin Forms Toolbar / Navbar Formatting

1 Answers