dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.21k stars 1.75k forks source link

The bottom tab bar is invisible after setting Shell.CurrentItem #11003

Open saber-wang opened 2 years ago

saber-wang commented 2 years ago

Description

The bottom tab bar is invisible after setting Shell.CurrentItem

image

Steps to Reproduce

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="ShellTabBarSample.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ShellTabBarSample"
    Shell.FlyoutBehavior="Disabled"
    Shell.CurrentItem="{x:Reference Two}">

    <TabBar>
        <Tab Title="One" Icon="{StaticResource IconOne}">
            <ShellContent
                Title="One"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="OnePage" /> 
        </Tab>
        <Tab Title="Two"  Icon="{StaticResource IconTwo}">
            <ShellContent
                Title="Two" x:Name="Two"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="TwoPage" />
        </Tab>
        <Tab Title="Three" Icon="{StaticResource IconThree}">
            <ShellContent
                Title="Three"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="ThreePage" />
        </Tab>
        <Tab Title="Four" Icon="{StaticResource IconFour}">
            <ShellContent
                Title="Four"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="FourPage" />
        </Tab>
    </TabBar>
</Shell>

Link to public reproduction project repository

https://github.com/saber-wang/ShellTabBarSample.git

Version with bug

7.0 Release Candidate 2

Last version that worked well

Unknown/Other

Affected platforms

Android, Windows

Affected platform versions

android 9 windows10.0.19041.0

Did you find any workaround?

I tried all options again and found that the setting TabBar. CurrentItem is valid Example:

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

    <TabBar CurrentItem="{x:Reference Two}">
        <Tab Title="One" Icon="{StaticResource IconOne}">
            <ShellContent
                Title="One"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="OnePage" />
        </Tab>
        <Tab Title="Two"  Icon="{StaticResource IconTwo}">
            <ShellContent
                Title="Two" x:Name="Two"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="TwoPage" />
        </Tab>
        <Tab Title="Three" Icon="{StaticResource IconThree}">
            <ShellContent
                Title="Three"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="ThreePage" />
        </Tab>
        <Tab Title="Four" Icon="{StaticResource IconFour}">
            <ShellContent
                Title="Four"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="FourPage" />
        </Tab>
    </TabBar>
</Shell>

image

Relevant log output

No response

ghost commented 2 years ago

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.

ghost commented 2 years ago

Hi @saber-wang. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

ghost commented 1 year ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

saber-wang commented 1 year ago

Updated Samples

homeyf commented 1 year ago

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 1.0. Can repro on android and windows platform with above project. https://github.com/JiuLing-zhang/MauiError001.git image

marcoablanco commented 1 year ago

Any news? still happen in

android                    33.0.68/7.0.100        SDK 7.0.300, VS 17.6.33815.320, VS 17.6.33815.320
maui-android               7.0.86/7.0.100         VS 17.6.33815.320, VS 17.6.33815.320

I can force showing tab with Shell.TabBarIsVisible="True" but only show current tab icon, not the others, so user can't change the tab.

<Shell...
       CurrentItem="{Reference PageHome}">

    <TabBar Route="Main">
        <ShellContent Shell.TabBarIsVisible="True" 
                      ContentTemplate="{DataTemplate news:NewsPage}" 
                      Route="News" Icon="tab_news_icon.png" />

        <ShellContent x:Name="PageHome"
                      Shell.TabBarIsVisible="True"
                      Route="Home" Icon="tab_home_icon.png"
                      ContentTemplate="{DataTemplate home:HomePage}" />

        <ShellContent Shell.TabBarIsVisible="True" 
                      ContentTemplate="{DataTemplate account:AccountPage}" 
                      Route="Account" Icon="tab_my_account_icon.png" />
    </TabBar>
Cybrosys commented 1 year ago

@marcoablanco TabBar has an CurrentItem property, try that one: <TabBar CurrentItem="{Reference PageHome}">

marcoablanco commented 7 months ago

@marcoablanco TabBar has an CurrentItem property, try that one: <TabBar CurrentItem="{Reference PageHome}">

it's works! thank you!

jfversluis commented 1 month ago

Still reproduces with .NET 9 RC 1