two colors in search bar

Question

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>

Answer 1

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.