[Spec] TabView #10773

jsuarezruiz · 2020-05-19T13:58:25Z

TabView

We can have tabs using Shell. However, what happens if we want to have nested tabs within a specific section (Example: Grid)?, what if we want to fully customize each tab?. In these cases, we would need a Custom Renderer so far...

The TabView is a way to display a set of tabs and their respective content. TabView is useful for displaying several content while giving a user the capability to customize mostly everything.

NOTE: TabView is a cross-platform view that takes over when native tabs hit their limits, such as positioning with layouts, styling, and non-uniform styling like a raised button.

API

Next, a list with the TabView properties, events and visualstates.

Properties

TabView Properties

Property	Type	Description
TabItemsSource	IEnumerable	A collection used to generate the TabView's tab items.
TabViewItemDataTemplate	DataTemplate	the template the Tab View uses to generate tab items' header.
TabContentDataTemplate	DataTemplate	The template the Tab View uses to generate tab items' content.
IsCyclical	Bool	Enable or disable cyclical tabs navigation.
IsLazy	Bool	Enable or disable lazy tabs loading.
SelectedIndex	Int	Gets or sets the currently selected tab. Default is 0.
TabStripPlacement	TabStripPlacement	The TabStrip placement (top or bottom).
TabStripBackground	Brush	The TabStrip background.
TabIndicatorBrush	Brush	The TabIndicator background.
TabIndicatorHeight	double	The TabIndicator height.
TabIndicatorWidth	double	The TabIndicator width.
TabIndicatorPlacement	TabIndicatorPlacement
TabIndicatorView	View	The TabIndicator content.
TabContentBackground	Brush	The tab content background.
TabContentHeight	Double	The tab content height.
TabStripHeight	Double	The TabStrip height.
TabContentHeight	Double	The tab content height.
HasTabStripShadow	Bool	Show or hide the TabStrip shadow effect.
IsTabTransitionEnabled	Bool	Enable or disable the transition between tabs.
IsSwipeEnabled	Bool	Enable or disable the swipe gesture.

TabViewItem Properties

Property	Type	Description
Text	String	The text of the tab.
TextColor	Color	The text color of the tab.
TextColorSelected	Color	The text color of the selected tab.
FontSize	FontSize	The font size used in the tab text.
FontSizeSelected	FontSize	The font size used in the selected tab.
FontFamily	String	The font family used in the tab.
FontFamilySelected	String	The font family used in the selected tab.
FontAttributes	FontAttributes	The font attributes used in the tab.
FontAttributesSelected	FontAttributes	The font attributes used in the selected tab.
Icon	ImageSource	The icon of the tab.
IconSelected	ImageSource	The ImageSource used as icon in the selected tab.
Content	View	The content of the tab. Is View, can use anything as content.
BadgeText	Bool	The badge text used in the tab.
BadgeTextColor	Color	The badge text color used in the tab.
BadgeTextColorSelected	Color	The badge text color used in the selected tab.
BadgeBackgroundColor	Color	The badge color used in the tab.
BadgeBackgroundColorSelected	Color	The badge color used in the selected tab.
IsSelected	Bool	a bool that indicate if the tab is selected or not.
TapCommand	ICommand	Command that is executed when the user tap a tab.
TapCommandParameter	object	The tap command parameter.

Events

TabView Events

Event	Description
SelectionChanged	Event that is raised when the selected tab changed.
Scrolled	Event that is raised when is swiping between tabs.

TabViewItem Events

Event	Description
TabTapped	Event that is raised when the user tap a tab.

VisualStates

The Visual State Manager (VSM) provides a structured way to make visual changes to the user interface from code.
The VSM introduces the concept of visual states. TabView can have several different visual appearances depending on its underlying state.

TabView have four specific VisualStates:

CurrentTabVisualState
NextTabVisualState
PreviousTabVisualState
DefaultTabVisualState

Scenarios

Let's see some samples covering common scenarios.

Basic Tabs

Let's see a basic example:

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

TabItemsSource

Using TabItemsSource (dynamic tabs):

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

Custom Tabs

The appearance of each tab can be customized:

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Cyclical Tabs

Do you want to navigate between the tabs cyclically?

<TabView
    IsCyclical="True">
    ...
</TabView>

Lazy Loading

Lazy tab loading:

<TabView
    IsLazy="True">
    ...
</TabView>

Tab Transitions and TabViewItem animations

Can use Xamarin.Forms animations to customize the transition between each tab, animate the tab when appears or disappears, or even animate the badge when appears or disappears.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Using VisualStates

Can use different visual states to customize the current tab, the next tab, etc.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

Create Tabs using C#

You can use XAML or C# to create the UI in Xamarin.Forms. Let's see how we would create tabs using C#.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

Using Styles

Can customize the appearance of the tab content, tab strip, tab item, etc. using XAML styles or CSS.

Using XAML:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

Using CSS:

.customTabItem {
    font-size: medium;
    text-color: red;
}

Difficulty : Medium

The text was updated successfully, but these errors were encountered:

KennyDizi · 2020-05-19T14:27:15Z

wow!

ZairiAimenDz · 2020-05-19T17:32:10Z

Beautiful Stuff

MuleaneEve · 2020-05-19T21:43:52Z

Good job!

Regarding the name "TabView", I am concerned that it will create some confusion with the one in UWP, especially when the day comes where that control is mapped to Xamarin.Forms/MAUI.

And I do hope that day comes since it would be a nice control to have for UWP, iPad and Android Tablet. It would be even cooler if it had a way to seamlessly transform for phones as well.

vhugogarcia · 2020-05-20T13:09:10Z

Awesome control. However, I think this can be updated a little to cover a design like this:

Properties

TabView Properties (Additional)

Property	Type	Description
CornerRadius	float	Allows to set the radius of a the corners from the tab view
HeightRequest	double	Allows to set the height of the control
WidthRequest	double	Allows to set the width of the control

TabViewItem Properties (Additional)

Property	Type	Description
IconPlacement	IconPlacement	Allows to set the location of the icon on the tab: Top, Bottom, Left, Right
CornerRadius	float	Allows to set the radius of a the corners from the tab view
BadgeIcon	ImageSource	The image to be used as a badge indicator. Due to something we just need to show a small dot on it without text or numbers.

almirvuk · 2020-05-20T13:39:40Z

This looks great!

jsuarezruiz · 2020-05-20T15:47:33Z

@vhugogarcia Thanks for your feedback, very interesting!.

With the Spec definition, you could already manage the size of the TabView, even the content or the TabStrip height. About have CornerRadius, mnnn, I suppose it would be interesting if we have the option in the TabStrip, right?. Something like TabStripCornerRadius.

In the case of the TabViewItem, you can use a template to customize the content. So you can manage Corner Radius in the TabViewItem. However, we can have the CornerRadius property and allow to customize the corners also in the default templates.

Then we have the IconPlacement and BadgeIcon. Both seem like good ideas to me.

I will update the Spec.

nschoenberg · 2020-05-23T20:18:33Z

Can I use this without Shell?

PureWeen · 2020-05-23T22:08:26Z

It's just a bunch of forms elements put together

you can use it wherever you can stick a view :-)

developer9969 · 2020-05-24T07:43:13Z

Hi guys, fantastic stuff can you make sure these cool controls work without shell? Thousand of apps do not use shell and we use Prism which as you know cannot use shell till shell allows proper integration with dependency injection. thank you

nschoenberg · 2020-05-24T08:32:08Z

@developer9969 Please see the previous two comments and the answer of PureWeen

jsuarezruiz · 2020-05-24T09:09:07Z

@developer9969 Yes, you can use it without shell too.

d617617 · 2020-05-27T12:49:20Z

Nice ,I have been looking forward to it for a long time.Thank sir!

angelru · 2020-06-02T16:21:05Z

Awesome!!, when can it be used?

rs-mobitech · 2020-06-17T04:35:19Z

When I am viewing my application on an iPad in landscape, I have wide margins but I would also like to have a wide margin for the tab icons so that for example the icons are evenly spaced but they have a 200 margin to the right and to the left. Will this be possible?

jsuarezruiz · 2020-06-17T12:50:03Z

@rscholey Yes, will be possible.

timahrentlov · 2020-06-18T12:47:40Z

@jsuarezruiz I saw that TabView has been "Cut" from the roadmap. Does this mean that it won't resurface until MAUI ? (Same question for AppBar)

davidortinau · 2020-06-18T15:54:29Z

Hi @timahrentlov, yes we cut it from the upcoming Forms releases in order to make additional room for the foundational improvements we need to focus on.

In order to still ship these controls sooner we are planning to move them to the XamarinCommunityToolkit. We have good momentum there ( insert contributor recruiting pitch ;) ) and I hope this will be a reasonable option during this transitional period.

@jsuarezruiz please close this issue here and move it to .NET MAUI. Same for the AppBar.

domagojmedo · 2020-06-22T11:07:50Z

@davidortinau can we expect to see updated roadmap soon? Even if it's just "under the hood" changes, I'm sure many would be interested to see what is the team actually working on.

nonubitta · 2020-06-29T04:42:28Z

Oh what a bummer. :(
I was really desperately waiting for this one.

MaxFmi · 2020-07-23T07:48:57Z

I haven't seen a possibility to register routes for TabViewItems. Would it be possible to register routes for TabViewItems and navigate through them by using absolute navigation?

MaxFmi · 2020-07-23T07:50:58Z

Was it already moved to https://github.com/xamarin/XamarinCommunityToolkit? I can't find it there. Or does no code exist yet?

AswinPG · 2020-08-16T06:08:55Z

Was it already moved to https://github.com/xamarin/XamarinCommunityToolkit? I can't find it there. Or does no code exist yet?

https://github.com/jsuarezruiz/Xamarin.Forms.TabView I think this is the one

EmilAlipiev · 2020-08-17T10:21:11Z

@AswinPG this looks good but i think that it is older than this issue and there is not nuget for it. Still can be used for anyone needs urgently i believe

EmilAlipiev · 2020-08-27T20:50:55Z

@jsuarezruiz your repo looks already fine. you never released a nuget package for this?

Phenek · 2020-12-16T08:40:34Z

Hello @jsuarezruiz ,

I faced some scrollConflict on Android (issue #9315)
when using embedded scroll ↔ ↕ ( ListView, ScrollView, CollectionView )

if you don't mind, take a look
regards,

jsuarezruiz added t/enhancement ➕ proposal-open labels May 19, 2020

samhouts added the m/high impact ⬛ label May 20, 2020

PureWeen mentioned this issue May 20, 2020

[WiP] .NET MAUI Shell Improvements #10804

Closed

samhouts added the roadmap label May 20, 2020

jsuarezruiz mentioned this issue May 21, 2020

[Spec] Transitions dotnet/maui#6

Open

PureWeen mentioned this issue May 23, 2020

Question: XAML Flavor, Architecture & Roadmap dotnet/maui#43

Closed

jsuarezruiz closed this as completed Jun 18, 2020

jsuarezruiz mentioned this issue Jun 18, 2020

[Spec] TabView dotnet/maui#151

Closed

EmilAlipiev mentioned this issue Jul 8, 2020

[Enhancement] Create TabbedView #11373

Closed

jsuarezruiz mentioned this issue Oct 26, 2020

[Spec] TabView xamarin/XamarinCommunityToolkit#501

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Spec] TabView #10773

[Spec] TabView #10773

jsuarezruiz commented May 19, 2020

KennyDizi commented May 19, 2020

ZairiAimenDz commented May 19, 2020 •

edited

Loading

MuleaneEve commented May 19, 2020

vhugogarcia commented May 20, 2020 •

edited

Loading

almirvuk commented May 20, 2020

jsuarezruiz commented May 20, 2020 •

edited

Loading

nschoenberg commented May 23, 2020

PureWeen commented May 23, 2020

developer9969 commented May 24, 2020

nschoenberg commented May 24, 2020

jsuarezruiz commented May 24, 2020

d617617 commented May 27, 2020

angelru commented Jun 2, 2020 •

edited

Loading

rs-mobitech commented Jun 17, 2020 •

edited

Loading

jsuarezruiz commented Jun 17, 2020

timahrentlov commented Jun 18, 2020

davidortinau commented Jun 18, 2020

domagojmedo commented Jun 22, 2020

nonubitta commented Jun 29, 2020

MaxFmi commented Jul 23, 2020

MaxFmi commented Jul 23, 2020 •

edited

Loading

AswinPG commented Aug 16, 2020

EmilAlipiev commented Aug 17, 2020

EmilAlipiev commented Aug 27, 2020

Phenek commented Dec 16, 2020 •

edited

Loading

[Spec] TabView #10773

[Spec] TabView #10773

Comments

jsuarezruiz commented May 19, 2020

TabView

API

Properties

TabView Properties

TabViewItem Properties

Events

TabView Events

TabViewItem Events

VisualStates

Scenarios

Basic Tabs

TabItemsSource

Custom Tabs

Cyclical Tabs

Lazy Loading

Tab Transitions and TabViewItem animations

Using VisualStates

Create Tabs using C#

Using Styles

Difficulty : Medium

KennyDizi commented May 19, 2020

ZairiAimenDz commented May 19, 2020 • edited Loading

MuleaneEve commented May 19, 2020

vhugogarcia commented May 20, 2020 • edited Loading

Properties

TabView Properties (Additional)

TabViewItem Properties (Additional)

almirvuk commented May 20, 2020

jsuarezruiz commented May 20, 2020 • edited Loading

nschoenberg commented May 23, 2020

PureWeen commented May 23, 2020

developer9969 commented May 24, 2020

nschoenberg commented May 24, 2020

jsuarezruiz commented May 24, 2020

d617617 commented May 27, 2020

angelru commented Jun 2, 2020 • edited Loading

rs-mobitech commented Jun 17, 2020 • edited Loading

jsuarezruiz commented Jun 17, 2020

timahrentlov commented Jun 18, 2020

davidortinau commented Jun 18, 2020

domagojmedo commented Jun 22, 2020

nonubitta commented Jun 29, 2020

MaxFmi commented Jul 23, 2020

MaxFmi commented Jul 23, 2020 • edited Loading

AswinPG commented Aug 16, 2020

EmilAlipiev commented Aug 17, 2020

EmilAlipiev commented Aug 27, 2020

Phenek commented Dec 16, 2020 • edited Loading

ZairiAimenDz commented May 19, 2020 •

edited

Loading

vhugogarcia commented May 20, 2020 •

edited

Loading

jsuarezruiz commented May 20, 2020 •

edited

Loading

angelru commented Jun 2, 2020 •

edited

Loading

rs-mobitech commented Jun 17, 2020 •

edited

Loading

MaxFmi commented Jul 23, 2020 •

edited

Loading

Phenek commented Dec 16, 2020 •

edited

Loading