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}">
<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 IsEnabled { get; set; } = true;
public bool IsChecked { 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 from the viewmodel.
The ActiveTabChanged property 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 the DataSource collection objects which keeps 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 | |
|---|---|---|---|---|---|
 |
ActiveTabKey | Object | Gets or sets the key of a tab that is currently active. |
attribute
bindable
|
null |
|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | |
|
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static |
|
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
static value
bindable
|
null |
|
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null |
|
ID | String | Gets or sets the unique control ID. |
attribute
static value
|
null |
|
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null |
|
TabContentTemplate | ITemplate | Gets or sets the template rendering contents of tabs. This property is used when tabs are loaded from the DataSource property. |
inner element
static value
|
null |
|
TabEnabledBinding | IValueBinding | Gets or sets the binding which retrieves whether a tab from DataSource is enabled and can be activated. |
attribute
static value
bindable
|
null |
|
TabHeaderTemplate | ITemplate | Gets or sets the template for headers of tabs. This property is used when tabs are loaded from the DataSource property. |
inner element
static value
|
null |
|
TabHeaderTextBinding | IValueBinding | Gets or sets the binding which retrieves the text of the header a tab from DataSource. |
attribute
static value
bindable
|
null |
|
TabIsActiveBinding | IValueBinding | 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
static value
bindable
|
null |
|
TabKeyBinding | IValueBinding | Gets or sets the binding which retrieves the unique key of a tab from DataSource. |
attribute
static value
bindable
|
null |
|
Tabs | List<TabItem> | Gets or sets a collection of tabs rendered inside. |
inner element
static value
default
|
null |
|
TabVisibleBinding | IValueBinding | Gets or sets the binding which retrieves whether a tab from DataSource is visible. |
attribute
static value
bindable
|
null |
|
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
| Name | Type | Description | |
|---|---|---|---|
 |
ActiveTabChanged | Command | Gets or sets the command that will be triggered when the active tab is changed. |