TabControl

in namespace DotVVM.BusinessPack.Controls

Renders a collection of tabs with specific contents.

Usage & Scenarios

Renders a container with tabs that are defined in the markup, or generated from a collection in the viewmodel.

Sample 1: Basic Usage

The tabs can be defined inside the <bp:TabControl> individually. Each tab can have a different content in this case.

Alternatively, the tabs can be generated using the DataSource property bound to a collection in the viewmodel. In this case, the TabHeaderTemplate and TabContentTemplate properties are used to specify the header and content of the tabs.

If the tab header contains only a text value, you can use the HeaderText property instead of the HeaderTemplate.

<%-- Hardcoded tabs --%>
<bp:TabControl>
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem>
        <HeaderTemplate>
            <i>Tab 2</i>
        </HeaderTemplate>
        <ContentTemplate>
            <p>Tab 2 description</p>
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<%-- Templated tabs --%>
<bp:TabControl DataSource="{value: Countries}"
               TabIsActiveBinding="{value: IsSelected}"
               TabKeyBinding="{value: Id}">
    <TabHeaderTemplate>
        {{value: Name}}
    </TabHeaderTemplate>
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } },
            new Country { Id = 3, Name = "United States", Cities = new List<string> { "Washington", "New York" } }
        };
    }
}
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample1
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsSelected { get; set; }
    }
}

Sample 2: Tab Key

The ActiveTabKey property specifies a key of the tab which is currently selected. The key of a tab is automatically generated by default. But you can override it by setting the Key property. The data-binding works in both ways, so it is possible to switch the tabs by changing the viewmodel property bound to ActiveTabKey.

The ActiveTabChanged event specifies a command in the viewmodel which is triggered when the user switches the tab.

<bp:TabControl ActiveTabKey="{value: ActiveTabKey}"
               ActiveTabChanged="{command: TabChanged()}">
    <bp:TabItem HeaderText="Tab 1">
        <ContentTemplate>
            <p>Tab 1 description</p>
            <bp:Button Text="Go to Tab 2"
                       Click="{command: ActiveTabKey = "Other"}" />
        </ContentTemplate>
    </bp:TabItem>
    <bp:TabItem Key="Other" HeaderText="Tab 2">
        <ContentTemplate>
            <p>Tab 2 description</p>
            <bp:Button Text="Go to Tab 1"
                       Click="{command: ActiveTabKey = "Tab 1"}" />
        </ContentTemplate>
    </bp:TabItem>
</bp:TabControl>

<p>Active tab has changed {{value: ChangeCount}} times.</p>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public int ChangeCount { get; set; }

        public string ActiveTabKey { get; set; } = "Other";

        public void TabChanged()
        {
            ChangeCount++;
        }
    }
}

Sample 3: Alternative Tab Switching

If you don't want to use the ActiveTabKey property to identify the tab which is selected, there is an alternative way.

In the data-bound tabs mode, you can use the TabIsActiveBinding property. This property is bound to a bool property in each of the DataSource collection items, and it will keep track of whether the tab is selected or not.

<bp:TabControl DataSource="{value: Countries}"
               TabIsActiveBinding="{value: IsSelected}"
               TabHeaderTextBinding="{value: Name}"
               TabKeyBinding="{value: Id}">
    <TabContentTemplate>
        <ul>
            <dot:Repeater DataSource="{value: Cities}">
                <ItemTemplate>
                    <li>{{value: _this}}</li>
                </ItemTemplate>
            </dot:Repeater>
        </ul>
    </TabContentTemplate>
</bp:TabControl>

<br />

<dot:Repeater DataSource="{value: Countries}">
    <ItemTemplate>
        {{value: Name}} Tab {{value: IsSelected ? "is" : "is not"}} selected.
        <br />
    </ItemTemplate>
</dot:Repeater>
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<Country> Countries { get; set; } = new List<Country> {
            new Country { Id = 1, Name = "Czech Republic", Cities = new List<string> { "Praha", "Brno" } },
            new Country { Id = 2, Name = "Slovakia", Cities = new List<string> { "Bratislava", "Košice" } }
        };
    }
}
using System.Collections.Generic;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.TabControl.sample3
{
    public class Country
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<string> Cities { get; set; } = new List<string>();
        public bool IsEnabled { get; set; } = true;
        public bool IsSelected { get; set; }
    }
}

Properties

Name Type Description Notes Default Value
property icon ActiveTabKey Object Gets or sets the key of a tab that is currently active.
attribute
inner element
static value
bindable
default
null
property icon DataSource IEnumerable
attribute
inner element
static value
bindable
default
null
property icon TabContentTemplate ITemplate Gets or sets the template rendering contents of tabs. This property is used when tabs are loaded from the DataSource property.
attribute
inner element
static value
bindable
default
null
property icon TabEnabledBinding IValueBinding<Boolean?> Gets or sets the binding which retrieves whether a tab from DataSource is enabled and can be activated.
attribute
inner element
static value
bindable
default
null
property icon TabHeaderTemplate ITemplate Gets or sets the template for headers of tabs. This property is used when tabs are loaded from the DataSource property.
attribute
inner element
static value
bindable
default
null
property icon TabHeaderTextBinding IValueBinding<String> Gets or sets the binding which retrieves the text of the header a tab from DataSource.
attribute
inner element
static value
bindable
default
null
property icon TabIsActiveBinding IValueBinding<Boolean?> Gets or sets the binding which determines whether a tab from DataSource is active or not. Only one tab can be active at the same time.
attribute
inner element
static value
bindable
default
null
property icon TabKeyBinding IValueBinding Gets or sets the binding which retrieves the unique key of a tab from DataSource.
attribute
inner element
static value
bindable
default
null
property icon Tabs List<TabItem> Gets or sets a collection of tabs rendered inside.
attribute
inner element
static value
bindable
default
null
property icon TabVisibleBinding IValueBinding<Boolean?> Gets or sets the binding which retrieves whether a tab from DataSource is visible.
attribute
inner element
static value
bindable
default
null

Events

Name Type Description
event icon ActiveTabChanged Command Gets or sets the command that will be triggered when the active tab is changed.

HTML produced by the control