TabView

A TabView is a top tab layout (or TabView at the top) is a UI pattern where tabs are placed horizontally across the top of the screen, just below the app bar or toolbar. Each tab corresponds to a different section or page, and switching tabs changes the view or content area below.

Inspiration

Material Design 2 - Tabs

Remarks

iOS does not have a fulfilling concept of Tabs, their component have limitations and cannot be used multiple times in the same page, thus, this is implemented using a custom component Tab.

Usage

In the following example, a TabView is used to display multiple tabs, each represented by a TabItem. Each TabItem has a Title and an optional Counter to display how many elements are present in the tab. The TabView also have following properties that can be set by the consumer: SelectedTextColor, DefaultTextColor, SelectedTextStyle and DefaultTextStyle. ContentViews or similar elements can be tied to specific tabs through the public property SelectedTabIndex, as shown in the example.

<dui:VerticalStackLayout>
    <dui:TabView x:Name="TabViewSample">
        <dui:TabItem Title="Tab 1" Counter="3"/>
        <dui:TabItem Title="Tab 2" />
        <dui:TabItem Title="Tab 3" Counter="2"/>
        <dui:TabItem Title="Tab 4" Counter="2"/>
        <dui:TabItem Title="Tab 5"/>
        <dui:TabItem Title="Tab 6" Counter="1"/>
    </dui:TabView>
    <ContentView IsVisible="False">
    <ContentView.Triggers>
        <DataTrigger TargetType="ContentView" Binding="{Binding SelectedTabIndex, Source={x:Reference TabViewSample}}" Value="0">
            <Setter Property="IsVisible" Value="True" />
        </DataTrigger>
    </ContentView.Triggers>
    <Label Text="This is the view for the FIRST tab"></Label>
    </ContentView>
</dui:VerticalStackLayout>

Properties

Inspect the components properties class to further customize and use it.