在Prism导航页的工具栏中添加搜索栏 [英] Adding a Search Bar in the toolbar of a navigationpage in Prism

问题描述

我正在使用Xamarin Forms(Android和iOS)，并且正努力在汉堡包图标旁边直接添加搜索栏.对于导航，我使用的是MasterDetail页面.

I'm using Xamarin Forms (Android and iOS) and I'm struggeling with adding a Search Bar directly next to the hamburger icon. For the navigation I'm using a MasterDetail page.

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

So somewhere above this NavigationPage should be a SearchBar:

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

推荐答案

由于XF版本的问题，在MainActivity的OnCreateOptionsMenu中可能找不到Toolbar，如果可以，则可以更改代码例如，该博客中SearchPageRenderer的内容:

Due to the problem of XF's version, the Toolbar may not be found in OnCreateOptionsMenu of MainActivity, if so, you can change the code of SearchPageRenderer in that blog for example like this:

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:

And now you can use this SearchPageRenderer for the Detail of MasterDetailPage:

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

您可以在这里查看结果:

And you may check the result here:

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

By the way, I'm talking about the solution in pure XF, seems you're using Prism, not so sure what the ContentPage is like in Prism, but I think the solution should be similar.

这篇关于在Prism导航页的工具栏中添加搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！