TabBar control does not function normally in IOS. But it works fine on Android.

[jamesnet214]

Description

Images from both apps are build results from the same source.

Android shows TabBar control, but I can't see it on the iPhone.

I just wrote this much code.

Full source code (GitHub)

<Application.MainPage>
    <Shell Title="Home">
        <TabBar x:Name="PhoneTabs">
            <Tab Title="Home" Icon="home.svg">
                <ShellContent ContentTemplate="{DataTemplate pages:HomePage}"/>
            </Tab>
            <Tab Title="About" Icon="information.svg">
                <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
            </Tab>
            <Tab Title="Setting" Icon="cog.svg">
                <ShellContent ContentTemplate="{DataTemplate pages:SettingPage}"/>
            </Tab>
        </TabBar>
    </Shell>
</Application.MainPage>

Steps to Reproduce

1. GitHub clone
2. Debug IOS

Version with bug

6.0.400

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

IOS all version

Did you find any workaround?

No response

Relevant log output

No response

[MissedSte4k]

I think it's the same problem I reported here https://github.com/dotnet/maui/issues/8974 Try launching the app after moveing App/AppShell.xaml to the same directory as your Page's. This will probably introduce you to another bug of Tab Icon being out of proportion and all over your screen if you use .png tho :D

[lccarvalho]

for me the problem is not that TabBar control does not work (even if App/AppShell is not in Pages folder), but the problem with ShellContent.Icon is real. If you run Microsoft Learn Astronomy sample you'll see images not scaling. I've tried to add : <MauiImage Update="Resources\Images\comet.png" BaseSize="225,225" /> to the project file but it didn't work as well.

[lccarvalho]

The source code relative to above comment: https://github.com/MicrosoftDocs/mslearn-dotnetmaui-create-multi-page-apps

[jskeet]

I've just been looking into this more - I've reproduced it by:

• Starting a new project with VS 17.3.0 (stable version)
• Adding four images to Resources/Images: home.png, home.svg, camera.png and camera.svg (where the png is basically just a screenshot of the svg)
• Changing AppShell.xml to the XML below
• Launching the project in the iPad simulator (iPad Mini 6th generation)

When using SVG icons, the simulator turns black and the app basically crashes. When using PNG icons, the app shows up fine.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ImageRepro.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ImageRepro"
    Shell.FlyoutBehavior="Disabled">
    <TabBar>
        <ShellContent Title="Page 1" Icon="home.svg"
                      ContentTemplate="{DataTemplate local:MainPage}" />
        <ShellContent Title="Page 2" Icon="camera.svg"
                      ContentTemplate="{DataTemplate local:MainPage}" />
    </TabBar>
</Shell>

[cyberguy98]

I had this exact problem as well and it seems that removing the .svg icon from the tab bar fixes the problem. (You have to clean the solution as well after making that change) Odd.

Edit

After more testing, turns out you can keep the icon - just remove the .svg extension from the icon.

<Tab Title="About" Icon="information">
    <ShellContent ContentTemplate="{DataTemplate pages:AboutPage}"/>
</Tab>