嗨,我想在导航栏中实现多行标题。如何以xamarin形式进行操作。
我尝试了使用newline属性,但这不起作用。
Title="Morning \n 9.30 Am";
我想要这样的标题
早晨
9.30 am
嗨,我想在导航栏中实现多行标题。如何以xamarin形式进行操作。
我尝试了使用newline属性,但这不起作用。
Title="Morning \n 9.30 Am";
我想要这样的标题
早晨
9.30 am
如果要在页面中自定义导航栏,
例如,您要向其中添加“标签”或“条目”。
您可以在 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";
}
,
如果要将标题设置为多行。您可以设置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),Orientation = StackOrientation.Horizontal,VerticalOptions = LayoutOptions.CenterAndExpand,HorizontalOptions = LayoutOptions.Start,Children = {
button,new Label(){
Text = title,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,150,Font = UIFont.SystemFontOfSize(20),Text = page.Title,TextColor = UIColor.Black,Lines = 0,};
UILabel line = new UILabel() {
Frame = new CGRect(0,height,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;
}
}
}
结果是:
Android:
iOS: