New to Telerik UI for WPF? Download free 30-day trial

Key Properties

RadTabControl is an advanced control that allows you to control its behavior in order to achieve maximum UX satisfaction.

In this chapter we will show you some of the ways you can use to customize the control behavior.

ReorderTabRows

Using the ReorderTabRows property you can control how the tab item rows are ordered in case of multiple lines. The default behavior is to keep the selected tab item always on the lowest row and move the other rows above.

The default value for the ReorderTabRows property is True.

Example 1: ReorderTabRows

    <telerik:RadTabControl x:Name="radTabControl"  ReorderTabRows="True"> 
        <telerik:RadTabItem Header="Calendar"/> 
        <telerik:RadTabItem Header="Colors" IsBreak="True"/> 
        <telerik:RadTabItem Header="Quote"/> 
    </telerik:RadTabControl> 

Figure 1:ReorderTabRows set to True

Telerik TabControl ReorderTabRows

Figure 2: ReorderTabRows set to False

Telerik TabControl ReorderTabRows

AllowDragReorder

You can allow/disallow the user to reorder the tab items of your control throught the AllowDragReorder.

The default value for the AllowDragReorder property is False.

Example 2: Allow reordering the tab items

    <telerik:RadTabControl x:Name="radTabControl" AllowDragReorder="True"> 
        <telerik:RadTabItem Header="Calendar"/> 
        <telerik:RadTabItem Header="Colors"/> 
        <telerik:RadTabItem Header="Quote"/> 
    </telerik:RadTabControl> 

Enable or Disable Tab Items

You can set the IsEnabled property to prevent the user from interacting with the whole tab control or with certain tab items. You can find this property in both RadTabControl and RadTabItem.

Example 3: Disable tab item

    <telerik:RadTabControl x:Name="radTabControl"> 
        <telerik:RadTabItem Header="Calendar"/> 
        <telerik:RadTabItem Header="Colors" /> 
        <telerik:RadTabItem Header="Disabled Item" IsEnabled="False"/> 
        <telerik:RadTabItem Header="Quote"/> 
    </telerik:RadTabControl> 

Figure 3: Disable tab item

Telerik TabControl Disabled Tab Item

TabStripPlacement

You can change the position of the tab strip throught the TabStripPlacement property. More information regarding this functionality can be found here

OverflowMode

By default, the RadTabControl will display two arrows when the width of the tab items exceeds the available width with which you can bring the rest of the items into view. To see all the RadTabItem in the ViewPort, you can set the OverflowMode property to Wrap.

Example 4: Show all tab items in the viewport

    <telerik:RadTabControl x:Name="radTabControl" OverflowMode="Wrap"> 
        <!-- large number of items --> 
    </telerik:RadTabControl> 

Figure 4: Show all items in the ViewPort

Telerik TabControl OverflowMode

AllowDragOverTab

This property indicates whether dragging objects over a tab item will select this TabItem. The default value for the AllowDragOverTab property is False.

The DragOverTab feature will work only if the Telerik.Windows.Controls.DragDrop.RadDragAndDropManager is used.

Example 5: Setting AllowDragOverTab to true

    <telerik:RadTabControl x:Name="radTabControl" OverflowMode="Wrap"/> 

Align

The RadTabControl allows you to control the alignment of the tab items in the row - Left, Right, Center, Justify. More information can be found in the Tabstrip alignment

TabOrientation

RadTabControl allows you to control whether to display the tabs horizontally or vertically. You can do that through the Orientation property of the tab control. Its default value is Horizontal and therefore the items are positioned horizontally. Setting the property to Vertical will rotate the headers of the tab items at 90 degrees.

Example 6: Change orientation of the tab items

    <telerik:RadTabControl x:Name="radTabControl" TabOrientation="Vertical" > 
        <telerik:RadTabItem Header="Calendar" /> 
        <telerik:RadTabItem Header="Colors" /> 
        <telerik:RadTabItem Header="Quote"/> 
    </telerik:RadTabControl> 

Figure 5: TabOrientation set to Vertical

Telerik TabControl TabOrientation

AdditionalContent

The RadTabControl control exposes a property, which allows you to display additional content on its right side of the control.

Example 7: Add AdditionalContent

    <telerik:RadTabControl x:Name="radTabControl" > 
        <telerik:RadTabControl.AdditionalContent> 
            <TextBlock Text="Sample Text" VerticalAlignment="Center"/> 
        </telerik:RadTabControl.AdditionalContent> 
        <telerik:RadTabItem Header="Calendar" /> 
        <telerik:RadTabItem Header="Colors" /> 
        <telerik:RadTabItem Header="Quote"/> 
    </telerik:RadTabControl> 

Figure 6: Add AdditionalContent

Telerik TabControl AdditionalContent

CloseTabsOnMouseMiddleButtonDown

To close the tab on mouse middle button down you can set the CloseTabsOnMouseMiddleButtonDown property of the RadTabControl to True.

ScrollMode

When the width of the control does not allow all tabs to be displayed, two scrolling buttons appear to the left and to the right side of the tab items. You can choose one of the ScrollMode values in order to control how the tab items should be scrolled.

AllTabsEqualHeight

This property specifies whether all displayed tabs have equal height.

The default value for the AllTabsEqualHeight property is True.

TabControl DropDown Menu

When the width of the control does not allow all tabs to be displayed, two scrolling buttons appear to the left and to the right side of the tab items. For faster navigation the control expose drop down menu which contains a list of all tab items inside the control. To show the dropdown button menu you can set the DropDownDisplayMode to __Visible.

The DropDownDisplayMode property could be set to any of the following values: * Collapsed: The drop down will never be shown. * Visible: The drop down will always be visible. * WhenNeeded: The drop down will be shown only when there is not enough space the Tabs to be arranged.

Example 8: Show DropDownMenu button

    <telerik:RadTabControl x:Name="radTabControl" DropDownDisplayMode="Visible"> 
        <!-- large number of items --> 
    </telerik:RadTabControl> 

Figure 7: Show DropDownMenu button

Telerik TabControl DropDownMenu Button

See Also

In this article
Not finding the help you need? Improve this article