在Prism的导航页面的工具栏中添加搜索栏

Question

我正在使用Xamarin Forms（Android和iOS），我很想在汉堡图标旁边添加一个搜索栏。对于导航我正在使用MasterDetail页面。

$ tail -F access_log | grep test
10.108.57.6 - - [03/Nov/2017:12:35:55 +0000] "GET /test HTTP/1.1" 404 202 "-" "curl/7.11.0 (i686-pc-linux-gnu) libcurl/7.11.0 OpenSSL/1.0.2d ipv6 zlib/1.1.3" 161

$ tail -F access_log | grep test | grep test
# nothing

$ tail -F access_log | grep test | sed 's/test/asd/g'
# nothing

$  tail -F access_log | sed 's/test/asd/g' | grep asd
10.108.57.6 - - [03/Nov/2017:12:44:58 +0000] "GET /asd HTTP/1.1" 404 202 "-" "curl/7.11.0 (i686-pc-linux-gnu) libcurl/7.11.0 OpenSSL/1.0.2d ipv6 zlib/1.1.3" 143

因此，此NavigationPage上方应该是SearchBar：

<MasterDetailPage.Master>
        <!-- title on navigationpage is required -->
        <NavigationPage Title=" " Icon="hamburger_icon.png">
            <x:Arguments>
                <ContentPage Icon="hamburger_icon.png">
                    <StackLayout>

                        <controls:MenuButton Text="Home"
                                                 Command="{Binding NavigateCommand}" 
                                                 CommandParameter="Navigation/Dashboard">
                        </controls:MenuButton>

                        <controls:MenuButton Text="Test"
                                                 Command="{Binding NavigateCommand}" 
                                                 CommandParameter="Navigation/Dashboard">
                        </controls:MenuButton>

                    </StackLayout>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Master>

Answer 1

您基本上可以关注此博客：Xamarin Forms - ContentPage with SearchBar in the Navigation bar为每个详细信息页面自定义ContentPage。

但是由于XF版本的问题，Toolbar的{​​{1}}中可能找不到OnCreateOptionsMenu，如果是这样，您可以更改{{1}的代码1}}在该博客中，例如：

MainActivity

现在，您可以将此SearchPageRenderer用于public class SearchPageRenderer : PageRenderer { private Android.Support.V7.Widget.SearchView searchView; private Android.Support.V7.Widget.Toolbar toolbar; /// <summary> /// Reaction on the disposing of the page. /// </summary> /// <param name="disposing">A value indicating whether disposing.</param> protected override void Dispose(bool disposing) { if (this.searchView != null) { this.searchView.QueryTextChange -= this.OnQueryTextChangeSearchView; } this.toolbar?.Menu?.RemoveItem(Resource.Menu.mainmenu); base.Dispose(disposing); } /// <summary> /// Reaction on the element changed event. /// </summary> /// <param name="e">The event argument.</param> /// protected override void OnElementChanged(ElementChangedEventArgs<Page> e) { base.OnElementChanged(e); if (e?.NewElement == null || e.OldElement != null) { return; } this.AddSearchToToolBar(); } /// <summary> /// Adds a search item to the toolbar. /// </summary> private void AddSearchToToolBar() { var mainactivity = Xamarin.Forms.Forms.Context as MainActivity; this.toolbar = mainactivity.FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar); var bar = mainactivity.SupportActionBar; if (toolbar != null) { this.toolbar.Title = this.Element.Title; this.toolbar.InflateMenu(Resource.Menu.mainmenu); this.searchView = this.toolbar.Menu?.FindItem(Resource.Id.action_search)?.ActionView?.JavaCast<Android.Support.V7.Widget.SearchView>(); if (this.searchView != null) { this.searchView.QueryTextChange += this.OnQueryTextChangeSearchView; //Other codes goes here. } } } private void OnQueryTextChangeSearchView(object sender, Android.Support.V7.Widget.SearchView.QueryTextChangeEventArgs e) { //TODO: } } 的{​​{1}}：

SearchPageRenderer

你可以在这里查看结果：

顺便说一下，我在谈论纯XF中的解决方案，似乎你正在使用Prism，不太确定Detail在Prism中是什么样的，但我认为解决方案应该是相似。