question

DenisCreator-0596 avatar image
0 Votes"
DenisCreator-0596 asked DenisCreator-0596 edited

Xamarin Forms 5 global ShellItem

Hi all,

Currently I am tring to update my Xamarin.Forms Application to Xamarin.Forms 5
Last issue I've faced an issue that global ShellItem before FlyoutItem not shown at all

Here is small example:
```xaml

 <!-- Loading/WelcomePage -->
 <ShellItem 
         Route="loading"
         FlyoutItem.IsVisible="False">
     <ShellContent ... />
 </ShellItem>
    
 ...

 <FlyoutItem 
         Route="main"
         FlyoutDisplayOptions="AsMultipleItems">
     <ShellContent ... />
     ...
 </FlyoutItem>

```

Previous version first of all displayed first ShellItem (Splash Screen) and than according the navigation route switched to FlyoutItem if needed, but current Xamarin.Forms 5 seems like changed this behavior ...

How to first display some Splash Screen Page and then switched FlyoutItem ?

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DenisCreator-0596 avatar image
0 Votes"
DenisCreator-0596 answered DenisCreator-0596 edited

I have figured out the issue ...

It was due to using (works for Xamarin.Forms 4+ < Xamarin.Forms 5.0):
FlyoutItem.IsVisible="False"

Instead of new one (works for Xamarin.Forms 5+):
FlyoutItemIsVisible="False"

When I changed to FlyoutItemIsVisible="False" all works as expected !!

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered

Hello,​

Welcome to our Microsoft Q&A platform!

I test with xamarin forms 5.0.0.2012

First page is splash screen, then you can navigate to the FlyoutItem after several seconds.

I create a new shell temple with FlyoutItem, then I create a SplashScreen.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App108.Views.SplashPage"
             >
    <ContentPage.Content>
        <StackLayout>
            <Label Text="SplashPage" FontSize="Header"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Here is background code SplashScreen.xaml.cs.

using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace App108.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class SplashPage : ContentPage
    {
        public SplashPage()
        {
            Shell.SetNavBarIsVisible(this, false);
            InitializeComponent();
            NavigatePage();
        }

        private async void NavigatePage()
        {
            //throw new NotImplementedException();
            await Task.Delay(2000);
            await Shell.Current.GoToAsync("//AboutPage");
        }
    }
}


Here is my AppShell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:App108.Views"
       Title="App108"
       x:Class="App108.AppShell">

    <!--
        The overall app visual hierarchy is defined here, along with navigation.
    
        https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
    -->

    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />

            <!--
            Default Styles for all Flyout Items
            https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
            -->
            <Style Class="FlyoutItemLabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="White"></Setter>
            </Style>
            <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

            <!--
            Custom Style you can apply to any Flyout Item
            -->
            <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Shell.Resources>
    
    <ShellItem 
         Route="SplashPage"
        FlyoutItemIsVisible="False"
        >
        <ShellContent   ContentTemplate="{DataTemplate local:SplashPage}" />
        
        
        
    </ShellItem>
    <!-- 
        When the Flyout is visible this defines the content to display in the flyout.
        FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element    
        https://docs.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
    -->
   
    <FlyoutItem Title="About" Icon="icon_about.png">
        <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    </FlyoutItem>
    <FlyoutItem Title="Browse" Icon="icon_feed.png">
        <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>

    <!-- When the Flyout is visible this will be a menu item you can tie a click behavior to  -->
    <!--<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked">
    </MenuItem>-->

    <!--
        TabBar lets you define content that won't show up in a flyout menu. When this content is active
        the flyout menu won't be available. This is useful for creating areas of the application where 
        you don't want users to be able to navigate away from. If you would like to navigate to this 
        content you can do so by calling 
        await Shell.Current.GoToAsync("//LoginPage");
    -->
    <!--<TabBar>
        <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
    </TabBar>-->

    <!-- Optional Templates 
    // These may be provided inline as below or as separate classes.

    // This header appears at the top of the Flyout.
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-header
    <Shell.FlyoutHeaderTemplate>
        <DataTemplate>
            <Grid>ContentHere</Grid>
        </DataTemplate>
    </Shell.FlyoutHeaderTemplate>

    // ItemTemplate is for ShellItems as displayed in a Flyout
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-flyoutitem-appearance
    <Shell.ItemTemplate>
        <DataTemplate>
            <ContentView>
                Bindable Properties: Title, Icon
            </ContentView>
        </DataTemplate>
    </Shell.ItemTemplate>

    // MenuItemTemplate is for MenuItems as displayed in a Flyout
    // https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <ContentView>
                Bindable Properties: Text, Icon
            </ContentView>
        </DataTemplate>
    </Shell.MenuItemTemplate>

    -->

</Shell>



And I register SplashPage in the AppShell.xaml.cs.

public partial class AppShell : Xamarin.Forms.Shell
    {
        public AppShell()
        {
            InitializeComponent();
            Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));
            Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));
            Routing.RegisterRoute(nameof(SplashPage), typeof(SplashPage));
        }

        private async void OnMenuItemClicked(object sender, EventArgs e)
        {
            await Shell.Current.GoToAsync("//LoginPage");
        }
    }



If you want to achieve splashScreen, I donot recommand you use ShellItem's way to achieve it, here is a best practice to achieve splash screen.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/splashscreen

Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

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.


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.