如何在 Android 上的 Xamarin.Forms 中的 NavigationBar 左侧添加 ToolbarItem？答案

【问题标题】：How to add ToolbarItem on the left side of NavigationBar in Xamarin.Forms on Android?如何在 Android 上的 Xamarin.Forms 中的 NavigationBar 左侧添加 ToolbarItem？
【发布时间】：2019-03-08 02:47:09
【问题描述】：

我需要有一个关闭按钮（在这种特殊情况下）左侧的导航栏 ，如下。我只需要它用于弹出窗口，因此其他元素/导航没有潜在问题。

Google 对此有一些建议，但我只看到了 iOS 示例（这在 iOS custom renderer 中并不是一件大事），但没有提示如何处理它（很容易) 与 Android。

为了清楚起见，Xamarin.Forms 需要它来定义类似于此（或代码隐藏）：

<ContentPage.ToolbarItems>
    <ToolbarItem Text="X" Priority="-1" Command="{Binding GoCancel}"/>
    <ToolbarItem Icon="icon_save" Command="{Binding GoSave}"/>
</ContentPage.ToolbarItems>

有什么想法吗？

【问题讨论】：

您也可以使用弹出页面的 PushModalAsync 并在此页面中设计具有关闭和刻度图像的顶部栏。既然你提到这是一个弹出窗口，最好使用 PushModalAsync 而不是 PushAsync
@hashimks，我没有使用任何类似“PushModal”的方法，因为我使用的是 MvvmCross 框架，它自己处理所有事情。所以，这只是 XF 布局问题。
我也在谈论同样的事情。您可以使用包含这些十字和勾号的布局设计此页面的顶层。您可以通过 PushModalAsync 简单地调用它...另一种方法是使用 TitleView。但是你会得到一个导航效果而不是像动画这样的弹出窗口。
你不明白我的意思。使用 MvvmCross，您永远不会（也绝对不能）调用与“PushModal”相关的任何内容......

标签： android xamarin.forms navigationbar custom-renderer

【解决方案1】：

在 Xamarin Forms 3.2 中，NavigationBar 提供了一种处理更复杂场景的新方法。它被称为TitleView。

有了这个，你可以将任何你想要的View 推送到NavigationBar。

XAML 示例：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationPageTitleView.TitleViewPage">
    <NavigationPage.TitleView>
        <Slider HeightRequest="44" WidthRequest="300" />
    </NavigationPage.TitleView>
    ...
</ContentPage>

【讨论】：

感谢您的回复。这个解决方案确实允许轻松添加按钮。但是，当在那里添加一些视图时，它会删除初始标题标签。这是否意味着，拥有标题的唯一方法是实现自定义标题（但它看起来会与标准外观不同）？
另外，你知道绑定会以哪种方式工作吗？标准 {Binding ...} 不允许绑定到页面 BindingContext。
确实，添加自定义视图的缺点是您需要“设计”它 - 所以模仿默认外观。并且还没有尝试自己设置绑定上下文，所以还不知道为什么或如何这样做......
如果您想要更高级的示例，请查看github.com/davidortinau/TheLittleThingsPlayground/blob/…
是的。这就是我想处理的方式。但问题是，在不同的平台上，标签大小（至少）可能不同（不提颜色等），所以这个特定视图的标题看起来与其他“标准”视图不同。但总的来说，您的答案解决了按钮添加简单的方法。

【解决方案2】：

有点晚了，但这会起作用，将其添加到将在 PushModalAsync 上调用的页面：

<NavigationPage.TitleView>
        <StackLayout Orientation="Horizontal" VerticalOptions="Center" Margin="20,0,0,0" Spacing="0">
            <ImageButton Source="img.png"
                         HorizontalOptions="Start"
                         Clicked="BackButton_Clicked"
                         HeightRequest="25"
                         WidthRequest="25"/>
        </StackLayout>
</NavigationPage.TitleView>

【讨论】：

一年半前的海报上面已经有完全一样的答案了！