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

Posted 2023-04-13

【中文标题】在 Prism 导航页面的工具栏中添加搜索栏

【英文标题】：Adding a Search Bar in the toolbar of a navigationpage in Prism

【发布时间】：2018-04-16 05:16:23

【问题描述】：

我正在使用 Xamarin 表单（android 和 ios），我正在努力在汉堡图标旁边直接添加一个搜索栏。对于导航，我使用的是 MasterDetail 页面。

<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>

所以这个 NavigationPage 上方的某个地方应该是一个 SearchBar：

<SearchBar Grid.Row="0" Grid.Column="0" Margin="15" x:Name="search"></SearchBar>

【参考方案1】：

由于XF的版本问题，OnCreateOptionsMenu的OnCreateOptionsMenu可能找不到Toolbar，如果是这样，你可以在那个博客中更改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:
    

现在您可以将这个SearchPageRenderer 用于MasterDetailPage 的Detail：

<local:SearchPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YOURNAMESPACE"
             x:Class="YOURNAMESPACE.DetailPage"
             Title="Detail 1">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</local:SearchPage>

您可以在这里查看结果：

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