Search code examples
xamlmauimaui-windows.net-maui.shell

How do I change app shell selected tab colour, MAUI?

I am building a windows app using .NET MAUI and I have a flyout shell with some tabs. I would like to change the colour of the selected item, specifically the little blue bar that shows at the left side of a selected item. shown here

I can not find anything that changes this, does anyone know if this is even possible?

Edit: I have tried the following code and played about with MenuItemTemplate, however I still can not change the colour of the little blue bar on selected items.

<Shell.MenuItemTemplate>
    <DataTemplate>
        <Grid ColumnDefinitions="0.2*,0.8*">
            <Image Source="home.png"
                   Margin="5"
                   HeightRequest="45"/>
            <Label Grid.Column="1"
                   Text="test"
                   FontAttributes="Italic"
                   VerticalTextAlignment="Center" 
                   />
            <Label Grid.Column="0"
                   Opacity="50"
                   BackgroundColor="Red"
                   />                
        </Grid>
    </DataTemplate>
</Shell.MenuItemTemplate>

This code results in the following:

Result

Solution

  • I found this select tab can be changed in the maui in windows/App.xaml.

     <maui:MauiWinUIApplication.Resources>
        <StaticResource x:Key="NavigationViewSelectionIndicatorForeground" ResourceKey="SystemControlForegroundAccentBrush" />
        <SolidColorBrush x:Key="SystemControlForegroundAccentBrush"  Color="Red" />

        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="#FF0000" />
  </maui:MauiWinUIApplication.Resources>

    This can change the SelectionIndicatorForeground color to red.