Adding a Search Bar in the toolbar of a navigationpage in Prism

Question

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>

So somewhere above this NavigationPage should be a SearchBar:

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

score 5 · Answer 1 · edited Dec 09 '19 at 20:20

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

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:

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.

Adding a Search Bar in the toolbar of a navigationpage in Prism

1 Answers1

Linked