RC1 - Shell - Bottom tabs do not work in Windows and the icon is not displayed

[Sergtek]

Description

TabBar on Windows does not allow to be set to the bottom and the configured icons are not displayed, however on Android the same code works fine.

With the same code in Android it looks perfect, but in Windows the tabs appear above and without an icon, when they should appear below and with an icon:

Windows:

Android:

Steps to Reproduce

Run the following code on Windows and you will see that the TabBar appears at the top when it should be at the bottom and the icons do not appear. On Android it works fine:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiCollectionView.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiCollectionView">

    <TabBar>
        <Tab Title="Cats"
            Icon="dotnet_bot.svg">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}">
            </ShellContent>        
        </Tab>
        <Tab Title="Dogs"
            Icon="dotnet_bot.svg">
            <ShellContent
                ContentTemplate="{DataTemplate local:MainPage}">
            </ShellContent>        
        </Tab>
    </TabBar>
</Shell>

Version with bug

Release Candidate 1 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 11

Did you find any workaround?

No response

Relevant log output

No response

[kristinx0211]

verified repro on windows. seemsIcon="xxxx.svg" does not work, if change to Icon="xxxxx.png"can work.

[pierre01]

I noticed similar issues in windows and also was wondering...

Are the tabs automatically changed into menus in windows?

Bottom tabs being top menus and top tabs being their submenus ?

[GDT48]

I also see this in Windows where TabBar is at top of screen and Icons not shown, actually shows a box. However, in Android simulator I see TabBar at bottom of screen, as expected, but Icons NOT shown, again shows a box.

Any progress to fix?

[GDT48]

Note, although the images are .svg I reference them as .png in the XAML. Need to do this for FlyoutItems and MenuItems to get them to show.

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[XamlTest]

Verified this on Visual Studio Enterprise 17.6.0 Preview 4.0. Repro on Windows 11 with below Project: 6369.zip

[joshball]

I can verify this is still an issue, a year later. Is there anyone who can give some background on this? In particular, why it would not be fixed, or at least, noted in the documentation?

Maybe this is by design as a Windows App (as opposed to a mobile app)? And if by design, is there a workaround (other than creating your own controls?)

[IlyaSemenchenkoIfs]

I can confirm it's still an issue. Any possible workarounds?

[Foda]

@joshball Tabs don't work on the bottom on Windows because the underlying control is actually a NavigationView, which by default doesn't support that. However, you can work around it by modifying the default style of the NavigationView in the Windows-specific styles as mentioned here (put it under Platforms/Windows/App.xaml): https://learn.microsoft.com/en-us/answers/questions/1120972/winui3-navigationview-panedisplaymode-bottom

[vancongminh24]

Hi @Foda, do you know how to add new style into Platforms/Windows/App.xaml to override the default NavigationView? The current root node is "maui:MauiWinUIApplication" and it does not recognize the Resources or any WinUI3 components.

[vancongminh24]

@Foda I have found my issue, just select windows option on the top left dropdown list. Thanks.

[pme442]

I tried that workaround, but the tabs keep showing up at the top of the window. Are there any new workarounds to try? (This wasn't an issue in Xamarin Forms.)

[sbloom82]

I also attempted to work around this issue to get the tab bar at the bottom of the window without success. Hoping this can be fixed soon.

Icons do show as expected, however.

[pme442]

Any updates on this?