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

1.6k Views Asked by At

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

2

There are 2 best solutions below

0
On BEST ANSWER

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.

5
On

You can use the Shell.MenuItemTemplate to customize the item.

  <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="0.2*,0.8*">
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
  </Shell.MenuItemTemplate>

  <Shell.Resources>
        <Style TargetType="Image" Class="FlyoutItemImageStyle">
            <Setter Property="Background"  
            Value="AliceBlue"></Setter>
        </Style>
  </Shell.Resources>

For more information you can refer to Define MenuItem appearance. In addition, I find a sample and you can check this How to set the Color of Icons in FlyoutItems in AppShell.