Navigation and two Tabitem

I'm new in Xamarin and Syncfusion, but not that new in C#. I'm trying to make a new app and this must use a Navigation and two Tabitem

Already have the Navigation and one Tabitem. I'm struggling with adding the second Tabitem




What I want:




Let's say the app is filled with a blog

- The main section (selected icon on bottom bar) have their own sections (Section1,  Section2, N)
- When you go to the second main section (the one with the star at bottom), the top Tabitem must dissapear 
- When you go to the third, it must load another view (no Navigation, Tabitems)

Currently I have this with XAML, it's ok if I need to use C# instead




3 Replies 1 reply marked as answer

SS Suganya Sethuraman Syncfusion Team June 2, 2021 12:32 PM UTC

Hi Sunco,

Greetings from Syncfusion.

We have analyzed your query and we can achieve your requirement by setting TabItem content as SfTabView as like below code snippet.

XAML:
 
 
<tabview:SfTabView BackgroundColor="White" TabHeaderPosition="Bottom" EnableSwiping="False" Grid.Row="1" DisplayMode="Text" VisibleHeaderCount="4">  
  
                    <tabview:SfTabView.SelectionIndicatorSettings>  
                            <tabview:SelectionIndicatorSettings Color="#FF0000" Position="Bottom" StrokeThickness="2"/>  
                    </tabview:SfTabView.SelectionIndicatorSettings>  
  
  
                    <tabview:SfTabItem Title="Inicio" ImageSource="icons8_home_100.png">  
                        <tabview:SfTabItem.Content>  
                            <tabview:SfTabView BackgroundColor="Aqua">  
                    <tabview:SfTabItem Title="Call">  
                        <tabview:SfTabItem.Content>  
                            <Grid BackgroundColor="Red" x:Name="AllContactsGrid" />  
                        </tabview:SfTabItem.Content>  
                    </tabview:SfTabItem>  
                    <tabview:SfTabItem Title="Favorites">  
                        <tabview:SfTabItem.Content>  
                            <Grid BackgroundColor="Green" x:Name="FavoritesGrid" />  
                        </tabview:SfTabItem.Content>  
                    </tabview:SfTabItem>  
                    <tabview:SfTabItem Title="Contacts">  
                        <tabview:SfTabItem.Content>  
                            <Grid BackgroundColor="Blue" x:Name="ContactsGrid" />  
                        </tabview:SfTabItem.Content>  
                    </tabview:SfTabItem>  
        </tabview:SfTabView>
     </tabview:SfTabItem.Content>
 
 
                    </tabview:SfTabItem>



</tabview:SfTabView> 
 

We have created sample based on this and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawerSample_(1)-1920046779

Please let us know if you have any other queries.


Regards,
Suganya Sethuraman.
 
 



SU sunco June 3, 2021 05:44 PM UTC

Thanks, that works. In fact I had tried that but it didn't work for me

Is there a way to get ride that white space? Above call/favorites/contacts

Btw, can't run your project, it says "this project is not selected to compile with this configuration".. anyway, I copy the XAML 





SS Suganya Sethuraman Syncfusion Team June 4, 2021 08:37 AM UTC

Hi Sunco,

Thanks for the update.

We have analyzed your query and we can resolve the reported issue by setting Grid RowSpacing to Zero as like below code snippet.

XAML: 
 
    <Grid x:Name="mainContentView" RowSpacing="0"  BackgroundColor="White">  
  
                <Grid.RowDefinitions>  
                    <RowDefinition Height="Auto" />  
                    <RowDefinition Height="*" />  
                </Grid.RowDefinitions>  

We have modified the sample and please find the sample from below.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawer-207211653

Please let us know if you have any other queries.

Regards,
Suganya Sethuraman
 


Marked as answer
Loader.
Up arrow icon