Shell Items duplication and blick

Question

Shell Items duplication and blick

Eduardo Gomez 3,651

This is an old problem

Eduardo Gomez 3,651 Reputation points

2024-03-13T07:49:15.1633333+00:00

I do not understand why I can't log out, if I put shell.items.clear also I dont understan why it give me the error if I try to navigate to the same page
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-13T08:08:15.2966667+00:00
The demo link you provided cannot be accessed.

For further investigation, could you please provide the following information?

The MAUI version.

What is your expected behavior, what is the actual behavior of the program at the moment, and how does it differ from each other?

Your prompt reply will be highly appreciated.
Eduardo Gomez 3,651 Reputation points

2024-03-13T08:26:00.06+00:00
that is Stange, if you click of the demo, you will see a video.

the latest version

the expected behavior is, that I can navigate and construct my menu items without any duplications.

I already tried to clear the shell.current.items, but if I do that, I will get errors saying that I cannot find a particular page.

I think I found the error.

public static async Task NavigatoToDashboardRoleAsync(string role) { var pageNage = $"{role}DashboardPage"; await Shell.Current.GoToAsync($"//{pageNage}", true); } }

look at this.

So, when I navigate to the same page for the second time the Flyout items gets duplicated
Eduardo Gomez 3,651 Reputation points

2024-03-13T08:48:03.8933333+00:00

Let me do the app
Eduardo Gomez 3,651 Reputation points

2024-03-13T09:10:10.0666667+00:00

https://www.dropbox.com/scl/fi/fu1iggvp6pms8up05btci/DemyAI.zip?rlkey=x8hetdtyp4yexojhi6k4ue3p3&dl=0
Eduardo Gomez 3,651 Reputation points

2024-03-13T15:06:55.7+00:00

I think that what I have to do, is to somehow clear the flyoutitems, but this is a readOnly ccollection
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-14T06:37:46.7033333+00:00
Due to certain policies, we are unable to access some third-party websites for downloading the sample.

Based on the screenshots you provide, you should need to remove the duplicates from Flyout.

You can try to deduplicate using the following methods:

System.Linq.Enumerable.Distinct<object>( (IEnumerable<object>)Shell.Current.FlyoutItems);

Eduardo Gomez 3,651

I think I found something interesting.

I have my shell

    <ShellContent
        ContentTemplate="{DataTemplate pages:StartupPage}"
        Route="StartupPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:LoginPage}"
        Route="LoginPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:NoInternetPage}"
        Route="NoInternetPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:RoleSelectionPage}"
        Route="RoleSelectionPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Button
                Margin="20"
                Command="{Binding SignOutCommand}"
                CornerRadius="8"
                Text="Log out" />
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
</Shell>

I created a method to get me some default values

  public static List<ShellContent> GeetDefaultMenuItems() {
      return
      [
          new() { ContentTemplate = new DataTemplate(typeof(StartupPage)), Route = nameof(StartupPage) },
          new() { ContentTemplate = new DataTemplate(typeof(LoginPage)), Route = nameof(LoginPage) },
          new() { ContentTemplate = new DataTemplate(typeof(NoInternetPage)), Route = nameof(NoInternetPage) },
          new() { ContentTemplate = new DataTemplate(typeof(RoleSelectionPage)), Route = nameof(RoleSelectionPage) }
      ];
  }

and when I logout I clear my shell

 [RelayCommand]
 async Task SignOut() {
     SecureStorage.Default.RemoveAll();
     var defaultItems = FlyoutHelper.GeetDefaultMenuItems();
     Shell.Current.Items.Clear();
     foreach(var item in defaultItems) {
         Shell.Current.Items.Add(item);
     }
     await appService.NavigateTo($"//{nameof(LoginPage)}", true);
 }

But I can see duplicate values.

User's image

And if I delete my appshell.xaml, it will throw a null exception.

those invisible items represent.

startup
login
nointernet
RoleSelectionPage

Eduardo Gomez 3,651

I was able to fix it, although is a very ugly way and I wanted to ask you if there is a better way to

of ding this

so, in order to make this work, I had to add my pages in the xaml

Shell
    x:Class="DemyAI.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:badge="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
    xmlns:helpers="clr-namespace:DemyAI.Helpers"
    xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:pages="clr-namespace:DemyAI.Views"
    xmlns:sfavatar="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
    xmlns:vm="clr-namespace:DemyAI.ViewModels"
    Title="DemyAI"
    x:DataType="vm:AppShellViewModel"
    Shell.NavBarIsVisible="False"
    Shell.TabBarIsVisible="False">
    <ShellContent 
        ContentTemplate="{DataTemplate pages:StartupPage}"
        Route="StartupPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:LoginPage}"
        Route="LoginPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:NoInternetPage}"
        Route="NoInternetPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <ShellContent
        ContentTemplate="{DataTemplate pages:RoleSelectionPage}"
        Route="RoleSelectionPage"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False" />
    <Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Button
                Margin="20"
                Command="{Binding SignOutCommand}"
                CornerRadius="8"
                Text="Log out" />
        </DataTemplate>
    </Shell.FlyoutFooterTemplate>
</Shell>

If I don't put, I get null exception the first time I run the app

Then I tweak my method

    public static List<ShellContent> GeetDefaultMenuItems() {
        return
        [
            new() { ContentTemplate = new DataTemplate(typeof(StartupPage)),
                Route = nameof(StartupPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(LoginPage)), 
                Route = nameof(LoginPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(NoInternetPage)),
                Route = nameof(NoInternetPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(RoleSelectionPage)),
                Route = nameof(RoleSelectionPage), FlyoutItemIsVisible = false }
        ];
    }
}

and then when I log out, I cleared.

   async Task SignOut() {
       SecureStorage.Default.RemoveAll();
       var defaultItems = FlyoutHelper.GeetDefaultMenuItems();
       Shell.Current.Items.Clear();
       foreach(var item in defaultItems) {
           Shell.Current.Items.Add(item);
       }
       await appService.NavigateTo($"//{nameof(LoginPage)}", true);

if yo see closely, the code from the Appshell.xaml, and my

GeetDefaultMenuItems

are the same. thing

Accepted answer

0 additional answers

Your answer

Eduardo Gomez 3,651 Reputation points

2024-03-13T07:49:15.1633333+00:00

I do not understand why I can't log out, if I put shell.items.clear also I dont understan why it give me the error if I try to navigate to the same page
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-13T08:08:15.2966667+00:00

The demo link you provided cannot be accessed.

For further investigation, could you please provide the following information?

The MAUI version.

What is your expected behavior, what is the actual behavior of the program at the moment, and how does it differ from each other?

Your prompt reply will be highly appreciated.
Eduardo Gomez 3,651 Reputation points

2024-03-13T08:26:00.06+00:00

that is Stange, if you click of the demo, you will see a video.

the latest version

the expected behavior is, that I can navigate and construct my menu items without any duplications.

I already tried to clear the shell.current.items, but if I do that, I will get errors saying that I cannot find a particular page.

I think I found the error.

public static async Task NavigatoToDashboardRoleAsync(string role) { var pageNage = $"{role}DashboardPage"; await Shell.Current.GoToAsync($"//{pageNage}", true); } }

look at this.

So, when I navigate to the same page for the second time the Flyout items gets duplicated
Eduardo Gomez 3,651 Reputation points

2024-03-13T08:48:03.8933333+00:00

Let me do the app
Eduardo Gomez 3,651 Reputation points

2024-03-13T09:10:10.0666667+00:00

https://www.dropbox.com/scl/fi/fu1iggvp6pms8up05btci/DemyAI.zip?rlkey=x8hetdtyp4yexojhi6k4ue3p3&dl=0
Eduardo Gomez 3,651 Reputation points

2024-03-13T15:06:55.7+00:00

I think that what I have to do, is to somehow clear the flyoutitems, but this is a readOnly ccollection
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2024-03-14T06:37:46.7033333+00:00

Due to certain policies, we are unable to access some third-party websites for downloading the sample.

Based on the screenshots you provide, you should need to remove the duplicates from Flyout.

You can try to deduplicate using the following methods:

System.Linq.Enumerable.Distinct<object>( (IEnumerable<object>)Shell.Current.FlyoutItems);
Eduardo Gomez 3,651 Reputation points

2024-03-14T08:45:39.4666667+00:00

I think I found something interesting.

I have my shell

<ShellContent ContentTemplate="{DataTemplate pages:StartupPage}" Route="StartupPage" Shell.FlyoutBehavior="Disabled" Shell.FlyoutItemIsVisible="False" /> <ShellContent ContentTemplate="{DataTemplate pages:LoginPage}" Route="LoginPage" Shell.FlyoutBehavior="Disabled" Shell.FlyoutItemIsVisible="False" /> <ShellContent ContentTemplate="{DataTemplate pages:NoInternetPage}" Route="NoInternetPage" Shell.FlyoutBehavior="Disabled" Shell.FlyoutItemIsVisible="False" /> <ShellContent ContentTemplate="{DataTemplate pages:RoleSelectionPage}" Route="RoleSelectionPage" Shell.FlyoutBehavior="Disabled" Shell.FlyoutItemIsVisible="False" /> <Shell.FlyoutFooterTemplate> <DataTemplate> <Button Margin="20" Command="{Binding SignOutCommand}" CornerRadius="8" Text="Log out" /> </DataTemplate> </Shell.FlyoutFooterTemplate> </Shell>

I created a method to get me some default values

public static List<ShellContent> GeetDefaultMenuItems() { return [ new() { ContentTemplate = new DataTemplate(typeof(StartupPage)), Route = nameof(StartupPage) }, new() { ContentTemplate = new DataTemplate(typeof(LoginPage)), Route = nameof(LoginPage) }, new() { ContentTemplate = new DataTemplate(typeof(NoInternetPage)), Route = nameof(NoInternetPage) }, new() { ContentTemplate = new DataTemplate(typeof(RoleSelectionPage)), Route = nameof(RoleSelectionPage) } ]; }

and when I logout I clear my shell

[RelayCommand] async Task SignOut() { SecureStorage.Default.RemoveAll(); var defaultItems = FlyoutHelper.GeetDefaultMenuItems(); Shell.Current.Items.Clear(); foreach(var item in defaultItems) { Shell.Current.Items.Add(item); } await appService.NavigateTo($"//{nameof(LoginPage)}", true); }

But I can see duplicate values.

And if I delete my appshell.xaml, it will throw a null exception.

those invisible items represent.

startup

login

nointernet

RoleSelectionPage

Answer 1

Hello,

Thanks for your feedback.

According to the official documentation for MAUI flytout, when visibility is set to false, this item should be automatically removed from the shell.

IsVisible, of type bool, indicates if the item should be removed from the visual tree and therefore not appear in the flyout. Its default value is true.

However, based on the image and code snippet you provided, the invisible item still appears in the shell, which is not expected.

It is more recommended that you post this issue to GitHub to make our development team aware of it.

Best Regards,

Alec Liu.

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Shell Items duplication and blick

0 additional answers

Your answer