# TabControl

xDockTab is used as the root/parent of the main module and anytime a tabItem may be docked.

xTabControl is more lightweight. It can be used with the option “ShowTabs” on false to overlay panels.

Both controls trigger the same events: TabChanging, tabChanged, have selectedIndex, selectedItem etc.

The following example shows how to display a certain control (in this case DataGrid), depending on the value of a RadioButton. 

* Add TabControl on the Grid
* Add one TabItem for each control (DataGrid) that wants to be displayed.

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MYEPB9Je-MMVDZJ9Y_o%2F-MYEfrtW8wu5WdNl55dd%2FTabControl_1.png?alt=media\&token=0bc3f377-0f11-4766-8746-ba29535ce385)

* Hide (if needed) Tab Headers by unchecking ShowTabs option

![](https://2522353545-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXf5GuikRIHooatf_sm%2F-MYEPB9Je-MMVDZJ9Y_o%2F-MYEfy8PXTf0EZaAVPRD%2FTabControl_2.png?alt=media\&token=c5a67d0a-42f3-4740-ad74-7626795a6b62)

* Make TabControl visible according to selected RadioButton-value

```csharp
public override void ItemChanged(UIElement container, FrameworkElement element, object selectedItem, object newValue, object oldValue)
{
    base.ItemChanged(container, element, selectedItem, newValue, oldValue);

    //Rows can be added to the grid -> Save before change tab
    if (element == rbgBezogen)
    {
        switch (rbgBezogen.Value.ToInt())
        {
            case 10:
                BusObj.Save();
                tabControl.SelectedItem = tabArt;
                break;
            case 20:
                BusObj.Save();
                tabControl.SelectedItem = tabGP;
                break;
        }
    }
}
```