Forum Xamarin.Forms

Shell - Navigate into inner tab of a different Shell

Hello,
I have a main shell page 'AppShell.xaml' with Flyout navigation
In this shell I have 2 FlyoutItem with a single ShellContent (we call it Page1 and Page2) and 1 FlyoutItem with 4 ShellContent (4 tab pages)

From Page1 I need to go into a sandwitch page (with upper and bottom tabs)
For this way I write a second shell page (CoreShell.xaml) with Flyout disabled.

CoreShell.xml:
`<?xml version="1.0" encoding="UTF-8"?>

<Shell.Resources>
    <ResourceDictionary>

    <Style x:Key="BaseStyle" TargetType="Element">  
        <Setter Property="Shell.ShellTabBarBackgroundColor" Value="{StaticResource tabBarBackgroundColor}" />  
     </Style>

    <Style x:Key="SicurezzaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">            
        <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabSecurityFontColor}" />    
        <Setter Property="Shell.ShellTabBarTitleColor" Value="{StaticResource tabSecurityFontColor}" /> 
        <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSecurityFontColor}" />
    </Style>

    <Style x:Key="SmartHomeStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabSmartHomeFontColor}" />
        <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSmartHomeFontColor}" />
    </Style>

    <Style x:Key="ClimaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabClimaFontColor}" />
        <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabClimaFontColor}" />
    </Style>

    <Style x:Key="SistemaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Shell.ShellTitleColor"  Value="{StaticResource tabSistemaFontColor}" />
        <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSistemaFontColor}" />
    </Style>                  
    </ResourceDictionary>

</Shell.Resources>

<ShellItem>
    <Tab Icon="tab_security_unsel"  Title="Sicurezza" Style="{StaticResource SicurezzaStyle}" >    
        <ShellContent Title="Scenari"        ContentTemplate="{DataTemplate view:ScenariPage}" />
        <ShellContent Title="Aree e zone"   ContentTemplate="{DataTemplate view:AreeZonePage}" />
        <ShellContent Title="Telecamere"    ContentTemplate="{DataTemplate view:TelecamerePage}" />
    </Tab>

    <ShellContent Icon="tab_smart_home_unsel" Title="Smart Home" Style="{StaticResource SmartHomeStyle}" 
                  ContentTemplate="{DataTemplate view:SmartHomePage}" />

    <ShellSection Icon="tab_clima_unsel" Title="Clima" Style="{StaticResource ClimaStyle}">
        <ShellContent Title="Clima 1" ContentTemplate="{DataTemplate view:WaitingClimaPage}" />
    </ShellSection>

    <ShellSection Icon="tab_system_unsel" Title="Sistema" Style="{StaticResource SistemaStyle}">
        <ShellContent Title="Generali"  ContentTemplate="{DataTemplate view:GeneraliPage}" />
        <ShellContent Title="Guasti"  ContentTemplate="{DataTemplate view:GuastiPage}" />
        <ShellContent Title="Eventi"  ContentTemplate="{DataTemplate view:EventiPage}" />
    </ShellSection>        

</ShellItem>

`

To show the sandwitch page, I push this Shell page to Navigation;
CoreShell coreShell = new CoreShell();
await Shell.Current.Navigation.PushAsync(coreShell);

and all is working as expected. Of course in this way I see the first upper tab of the first bottom tab

My questions:
1) There is a way to open the coreShell page to a different inner tab?
2) There is a way to add ShellContent to a ShellSection programmatically from behind code? For example, for 'Clima' ShellSection the number of tab is not fixed, and I could build it runtime

Thanks
Matteo

Best Answers

  • MatteoPiccioniMatteoPiccioni USMember ✭✭
    Accepted Answer

    I open a new issues in xf repository: https://github.com/xamarin/Xamarin.Forms/issues/6073

Answers

  • MatteoPiccioniMatteoPiccioni USMember ✭✭
    edited April 2019

    Thanks, it works

    I just need a way to solve 1)
    push and open the coreShell page directly to a different inner tab

    Thanks!

  • MatteoPiccioniMatteoPiccioni USMember ✭✭
    edited May 2019

    Unfortunately it seems not working with sandwitch tabs and two shell classes...

    From my base shell "AppShell.xaml" I have a ViewModel page with the GoToAsync Command:

    CoreShell.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:view="clr-namespace:UserApp.Views"     
    
             xmlns:local="clr-namespace:UserApp" FlyoutBehavior="Disabled"
    
               RouteScheme="core"              
    
               RouteHost="it.companyname"
    
               Route="userapp"
    
             x:Class="UserApp.Views.CoreShell" 
    

    >

    <Shell.Resources>
        <ResourceDictionary>
    
        <Style x:Key="BaseStyle" TargetType="Element">  
            <Setter Property="Shell.ShellTabBarBackgroundColor" Value="{StaticResource tabBarBackgroundColor}" />  
         </Style>
    
        <Style x:Key="SicurezzaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">            
            <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabSecurityFontColor}" />    
            <Setter Property="Shell.ShellTabBarTitleColor" Value="{StaticResource tabSecurityFontColor}" /> 
            <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSecurityFontColor}" />
        </Style>
    
        <Style x:Key="SmartHomeStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabSmartHomeFontColor}" />
            <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSmartHomeFontColor}" />
        </Style>
    
        <Style x:Key="ClimaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Shell.ShellTitleColor" Value="{StaticResource tabClimaFontColor}" />
            <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabClimaFontColor}" />
        </Style>
    
        <Style x:Key="SistemaStyle" TargetType="Element" BasedOn="{StaticResource BaseStyle}">
            <Setter Property="Shell.ShellTitleColor"  Value="{StaticResource tabSistemaFontColor}" />
            <Setter Property="Shell.ShellForegroundColor" Value="{StaticResource tabSistemaFontColor}" />
        </Style>                  
        </ResourceDictionary>
    
    </Shell.Resources>
    
    <ShellItem Route="mainTab" >
    
        <ShellSection Route="tabScenari" Icon="tab_security_unsel" Title="Sicurezza" Style="{StaticResource SicurezzaStyle}">            
            <ShellContent Route="pageScenari" Title="Scenari"        ContentTemplate="{DataTemplate view:ScenariPage}" />
            <ShellContent Route="pageAreeZone" Title="Aree e zone"   ContentTemplate="{DataTemplate view:AreeZonePage}" />
            <ShellContent Route="pageTelecamere" Title="Telecamere"    ContentTemplate="{DataTemplate view:TelecamerePage}" />
         </ShellSection>
    
        <ShellContent Route="tabSmartHome" Icon="tab_smart_home_unsel" Title="Smart Home" Style="{StaticResource SmartHomeStyle}" 
                      ContentTemplate="{DataTemplate view:SmartHomePage}" />
    
        <ShellSection x:Name="tabClima" Route="tabClima" Icon="tab_clima_unsel" Title="Clima" Style="{StaticResource ClimaStyle}">
    
            <ShellContent Title="Clima 1" ContentTemplate="{DataTemplate view:WaitingClimaPage}" />
    
        </ShellSection>
    
        <ShellSection Route="tabSistema" Icon="tab_system_unsel" Title="Sistema" Style="{StaticResource SistemaStyle}">
            <ShellContent Route="generaliPage" Title="Generali"  ContentTemplate="{DataTemplate view:GeneraliPage}" />
            <ShellContent Route="guastiPage" Title="Guasti"  ContentTemplate="{DataTemplate view:GuastiPage}" />
            <ShellContent Route="eventiPage" Title="Eventi"  ContentTemplate="{DataTemplate view:EventiPage}" />
        </ShellSection>        
    
    </ShellItem>
    


    `

    ViewModel command that I try to call:
    await Shell.Current.GoToAsync("core://it.companyname/userapp/mainTab/tabSistema", true);
    Exception:
    "unable to figure out route for: core://it.companyname/userapp/mainTab/tabSistema Parameter name: uri"

  • MatteoPiccioniMatteoPiccioni USMember ✭✭
    Accepted Answer

    I open a new issues in xf repository: https://github.com/xamarin/Xamarin.Forms/issues/6073

  • FrancisGFrancisG Member ✭✭

    Hi,

    Try with only "//mainTab/tabSistema", and remove the RouteScheme. RouteHost an Route shell settings. See https://github.com/xamarin/Xamarin.Forms/pull/6081

Sign In or Register to comment.