search bar in Navbar

Eduardo Gomez Romero 1,355 Reputation points
2024-04-06T02:49:50.63+00:00

On Andriod

I have this

User's image

So I was wondering if there is a way to put the search bar on top, so it would look like this.

User's image

This is the page that has the search


    <Grid
        ColumnDefinitions="*,*,*"
        RowDefinitions="Auto,*">

        <Grid
            Grid.ColumnSpan="3"
            BackgroundColor="{OnIdiom Desktop=#e8e8e8,
                                      Phone=#502bd4}">

            <Grid
                Grid.Column="1"
                HorizontalOptions="Center">
                <Border
                    Margin="10"
                    StrokeThickness="{OnIdiom Desktop=1,
                                              Phone=0}">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="8" />
                    </Border.StrokeShape>
                    <local:BorderlessSearchBar
                        x:Name="SearchStudentBar"
                        Placeholder="Search for student"
                        WidthRequest="400">
                        <local:BorderlessSearchBar.Behaviors>
                            <mct:EventToCommandBehavior
                                Command="{Binding SearchCommand}"
                                CommandParameter="{Binding Source={x:Reference SearchStudentBar}}"
                                EventName="TextChanged" />
                        </local:BorderlessSearchBar.Behaviors>
                    </local:BorderlessSearchBar>
                </Border>
            </Grid>
        </Grid>

        <CollectionView
            Grid.Row="1"
            Grid.ColumnSpan="3"
            Margin="20"
            HorizontalOptions="Center"
            ItemsSource="{Binding Students}">

            <CollectionView.ItemTemplate>

                <DataTemplate x:DataType="model:DemyUser">

                    <Border
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="2">

                        <Grid
                            Margin="10"
                            ColumnDefinitions="*,*"
                            RowDefinitions="20,20">

                            <Label
                                FontAttributes="Bold"
                                Text="{Binding DemyId, StringFormat='Id: {0}'}" />

                            <Label
                                Grid.Row="1"
                                FontAttributes="Bold"
                                Text="{Binding FullName, StringFormat='Name: {0}'}" />

                            <Label
                                x:Name="ContactLbl"
                                Grid.RowSpan="2"
                                Grid.Column="1"
                                FontFamily="Mat"
                                FontSize="40"
                                HorizontalOptions="EndAndExpand"
                                Text="{x:Static helpers:IconFont.Email}"
                                VerticalTextAlignment="Center">
                                <Label.GestureRecognizers>
                                    <PointerGestureRecognizer
                                        PointerEnteredCommand="{Binding Path=ContactPointerEnteredCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}"
                                        PointerEnteredCommandParameter="{Binding Source={x:Reference ContactLbl}}"
                                        PointerExitedCommand="{Binding Path=ContactPointerExitedCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}"
                                        PointerExitedCommandParameter="{Binding Source={x:Reference ContactLbl}}" />
                                </Label.GestureRecognizers>
                            </Label>
                        </Grid>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Grid>

</ContentPage>


I could also set the navigation bar to false or this page only, but if I do this, I get rid of the back button.

Developer technologies | .NET | .NET MAUI
0 comments No comments
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff
    2024-04-08T02:47:39.5933333+00:00

    Hello,

    So I was wondering if there is a way to put the search bar on top, so it would look like this.

    MAUI provides the TitleView UI interface for customization of NavigationBar. You can use it to place the SearchBar into the navigation bar when using Shell or NavigationPage.

    Please refer to the following code and documentation:

    <Shell.TitleView>
    	<SearchBar Text="test" TextColor="White"/>
    </Shell.TitleView>
    
    <NavigationPage.TitleView>
    	<SearchBar Text="test" TextColor="White"/>
    </NavigationPage.TitleView>
    

    Best Regards,

    Alec Liu.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.