.NET MAUI - 如何在 TitleBar 中放置一个按钮？

Question

在我的 .NET MAUI 项目中，我想在 TitleBar 中放置一个按钮：

正如 Instagram 所做的那样：

TitleBar 本身是通过设置 ContentPage 的 Title 自动生成的。 有谁知道如何在那里放置一个按钮？

Answer 1

根据 Jason 和 Steve 的建议，您可以使用Shell.TitleView来实现添加的按钮。例如，以下 XAML 显示在导航栏中显示一个Button ：

 <Shell.TitleView>
    <StackLayout>
        <Button Text="ADD" Clicked="Button_Clicked" HeightRequest="50" WidthRequest="100" HorizontalOptions="End"></Button>
    </StackLayout>
 </Shell.TitleView>

或者您可以使用如下所示的Toolbar Items ：

<ContentPage.ToolbarItems>
    <ToolbarItem Text="Add" Clicked="Add_Clicked" />
    <ToolbarItem Text="Save" Clicked="Save_Clicked" />
</ContentPage.ToolbarItems>

但是它需要一个Navigation页面来显示它们。 因此，您需要修改由导航页面包裹的MainPage ：

MainPage = new NavigationPage(new MainPage());

Answer 2

您不能使用标准导航（标题）栏来做到这一点。 您必须使用页面NavigationPage.HasNavigationBar="False"的 xaml 标头中的以下命令从您的代码中禁用标准导航栏

然后你必须创建一个带有后退按钮和所有其他你想要放置的自定义导航栏（使用 xaml 内容视图，注意使用内容视图，而不是内容页面）。 下面是一个例子

内容视图的 XAML 代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.CustomViews.CustomNavigationBar">

    <ContentView.Content>
        <StackLayout
            Orientation="Horizontal"
            HeightRequest="50"
            MaximumHeightRequest="50">
            <ImageButton
                x:Name="btnBack"
                Clicked="btnBack_Clicked"
                Source="backarrow.png"
                HorizontalOptions="Start"
                VerticalOptions="Center"
                MaximumHeightRequest="50"
                MaximumWidthRequest="50"
                Aspect="AspectFit"/>
            <Image
                Source="logo.png"
                HorizontalOptions="Start"
                VerticalOptions="Center"
                MaximumHeightRequest="50"
                MaximumWidthRequest="50"
                Aspect="AspectFit"/>
            <Label
                x:Name="lblBarTitle"
                TextColor="White"
                HorizontalOptions="CenterAndExpand"
                VerticalOptions="Center"
                FontSize="Title"
                BackgroundColor="Transparent"/>
            <ImageButton
                x:Name="btnHome"
                Clicked="btnHome_Clicked"
                Source="homepage.png"
                BackgroundColor="Transparent"
                HorizontalOptions="End"
                VerticalOptions="Center"
                MaximumHeightRequest="40"
                MaximumWidthRequest="40"
                Aspect="AspectFit"/>
        </StackLayout>
    </ContentView.Content>
</ContentView>

内容视图的代码隐藏

public partial class CustomNavigationBar : ContentView
{
    public CustomNavigationBar()
    {
        InitializeComponent();
    }

    void btnBack_Clicked(System.Object sender, System.EventArgs e)
    {
        Navigation.PopAsync();
    }

    void btnHome_Clicked(System.Object sender, System.EventArgs e)
    {
        Navigation.PopToRootAsync();
    }

    public static readonly BindableProperty TitleTextProperty = BindableProperty.Create(
    nameof(TitleText),
    typeof(string),
    typeof(CustomNavigationBar),
    defaultValue: string.Empty,
    BindingMode.OneWay,
    propertyChanged: titleBindablePropertyChanged);

    private static void titleBindablePropertyChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var control = (CustomNavigationBar)bindable;
        control.lblBarTitle.Text = newValue.ToString();
        //throw new NotImplementedException();
    }

    public string TitleText
    {
        get { return base.GetValue(TitleTextProperty).ToString(); }
        set { base.SetValue(TitleTextProperty, value); }
    }
}

最后将视图放在您要使用的页面内

例如在页面 xaml 中使用以下代码

页面的 XAML 代码

<ContentPage.Content>
        <VerticalStackLayout>
                <!--NAVIGATION BAR-->
            <CustomViews:CustomNavigationBar Grid.Row="0" TitleText="{Binding Settings}"/>

            <!--place here you other stuff of your page....-->

        </VerticalStackLayout>
    </ContentPage.Content>