two colors in search bar

Eduardo Gomez Romero 225 Reputation points
2024-04-04T09:06:37.3466667+00:00

My collection View has a search.

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

    <Border Grid.Column="1">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="8" />
        </Border.StrokeShape>
        <SearchBar
            x:Name="SearchStudentBar"
            Grid.Column="1"
            Placeholder="Search for student">
            <SearchBar.Behaviors>
                <mct:EventToCommandBehavior
                    Command="{Binding SearchCommand}"
                    CommandParameter="{Binding Source={x:Reference SearchStudentBar}}"
                    EventName="TextChanged" />
            </SearchBar.Behaviors>
        </SearchBar>
    </Border>


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

        <CollectionView.ItemTemplate>

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

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

                    <Grid
                        ColumnDefinitions="Auto,*"
                        HorizontalOptions="FillAndExpand"
                        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
                            Grid.RowSpan="2"
                            Grid.Column="1"
                            FontFamily="Mat"
                            FontSize="Header"
                            HorizontalOptions="EndAndExpand"
                            Text="{x:Static helpers:IconFont.Email}"
                            TextColor="CornflowerBlue"
                            VerticalTextAlignment="Center">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding Path=ContactCommand, Source={x:RelativeSource AncestorType={x:Type vm:MyCoursesDetailPageViewModel}}}"
                                    CommandParameter="{Binding Email}" />
                            </Label.GestureRecognizers>
                        </Label>
                    </Grid>
                </Border>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>




.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,959 questions
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 69,311 Reputation points Microsoft Vendor
    2024-04-05T01:54:45.1166667+00:00

    Hello,

    If you want to set the same color as titlebar.

    And this titlebar color will be changed as system Theme changes.

    You can set the specific color for the titlebar and set the same color for your searchviews's backgroundcolor.

    You can open the App.xaml in the Platforms\Windows folder, add following code in the maui:MauiWinUIApplication tag, the title bar's background color can be changed by Background in Border control.

    <maui:MauiWinUIApplication
        x:Class="MauiApp8.WinUI.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:maui="using:Microsoft.Maui"
        xmlns:local="using:MauiApp8.WinUI">
        <maui:MauiWinUIApplication.Resources>
    
    
           <DataTemplate x:Key="MauiAppTitleBarTemplate">
    
    
               <Grid >
    
    
                   <Border
    
    
                     Canvas.ZIndex="1"
    
    
                     VerticalAlignment="Stretch"
    
    
                     Background="#e8e8e8"
    
    
                     Margin="0,0,0,0">
    
    
                       <!--
                        You can set the title for titlebar here
                         <TextBlock
    
    
                         Foreground="Red"
    
    
                         VerticalAlignment="Center"
    
    
                         HorizontalAlignment="Center"
    
    
                         Text="Custom your  application title"
    
    
                         FontWeight="Bold"/>-->
    
    
                   </Border>
                </Grid>
            </DataTemplate>
        </maui:MauiWinUIApplication.Resources>
    </maui:MauiWinUIApplication>
    

    I set the titlebar's color to Background="#e8e8e8", I do not have your searchView's code.

    I set the ContentPage's BackgroundColor="#e8e8e8" for testing.

    Best Regards,

    Leon Lu


    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.


0 additional answers

Sort by: Most helpful