Can I set a background image for the bottom tab bar of the Shell in .NET MAUI?

Question

Is it possible to add a background image to the bottom tab bar in a .NET MAUI Shell application? (gray bar in the attached image)

UPDATE: this is what I would like to achieve:

What you do mean by "background" image? Do you want to set two images, one for the foreground and another one for the background? — Julian, Mar 21 '23 at 11:26
@FreakyAli It's an SVG file, I've got from the designer, but ultimately I would be satisfied with a runtime gradient solution too. — egyedg, Mar 21 '23 at 11:42

score -1 · Answer 1 · answered Mar 22 '23 at 06:15

-1

You can use the gradient to set the TabBarBackgroundColor.

First, you can make a LinearGradientBrush like this below.

<LinearGradientBrush
    x:Key="TabBarGradient"
    EndPoint="1,0">
    <GradientStop
        Color="{StaticResource Yellow100Accent}"
        Offset="0.1" />
    <GradientStop
        Color="{StaticResource Blue200Accent}"
        Offset="1.0" />
</LinearGradientBrush>

Second, you can write the style for the tabbar:

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="{AppThemeBinding Light={StaticResource TabBarGradient}, Dark={StaticResource TabBarGradient}}" />
    
</Style>

In addition, you can also use the image to set the tabbarbackground.

<ResourceDictionary>
    <Style TargetType="Shell" ApplyToDerivedTypes="True">
        <Setter Property="Shell.TabBarBackgroundColor" Value="image.svg" />
        ....
    </Style>
</ResourceDictionary>

answered Mar 22 '23 at 06:15

Guangyu Bai - MSFT

2,555
1
2
8

Thanks for the reply. Unfortunately neither of the options works. The LineartGradientBrush does not have any visible effect and setting the image.svg for the value generates a compile time error stating it cannot be converted to Microsoft.Maui.Graphics.Color. Looks like Shell.TabBarBackgroundColor is of type Color and no other type can be assigned to it and there is no Shell.TabBarBackground or other exposed property to set the background as Brush or image type. – egyedg Mar 23 '23 at 09:18
Properly you need to use the handler to customize the tabbar for each platform. The Maui did not provide the method to change the tabber background by using the image. – Guangyu Bai - MSFT Mar 24 '23 at 08:42
1

There is no property exposed that works with Brush (e.g. `Shell.TabBackground`), only the one which accepts Color. So this will not work. – Michael Apr 17 '23 at 21:52

Can I set a background image for the bottom tab bar of the Shell in .NET MAUI?

1 Answers1