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

Question

我正在使用Xamarin Forms(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>

Answer 1

基本上,您可以关注此博客:Xamarin Forms - 带有SearchBar的ContentPage,在导航栏中ContentPage为每个详细信息页面进行自定义.

但由于XF的版本问题,Toolbar可能不会在发现OnCreateOptionsMenu的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:
    }
}

现在你可以使用这个SearchPageRenderer对Detail的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>

你可以在这里查看结果:

顺便说一句,我说的是纯XF中的解决方案,似乎你正在使用Prism,不太确定ContentPagePrism是什么样的,但我认为解决方案应该是类似的.