Header Background Color Help

[Garrett]

I have an Accordion that I am using in my project. The header background color is bound to a value and this is working correctly. However, Once I expand the item out the header background becomes gray again until i expand out another item. Then that one becomes gray and the other converts back to it's original color.

Here is my XAML:

<expander:SfAccordion x:Name="accordionView"

                      ExpandMode="SingleOrNone"

                      BindableLayout.ItemsSource="{Binding AccordionData}">

        <BindableLayout.ItemTemplate>

            <DataTemplate>

                <expander:AccordionItem IsExpanded="{Binding IsExpanded}"

                                        HeaderBackground="{Binding HeaderBgColor}">

                    <expander:AccordionItem.Header>

                        <Grid HeightRequest="48">

                            <Label Text="{Binding Date}"

                                           Padding="16,14,0,14"

                                           CharacterSpacing="0.25"

                                           VerticalTextAlignment="Center"

                                           FontFamily="PoppinsMedium"

                                           FontSize="14"/>

                        </Grid>

                    </expander:AccordionItem.Header>

                    <expander:AccordionItem.Content>

                        <Grid ColumnSpacing="10" RowSpacing="2" BackgroundColor="#f4f4f4">

                            <Grid Margin="16,6,0,0">

                                <Grid.Resources>

                                    <Style TargetType="Label">

                                        <Setter Property="FontFamily" Value="PoppinsRegular"/>

                                    </Style>

                                </Grid.Resources>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="25"/>

                                    <RowDefinition Height="25"/>

                                    <RowDefinition Height="25"/>

                                    <RowDefinition Height="25"/>

                                    <RowDefinition Height="{OnPlatform Default=90,Android=90,WinUI=70, iOS=100,MacCatalyst=70 }"/>

                                    <!--<RowDefinition Height="Auto"/>-->

                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="100"/>

                                    <ColumnDefinition Width="150"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Frame Grid.RowSpan="4" BorderColor="Transparent" Grid.Row="0" Grid.Column="0" Padding="0" Margin="0,0,0,7">

                                    <Image Source="{Binding ImageFile}"/>

                                </Frame>

                                <Label Text="Weight" Grid.Column="1" Grid.Row="0" Margin="6,0,0,0"/>

                                <Label Text="{Binding Weight}" Grid.Row="0" Grid.Column="2"/>

                                <Label Text="Loss/Gain" Grid.Row="1" Grid.Column="1" Margin="6,0,0,0"/>

                                <Label Text="{Binding LossGain}" Grid.Row="1" Grid.Column="2"/>

                                <Label Text="Wegovy Dose" Grid.Row="2" Grid.Column="1" Margin="6,0,0,0"/>

                                <Label Text="{Binding WegovyDosage}" Grid.Row="2" Grid.Column="2"/>

                                <StackLayout Grid.Row="4" Grid.ColumnSpan="3" Orientation="Horizontal" Margin="0,0,0,0" HorizontalOptions="End">

                                    <Button BackgroundColor="{StaticResource NewBGColor}"

                                                    BindingContext="{StaticResource accordionDataViewModel}"

                                                    HeightRequest="20"

                                                    WidthRequest="140"

                                                    FontFamily="PoppinsMedium"

                                                    Margin="10,10,10,10"

                                                    Text="Edit Record"/>

                                    <Button BackgroundColor="{StaticResource HeaderRed}"

                                        HeightRequest="20"

                                        WidthRequest="140"

                                        FontFamily="PoppinsMedium"

                                        Margin="10,10,10,10"

                                        Text="Delete Record"

                                        Command="{Binding Source={StaticResource accordionDataViewModel}, Path=DeleteRecordCommand}"

                                        CommandParameter="{Binding Id}" />

                                </StackLayout>

                            </Grid>

                        </Grid>

                    </expander:AccordionItem.Content>

                </expander:AccordionItem>

            </DataTemplate>

        </BindableLayout.ItemTemplate>

    </expander:SfAccordion>

I found this:  Appearance | Accordion for Maui | Syncfusion but it doesn't seem to apply when using a BindingItem layout? Appreciate any help here!

[RiyasHameed MohamedAbdulKhader]

Hi Garett,

We have reviewed your reported query and would like to inform you that you can customize the accordion selection background using theme keys. We have prepared a simple sample to demonstrate how to disable the selection background and have attached it for your reference. Additionally, we have provided code snippet below for your reference.

Code snippet

<ContentPage xmlns=http://schemas.microsoft.com/dotnet/2021/maui

             xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml

             x:Class="ExpanderMAUI.MainPage"

             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Expander;assembly=Syncfusion.Maui.Expander"

             xmlns:syncTheme="clr-namespace:Syncfusion.Maui.Themes;assembly=Syncfusion.Maui.Core">

    <ContentPage.Resources>

        <syncTheme:SyncfusionThemeDictionary>

            <syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

                <ResourceDictionary>

                    <x:String x:Key="SfAccordionTheme">CustomTheme</x:String>

                    <Color x:Key="SfAccordionFocusedHeaderBackground">LightBlue</Color>

                </ResourceDictionary>

            </syncTheme:SyncfusionThemeDictionary.MergedDictionaries>

        </syncTheme:SyncfusionThemeDictionary>

    </ContentPage.Resources>

</ContentPage>

I hope this helps! Please feel free to reach out if you have any further questions or need further assistance.

Attachment: AccordionMAUI_8fe02463.zip

[Garrett]

Ever since I did this, 1) The Accordion still doesn't work properly, but now every control has it's background set to the color I put in that dictionary. How do I undo that?

[RiyasHameed MohamedAbdulKhader]

Garett,
We have reviewed your reported query, and we would like to inform you that a selection background will be applied to the accordion item after tapping on it, highlighting the selected item. To disable the selection, you need to set the focused header background color to match the header background color. You can refer to the sample we have attached in the previous update for further clarification.