Navigation bar with multi line title in xamarin forms?

Question

I want to implement multi-line title in my Navigation bar.

How Can I do that in Xamarin.Forms?.

I tried with newline property, but that doesn't work.

Title="Morning \n 9.30 Am";

I want the title like this

Morning

9.30 Am

Answer 1

If you want to customize a navigation bar in a page,

For example, you want to add 'Label' or 'Entry' to it.

you can do this in Xamarin.Forms v3.2 or higher

XForms has introduced a new tag called NavigationPage.TitleView.

By using this tag, you can customize the navigation bar and add any control to the navigation bar

and here is the sample code for adding Label with multi-line to the navigation bar.

In xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
         x:Class="TestApp.MainPage">
<NavigationPage.TitleView>
    <StackLayout>
        <Label x:Name="Label" 
               TextColor="Red" 
               FontSize="Medium"
               HorizontalTextAlignment="Center" />
    </StackLayout>
</NavigationPage.TitleView>

In cs

 public MainPage()
    {
        InitializeComponent();
        Label.Text = "Line1\nLine2";
    }

References

• Github/Xamarin-Forms
• Xamarin Forms Samples -Title View

Answer 2

If you want to set the title as multi-lines . You can set the style of titleView.I have achieved this function ,you can check it out here.

Firstly , we can create a subclass of ContentPage (BaseContentPage)

(in Android ,you just need to set the style of TitleView)

  [XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class BaseContentPage : ContentPage
{
    public BaseContentPage ()
    {
        InitializeComponent ();

        if (Device.RuntimePlatform == "Android")
        {
            NavigationPage.SetHasBackButton(this, false);
            NavigationPage.SetTitleView(this, SetTitleView("Morning \n 9.30 Am"));
        }
        else
        {
            Title = "Morning \n 9.30 Am";
        }
    }

    StackLayout SetTitleView(string title)
    {
        Button button = new Button()
        {
            Text = "Back",
            TextColor = Color.White,
            FontAttributes = FontAttributes.None,
            BackgroundColor = Color.Transparent,
        };
        button.Clicked += Button_Clicked;
        StackLayout TitleView = new StackLayout()
        {
            Margin = new Thickness(-20, 0, 0, 0),
            Orientation = StackOrientation.Horizontal,
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.Start,
            Children = {
                button,
                new Label(){
                    Text = title,
                    TextColor = Color.White,
                    HorizontalTextAlignment = TextAlignment.Center,
                    WidthRequest = 200,
                }
            }
        };
        return TitleView;
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        Navigation.PopAsync();
    }
}

Because this method will only work on Android. So you should do something more on iOS.

in iOS project .create the custom renderer of BaseContentPage .And set the style of Navigation Bar.

 using Foundation;
 using UIKit;
 using Xamarin.Forms.Platform.iOS;
 using Xamarin.Forms;
 using xxx.iOS;
 using CoreGraphics;
 using xxx;
 using ObjCRuntime;
 [assembly: ExportRenderer(typeof(BaseContentPage), typeof(MyPageRenderer))]
 namespace xxx.iOS
 {
public class MyPageRenderer: PageRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);
        var page = Element as Page1;
        NavigationController.NavigationBar.Hidden = true;
        double height = IsiphoneX();
        UIView backView = new UIView()
        {
            BackgroundColor = UIColor.White,
            Frame = new CGRect(0,20,UIScreen.MainScreen.Bounds.Width, height),
        };
        UIButton backBtn = new UIButton() {
            Frame = new CGRect(20, height-44, 40, 44),
            Font = UIFont.SystemFontOfSize(18),
        } ;
        backBtn.SetTitle("Back", UIControlState.Normal);
        backBtn.SetTitleColor(UIColor.Blue, UIControlState.Normal);
        backBtn.AddTarget(this,new Selector("GoBack"),UIControlEvent.TouchUpInside);
        UILabel titleLabel = new UILabel() {
            Frame=new CGRect(UIScreen.MainScreen.Bounds.Width/2-75, 0,150, height),
            Font = UIFont.SystemFontOfSize(20),
            Text = page.Title,
            TextColor = UIColor.Black,
            Lines = 0,
        };
        UILabel line = new UILabel() {
            Frame = new CGRect(0, height, UIScreen.MainScreen.Bounds.Width, 0.5),
            BackgroundColor = UIColor.Black,
        };

        backView.AddSubview(backBtn);
        backView.AddSubview(titleLabel);
        backView.AddSubview(line);
        View.AddSubview(backView);
    }
     double IsiphoneX()
    {
        double height = 44;
        if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
        {
            if (UIApplication.SharedApplication.Delegate.GetWindow().SafeAreaInsets.Bottom > 0.0)
            {
                height = 64;
            }
        }
        return height;
    }
    [Export("GoBack")]
    void GoBack()
    {
        NavigationController.PopViewController(true);
    }
    public override void ViewWillDisappear(bool animated)
    {
        base.ViewWillDisappear(animated);

        NavigationController.NavigationBar.Hidden = false;
    }
  }
 }

The result is:

Android:

Ios: