xamarin表单中带有多行标题的导航栏？

Question

我想在我的导航栏中实现多行标题。

如何在 Xamarin.Forms 中做到这一点？

我尝试了换行属性，但这不起作用。

Title="Morning \n 9.30 Am";

我想要这样的标题

早上

9.30 上午

Answer 1

如果要在页面中自定义导航栏，

例如，您要为其添加“标签”或“条目”。

您可以在 Xamarin.Forms v3.2 或更高版本中执行此操作

XForms 引入了一个名为 NavigationPage.TitleView 的新标签。

通过使用该标签，可以自定义导航栏，在导航栏上添加任意控件

这里是添加多行标签到导航栏的示例代码。

在 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>

在cs中

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

参考文献

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

Answer 2

如果要将标题设置为多行。可以设置titleView的样式，这个功能我已经实现了，可以查看here。

首先，我们可以创建一个ContentPage的子类（BaseContentPage）

（在Android中，只需要设置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();
    }
}

因为此方法仅适用于 Android。所以你应该在 iOS 上做更多的事情。

在iOS项目中。创建BaseContentPage的自定义渲染器。并设置导航栏的样式。

 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;
    }
  }
 }

结果是：

安卓：

IOS：