Customizing .NET MAUI Shell

[giscus[bot]]

Customizing .NET MAUI Shell

The article demonstrates how to customize .NET MAUI Shell for Android and iOS/MacCatalyst platforms, offering step-by-step guidance, code examples, and a link to the GitHub repository containing full examples for practical usage.

https://vladislavantonyuk.github.io/articles/Customizing-.NET-MAUI-Shell/

[khalil2099]

Hi, is it possible to change selected and unselected tab bar image ?

[VladislavAntonyuk]

You can try achieving it using Styles. It should be simpler and in that case, you don't need to implement it for each platform.

If it doesn't work, you still have access to each child (e. g. Android CustomShellSectionRenderer line 20)

[19bartek92]

Hi, do You have idea why toolbar in not floating over content?
It's only android case. I have flags like WindowManagerFlags.LayoutNoLimits but it's always above without floating effect.

[VladislavAntonyuk]

Check if you set margin for this layout

[v283]

have you solved this problem? and how?

[camimu71]

Hi Vladislav,

If you change from dark mode to light mode the background does not change until you restart the application. Do you know how this can be solved?

Thk.

[VladislavAntonyuk]

Hello,

Check if SetAppearance method is called. The background color is set there.

[camimu71]

Thk Vladislav.

I'm not talking about the background of the navigation bar. When padding, the space left at the borders of the app does not change when you go from one mode to another (dark to light or light to dark).

Thk.

[VladislavAntonyuk]

if I remember correctly it should be a part of the content page. and it should be changed with background color. you can try to change the color using Button Click, if the color changes on Button click, but doesn't change automatically on Theme change, you can also subscribe to ThemeChanged event and try set the color manually

[Softtinn]

Great content, as always @VladislavAntonyuk!

Is it possible to have a custom tab where the data first must be fetched from an API? For example, we would like to fetch the user profile from a remote API and then use the thumbnail profile picture as the tab content (instead of text and icon).

Would you say this is doable, or should we consider something else rather than Shell tabs?

Thanks a lot in advance!

[VladislavAntonyuk]

Shell is the recommended way for navigation in .NET MAUI.
You only need to replace the icon with the user icon. Something like this should work for you:

<Tab Title="{Binding UserName}"
     Icon="{Binding UserIcon}">

    <ShellContent ContentTemplate="{DataTemplate views:ProfilePage}" />
</Tab>

[PepeR0nni]

Hello, is it possible to add à searchBar or customSearchBar in the custom toolBar ?

[VladislavAntonyuk]

Yes, you get access to the platform control and add content you need.

[PepeR0nni]

Here is the Figma exemple I want to create : https://drive.google.com/file/d/1faRwvW89MPBa--WGJnnxqPiItuu8kHbi/view?usp=drive_link (when its closed)

https://drive.google.com/file/d/1n_iRWC6cx4S0n0SReTB0PWIwAvRYu8Fu/view?usp=drive_link
(when its opened)

(I use a backdrop page from Syncfusion). When the backdrop is closed, it just show the shell tool bar and when its opened, it show the tool bar with content in the page (filtrers here).

I need to put my custom searchBar in the shell toolbar like the exemple (to filter by search queries restaurants from my DB).

How can I do it ?

Thanks in advance !

[PepeR0nni]

I find a solution sorry for the inconvenience 😅

[VladislavAntonyuk]

that is great, you app looks really beautiful

[PepeR0nni]

Thanks you !

[ghost]

Is there a way to do this using the TabbedPage instead shell with tabs?

[MattePozzy]

Hi,
thank you for this solution. I would like to change the hamburger menu dynamically so I need to get it from this ShellRenderer.
On Android I have get the icon in this way but I don't know how to change it by assign a FontImageSource.

public override void SetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
{
    base.SetAppearance(toolbar, toolbarTracker, appearance);

    if (toolbarTracker.CanNavigateBack == false)
    {
        FontImageSource icona = new()
        {
            Color = Colors.Green,
            FontFamily = "FontIcone",
            Glyph = MaterialFontIcons.Abacus,
        };

        Image img = new() { Source = icona };

        toolbar.NavigationIcon = ??;
    ```

[VladislavAntonyuk]

Hi, I don't have exact solution, but start from the end. toolbar.NavigationIcon is Android Bitmap (or similar image type). Create an instance of this type. There should be some methods to create it from Font

[rlee923]

Hey Vladislav. Thanks for posting and the making the code available.
I was wondering if it's possible to apply style subtab upper bar as well.
could you give us some hints for this?
Thanks

[rlee923]

I also would like to remove the text at the bottom tabbar and display image only and use full height of the space of the image. Is this possible?

[VladislavAntonyuk]

Hey, do you have a screenshot of the expected result?

[rlee923]

https://ibb.co/YTB9vrT
I have managed to remove the label in the bottom tab but I not sure how to do the image resize.
Much appreciate your help!

[rlee923]

actually I still haven't figured out how to remove tabbar label within IOS. Could you help me with this as well?