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

Question

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:

score 1 · Accepted Answer · answered Mar 09 '23 at 02:36

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.

score 0 · Answer 2 · answered Dec 14 '22 at 04:24

0

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.

answered Dec 14 '22 at 04:24

Guangyu Bai - MSFT

2,555
1
2
8

Thank you for the response, I have tried this but I still cannot edit the colour of the little blue bar on the left, do you have any idea where I'm going wrong? – Andrew Dec 14 '22 at 10:45
This is the windows format, and it can not be changed by using the style. You can change it in the windows11 setting ->Personalize -> Color to change the Windows colors. – Guangyu Bai - MSFT Dec 15 '22 at 07:13
Thank you, do you know if there is any way to stop MAUI using the windows colours as default and have it use a custom colour so that it can be consistent across users? @Guangyu – Andrew Dec 15 '22 at 13:54
This might belong to the UWP or WinUI3. Due to the maui is based on the winui3. – Guangyu Bai - MSFT Dec 16 '22 at 05:08
@Andrew I find the method to change the select bar color. Acturally, this is very easy to achieve. I post the new answer you can check it. – Guangyu Bai - MSFT Mar 09 '23 at 02:38

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

2 Answers2