XAML NET MAUI -如何在标题栏中放置按钮?

jv4diomz  于 2022-12-20  发布在  其他
关注(0)|答案(2)|浏览(296)

在我的.NET MAUI项目中,我想在TitleBar内放置一个按钮:

Instagram就是这么做的:

TitleBar本身是通过设置ContentPage的标题自动生成的。有人知道如何在那里放置一个按钮吗?

6kkfgxo0

6kkfgxo01#

正如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页面来显示它们。所以,你需要修改由导航页面 Package 的MainPage

MainPage = new NavigationPage(new MainPage());
sq1bmfud

sq1bmfud2#

**不能使用标准导航(标题)栏执行此操作。**必须在页面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>

相关问题