CODEWITHSUNDEEP
xamarinxamarin.forms
Deepak
Deepak

Reputation: 575

How to customize search bar in navigation bar in Xamarin forms

I am try to add search bar in navigation bar in both Xamarin.android and Xamarin.Ios. I have tried the below post it's working ' but I want to customise the searchbar text color and search bar image in that. Can you please suggest any idea.

I am tried link : https://www.linkedin.com/pulse/xamarin-forms-contentpage-searchbar-navigation-bar-vipin-mathews

enter image description here

When I apply above link code I am getting navigation bar like this and when user click on search image, search bar will be appear in navigation bar. In the above navigation bar dot's image is a toolbar images set order is 'Primary'. My requirement is show search image first then after showing the toolbar image, exactly swap the position's of search image too bar image in the above image. How can I achieve that.

Upvotes: 1

Views: 5432

Answers (2)

Marko Rothstein
Marko Rothstein

Reputation: 441

Please use this library.

SNavigationPage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:snav="clr-namespace:Stormlion.SNavigation;assembly=Stormlion.SNavigation"
             x:Class="Test.Page1"
             >
    <snav:SNavigationPage.NavContent>
        <Grid Margin="50, 0, 50, 0"
              >
            <SearchBar BackgroundColor="White"
                       Placeholder="Search ..."
                       />
        </Grid>
    </snav:SNavigationPage.NavContent>
    <ContentPage.Content>
        ...
    </ContentPage.Content>
</ContentPage>

Upvotes: 0

Steve Chadbourne
Steve Chadbourne

Reputation: 6953

You use the Priority property of the ToolbarItem to define the left to right order, not the Ordering property. I know, not confusing at all!

<ContentPage.ToolbarItems>
    <ToolbarItem Name="SearchItem" Icon="search.png" Priority="0" />
    <ToolbarItem Name="MoreItem" Icon="more.png" Priority="1" />
</ContentPage.ToolbarItems>

Read this great blog post about the Xamarin Forms Toolbar for more details

Upvotes: 2

Related Questions