Most .NET MAUI apps will use a flyout, a sidebar (fixed flyout), or tabs (top or bottom) to move between content views. A key UX principal is wayfinding, helping the user understand the structure of the application (or information), especially where they are within that structure.

And so, flyout items and tabs support normal and selected visual states by default in .NET MAUI. But what if you add an image?

<FlyoutItem Title="Home" FlyoutIcon="tab_home.png">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>

Now your selected state isn't any different than your normal state because you only have the one look. By using state triggers, we can easily provide a style that swaps out the normal images with a selected image. A FlyoutItem is an alias to ShellItem with the property IsChecked that will update when the user navigates with the flyout. A trigger watches the property and fires anytime it changes.

<Style TargetType="FlyoutItem" x:Key="HomeFlyout">
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="False">
            <Setter Property="FlyoutIcon" Value="tab_home.png"/>
        </Trigger>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="True">
            <Setter Property="FlyoutIcon" Value="tab_home_on.png"/>
        </Trigger>
    </Style.Triggers>
</Style>

Now you can remove the fixed image assignment and specify the style.

<FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>

Much better! Some text labels would be another beneficial element to include.