如何在 Xamarin 表单的导航栏中自定义搜索栏答案

【问题标题】：How to customize search bar in navigation bar in Xamarin forms如何在 Xamarin 表单的导航栏中自定义搜索栏
【发布时间】：2018-03-23 23:24:54
【问题描述】：

我正在尝试在 Xamarin.android 和 Xamarin.Ios 的导航栏中添加搜索栏。我已经尝试过下面的帖子，它正在工作，但我想在其中自定义搜索栏文本颜色和搜索栏图像。你能提出任何想法吗？

我试过链接：https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews

当我应用上面的链接代码时，我会得到这样的导航栏，当用户点击搜索图像时，搜索栏将出现在导航栏中。在上面的导航栏中点的图像是一个工具栏图像，设置顺序是'Primary'。我的要求是先显示搜索图像，然后在显示工具栏图像后，将搜索图像的位置与上图中的条形图像完全交换。我怎样才能做到这一点。

【问题讨论】：

我已经完成了与您相同的教程，但我有两个问题。首先是当我点击 SeachBar 时光标没有显示。主要的一个是当我按下返回按钮返回 SearchPage 时，导航视图不存在。有什么建议吗？

标签： xamarin xamarin.forms

【解决方案1】：

您使用 ToolbarItem 的 Priority 属性来定义从左到右的顺序，而不是 Ordering 属性。我知道，一点也不混乱！

<ContentPage.ToolbarItems>
    <ToolbarItem Name="SearchItem" Icon="search.png" Priority="0" />
    <ToolbarItem Name="MoreItem" Icon="more.png" Priority="1" />
</ContentPage.ToolbarItems>

Read this great blog post about the Xamarin Forms Toolbar for more details

【讨论】：

感谢史蒂夫，我们可以设置工具栏项目的优先级，但是在上面的导航栏搜索图像中我没有添加。由于使用自定义渲染器在导航栏中添加了搜索栏，因此我得到了上述链接。你能建议一下吗？如果您打开上面的链接，您可以清楚地了解。
查看链接，导航栏全部通过自定义 Android 代码和渲染器处理。工具栏项添加到顶部附近的 XML 中。我认为如果您想添加更多按钮，然后更新渲染器以像使用搜索按钮一样抓取按钮并将其连接到 PCL 中的代码，则必须更改此设置。

【解决方案2】：

请使用这个库。

SNavigationPage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:snav="clr-namespace:Stormlion.SNavigation;assembly=Stormlion.SNavigation"
             x:Class="Test.Page1"
             >
    <snav:SNavigationPage.NavContent>
        <Grid Margin="50, 0, 50, 0"
              >
            <SearchBar BackgroundColor="White"
                       Placeholder="Search ..."
                       />
        </Grid>
    </snav:SNavigationPage.NavContent>
    <ContentPage.Content>
        ...
    </ContentPage.Content>
</ContentPage>

【讨论】：