Change colour of icon and text if selected in FlyoutItem

Question

I am trying to implement a sidebar that would have icons from font and while selecting one of them text of Label and Icon colour would change. I was able to implement this partly, but can't figure out how to:

1. Apply background colour to Flyout (currently it is still default black in NET7)
2. Change colour of icon if it is selected (currently colour does not change change on selection)
3. Change colour of Label text if it is selected (currently colour does not change change on selection)

Currently I have this:

I want to achieve this for selected item also FlyoutBackground="#111111" has no effect for some reason:

App.xaml:

 <Application.Resources>  
    <ResourceDictionary>  
      <ResourceDictionary.MergedDictionaries>  
        <ResourceDictionary Source="Resources/Styles/Colors.xaml" />  
        <ResourceDictionary Source="Resources/Styles/Styles.xaml" />  
      </ResourceDictionary.MergedDictionaries>  
  
      <Style x:Key="FloutItemStyle" TargetType="Grid">  
        <Setter Property="VisualStateManager.VisualStateGroups">  
          <VisualStateGroupList>  
            <VisualStateGroup x:Name="CommonStates">  
              <VisualState x:Name="Normal" />  
              <VisualState x:Name="Selected">  
                <VisualState.Setters>  
                  <Setter Property="BackgroundColor" Value="Transparent"/>  
                  <Setter TargetName="_label" Property="Label.TextColor" Value="Red" />  
                  <Setter TargetName="_image" Property="Image.Source" Value="Red" />  
                </VisualState.Setters>  
              </VisualState>  
            </VisualStateGroup>  
          </VisualStateGroupList>  
        </Setter>  
      </Style>  
    </ResourceDictionary>  
  </Application.Resources>  
  
  <Application.MainPage>  
    <Shell FlyoutWidth="90" FlyoutBehavior="{OnIdiom Phone=Disabled, Default=Locked}"   
           FlyoutBackground="#111111">  
  
      <Shell.FlyoutHeaderTemplate>  
        <DataTemplate>  
          <BoxView HeightRequest="50" Color="Transparent"/>  
        </DataTemplate>  
      </Shell.FlyoutHeaderTemplate>  
  
      <!-- Desktop/Tablet-->  
      <FlyoutItem Title="Home" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50, Color=Red}">  
        <ShellContent Title="Page1" Route="Page1" ContentTemplate="{DataTemplate page:Page1}">  
          <ShellContent.Icon>  
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="Red" Size="50"/>  
          </ShellContent.Icon>  
        </ShellContent>  
      </FlyoutItem>  
      <FlyoutItem Title="Settings" Icon="{FontImage FontFamily=FontAwesomeSolid, Glyph={x:Static helpers:FontAwesomeIcons.User}, Size=50}">  
        <ShellContent Title="Page2" Route="Page2" ContentTemplate="{DataTemplate page:Page2}">  
          <ShellContent.Icon>  
            <FontImageSource FontFamily="FontAwesomeSolid" Glyph="{x:Static helpers:FontAwesomeIcons.User}" Color="White" Size="50"/>  
          </ShellContent.Icon>  
        </ShellContent>  
      </FlyoutItem>  
  
      <Shell.ItemTemplate>  
        <DataTemplate>  
          <Grid Style="{StaticResource FloutItemStyle}">  
            <Grid.RowDefinitions>  
              <RowDefinition Height="50" />  
              <RowDefinition Height="25" />  
            </Grid.RowDefinitions>  
            <Image Source="{Binding FlyoutIcon}"  
                   Grid.Row="0"  
                   HeightRequest="40"  
                   Margin="5,0,5,0"  
                   HorizontalOptions="CenterAndExpand"  
                   x:Name="_image"/>  
            <Label Grid.Row="1"  
                   Text="{Binding Title}"  
                   TextColor="White"  
                   FontSize="Body"  
                   Padding="7,0,7,0"  
                   VerticalTextAlignment="Center"  
                   HorizontalTextAlignment="Center"  
                   x:Name="_label">  
            </Label>  
          </Grid>  
        </DataTemplate>  
      </Shell.ItemTemplate>  
  
    </Shell>  
  </Application.MainPage>  

Answer 1

Hello,

According to your distribution, all selected appearance doesn't work, you could check if you turn on the dark mode (dark theme) on your testing device, and you could respond to system theme changes in MAUI.

Currently, you set Label TextColor="White", it is exact value, so the style doesn't work. You can try to remove the setting:

                <Label Grid.Row="1"  
                    Text= "Binding Title"  
                    FontSize="Body"  
                    Padding="7,0,7,0"  
                    VerticalTextAlignment="Center"  
                    HorizontalTextAlignment="Center"  
                    x:Name="_label">  
                </Label>  

Besides, Image.Source should be an image, you set <Setter TargetName="_image" Property="Image.Source" Value="Red" />, the value is red color, you could try to design two images for different selecting state, or set background color for the image. If you have any other issues about the image, please feel free to post here.
Xaml:

<Image  Grid.Row="0"  
                    HeightRequest="40"  
                    Margin="5,0,5,0"  
                    HorizontalOptions="CenterAndExpand"  
                    x:Name="_image"/>  

Styles:

  <Style x:Key="FloutItemStyle" TargetType="Grid">  
                    <Setter Property="VisualStateManager.VisualStateGroups">  
                        <VisualStateGroupList>  
                        <VisualStateGroup x:Name="CommonStates">  
                            <VisualState x:Name="Normal">  
                                <VisualState.Setters>  
                                    <Setter Property="BackgroundColor"  
                                    Value="Transparent" />  
                                    <Setter TargetName="_label" Property="Label.TextColor" Value="{AppThemeBinding Light= Black, Dark=White}" />  
                                    <Setter TargetName="_image" Property="Image.Source" Value="{AppThemeBinding Light= unselected.png, Dark= unselected.png}" />  
                                </VisualState.Setters>  
                            </VisualState>  
                            <VisualState x:Name="Selected">  
                                <VisualState.Setters>  
                                    <Setter Property="BackgroundColor"  
                                    Value="{AppThemeBinding Light= {StaticResource Blue100Accent}, Dark=White}" />// change the bacground , you can remove it if you don't need  
                                    <Setter TargetName="_label" Property="Label.TextColor" Value="{AppThemeBinding Light= Red, Dark=White}" />  
                                    <Setter TargetName="_image" Property="Image.Source" Value="{AppThemeBinding Light= myicon.jpg, Dark= myicon.jpg}" />  
// or set <Setter TargetName="_image" Property="Image.BackgroundColor" Value="{AppThemeBinding Light= Red, Dark= White}" />  
                                </VisualState.Setters>  
                            </VisualState>  
                        </VisualStateGroup>  
                    </VisualStateGroupList>  
                </Setter>  
            </Style>  

Apply background colour to Flyout (currently it is still default black in NET7)

 <Shell  
       ......  
       FlyoutBackgroundColor="{AppThemeBinding Light=White, Dark={StaticResource Gray200}}"  
     >  

Best Regards,
Wenyan Zhang

---

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.