DEV Community

Cover image for Flyout and Tab Icon States in .NET MAUI
David Ortinau
David Ortinau

Posted on

Flyout and Tab Icon States in .NET MAUI

#dotnet #programming

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?

Image description



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

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>
Enter fullscreen mode Exit fullscreen mode

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



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

Image description

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

GitHub logo dotnet / maui-samples

Samples for .NET Multi-Platform App UI (.NET MAUI)

.NET MAUI Samples

Samples built with .NET Multi-platform App UI (.NET MAUI).

.NET MAUI is a cross-platform framework for creating mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that can run on Android, iOS, iPadOS, macOS, and Windows from a single shared codebase.

Official Samples

Official samples can be accessed via the Samples browser.

Sample highlights include:

Community Samples

.NET MAUI Links

.NET Foundation

There are many .NET related projects on GitHub.

  • .NET home repo - links to hundreds of .NET projects, from Microsoft and the community.
  • ASP.NET Core home - the best place to start learning about ASP.NET…


View on GitHub


Top comments (1)

Collapse
 
caevan_sachinwalla_096886 profile image
Caevan Sachinwalla •

Thank you for your great article and sample code. Though, I am struggling to find and example where the flyout page is not the main page. In my project the user is required to log in first before accessing the navigation page. I have tried to adapt your code for this purpose. The Tab bar appears fine, but on the windows emulator, the Page with the Flyout appears a third into the page, The area to the left occupying about a third of the page is grey with the word login at the top, I have struggled to figure out what the issue is.