Changed Expanded Text Color

[Joseph Cigno]

I would like to change the black header text in the Expanded state to white and leave the text in the Collapsed state black.

[Sethupathy Devarajan]

Hi Joseph Cigno,

You need to customize the header label text color to be white in the expanded state and black in the collapsed state. We have achieved this by binding the TextColor property of the Label inside the Header to the IsExpanded property of SfExpander using a DataTrigger. We have shared the code snippet, sample, and demo video for your reference.

Code snippet:

<syncfusion:SfExpander IsExpanded="False">

    <syncfusion:SfExpander.Header>

        <Label Text="Header"

               Background="RoyalBlue"

               FontSize="16"

               Margin="14,2,2,2"

               VerticalOptions="Center"

               VerticalTextAlignment="Center">

            <Label.Triggers>

                <DataTrigger TargetType="Label"

                             Binding="{Binding Source={RelativeSource AncestorType={x:Type syncfusion:SfExpander}}, Path=IsExpanded}"

                             Value="True">

                    <Setter Property="TextColor"

                            Value="White" />

                </DataTrigger>

                <DataTrigger TargetType="Label"

                             Binding="{Binding Source={RelativeSource AncestorType={x:Type syncfusion:SfExpander}}, Path=IsExpanded}"

                             Value="False">

                    <Setter Property="TextColor"

                            Value="Black" />

                </DataTrigger>

            </Label.Triggers>

        </Label>

    </syncfusion:SfExpander.Header>

    <syncfusion:SfExpander.Content>

        <Grid Padding="18,8,0,18">

            <Label CharacterSpacing="0.25"

                   FontFamily="Roboto-Regular"

                   Text="11:03 AM, 15 January 2019"

                   FontSize="14"

                   VerticalOptions="CenterAndExpand" />

        </Grid>

    </syncfusion:SfExpander.Content>

</syncfusion:SfExpander>

Regards,

Sethupathy D.

Attachment: SfAccordianSample_d6a231ab.zip

[Joseph Cigno]

I worked with your team on this design using SfAccordion.    I have applied what I thought I needed from your code, but still no luck, the expanded remains black.

SfAccordion

<ContentPage

    x:Class="AvalonEventTrackerApp.Views.EventTrackerPage"

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

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

    xmlns:local="clr-namespace:AvalonEventTrackerApp.Views"

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

    xmlns:buttons="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"

    xmlns:viewmodel="clr-namespace:AvalonEventTrackerApp.ViewModel"

    Title="Events">

    <ContentPage.BindingContext>

        <viewmodel:EventTrackerViewModel/>

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <Style TargetType="accordion:AccordionItem">

            <Setter Property="VisualStateManager.VisualStateGroups">

                <VisualStateGroupList>

                    <VisualStateGroup>

                        <VisualState Name="Expanded">

                            <VisualState.Setters>

                                <Setter Property="HeaderBackground" Value="{StaticResource PrimaryDark}" />

                                <Setter Property="HeaderIconColor" Value="White" />

                            </VisualState.Setters>

                        </VisualState>

                        <VisualState Name="Collapsed">

                            <VisualState.Setters>

                                <Setter Property="HeaderBackground" Value="{StaticResource Secondary}" />

                                <Setter Property="HeaderIconColor" Value="Black" />

                            </VisualState.Setters>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateGroupList>

            </Setter>

        </Style>

    </ContentPage.Resources>

    <ContentPage.Content>

        <StackLayout>

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

                <accordion:SfAccordion Grid.Row="0" x:Name="accordion" BindableLayout.ItemsSource="{Binding Source}" >

                    <BindableLayout.ItemTemplate>

                        <DataTemplate>

                            <accordion:AccordionItem IsExpanded="{Binding IsExpanded}">

                                <accordion:AccordionItem.Header>

                                    <Grid HeightRequest="48">

                                        <Label Text="{Binding Question}" Margin="16,14,0,14" CharacterSpacing="0.25" FontFamily="Roboto-Regular" FontSize="14" >

                                            <Label.Triggers>

                                                <DataTrigger TargetType="Label"

                                                              Binding="{Binding Source={RelativeSource AncestorType={x:Type accordion:SfAccordion}}, Path=IsExpanded}" Value="True">

                                                    <Setter Property="TextColor" Value="White" />

                                                </DataTrigger>

                                                <DataTrigger TargetType="Label"

                                                             Binding="{Binding Source={RelativeSource AncestorType={x:Type accordion:SfAccordion}}, Path=IsExpanded}" Value="False">

                                                    <Setter Property="TextColor" Value="Black" />

                                                </DataTrigger>

                                            </Label.Triggers>

                                        </Label>

                                    </Grid>

                                </accordion:AccordionItem.Header>

                                <accordion:AccordionItem.Content>

                                    <buttons:SfRadioGroup x:Name="radioGroup" CheckedChanged="radioGroup_CheckedChanged"

                                                          BindableLayout.ItemsSource="{Binding Answers}" >

                                        <BindableLayout.ItemTemplate>

                                            <DataTemplate>

                                                <buttons:SfRadioButton Text="{Binding Answer}" IsChecked="{Binding IsChecked}" CheckedColor="{StaticResource Primary}"/>

                                            </DataTemplate>

                                        </BindableLayout.ItemTemplate>

                                    </buttons:SfRadioGroup>

                                </accordion:AccordionItem.Content>

                            </accordion:AccordionItem>

                        </DataTemplate>

                    </BindableLayout.ItemTemplate>

                </accordion:SfAccordion>

.  

[Sethupathy Devarajan]

Hi Joseph Cigno,

 

Previously, the issue was that you were binding the IsExpanded property to the SfAccordion instead of the AccordionItem. The SfAccordion acts as a container for multiple items but does not track the expanded state of individual AccordionItem elements. This caused the triggers for changing the text color to not work as expected. The incorrect approach attempted to bind IsExpanded using {RelativeSource AncestorType={x:Type accordion:SfAccordion}}, which does not reflect the expansion state of each item.

 

To fix this, we correctly bound IsExpanded to AccordionItem instead by changing {x:Type accordion:SfAccordion} to {x:Type accordion:AccordionItem} in the trigger binding. This ensures that each AccordionItem individually controls its header text color when expanded or collapsed. Now, when an item expands, the text color turns white, and when it collapses, it turns black, providing the expected behavior.

 

We had shared the modified sample for your reference.

Regards,
Sethupathy D.

Attachment: SfAccordianSample_(2)_10f2ea36.zip

[Joseph Cigno]

Thanks for the excellent support.  Your team is the best!!!!

[Sethupathy Devarajan]

Hi Joseph Cigno,

 

Thank you for your kind words. We are glad to know that the provided solution worked on your end. Please let us know if you have any further questions. We are happy to help.

Regards,
Sethupathy D.