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 表單示例 - 標題視圖

Answer 2

如果要將標題設置為 multi-lines 。 可以設置titleView的樣式，這個功能我已經實現了，可以看這里。

首先，我們可以創建一個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();
    }
}

因為這個方法只適用於安卓。 所以你應該在 iOS 上做更多的事情。

在 iOS 項目中，創建 BaseContentPage 的自定義渲染器。並設置 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;
    }
  }
 }

結果是：

安卓：

IOS：