[Solved] Close button on RadTabControl

[Adam]

Hi, I've seen your demo How to Add Close Button to the Tab Headers and I works fine but I cannot make it works when I inject other views (UserControl) as a tab on RadTabControl. 

The simplest way to show this is:
a) that works fine (when using TabItemsModel)

tabControl.ItemsSource = tabItemsModel;

b) that will not work (tabs works and looks normal - without any customization from ClosableStyle)

<telerik:RadTabControl x:Name="tabControl" ItemContainerStyle="{StaticResource ClosableStyle}">
    <telerik:RadTabItem Header="One"></telerik:RadTabItem>
    <telerik:RadTabItem Header="Two"></telerik:RadTabItem>
    <telerik:RadTabItem Header="Three"></telerik:RadTabItem>
</telerik:RadTabControl>

[Tina Stancheva]

Hi Adam,

The solution demonstrated in the documentation demonstrates a data-binding scenario in which the RadTabItem containers are dynamically generated to wrap the business data. This is why in this scenario you need to apply a HeaderTemplate and ContentTemplate on each RadTabItem. Otherwise, the control won't know how to visualize the data items.

However, when the control is declaratively populated with items in XAML, then the DataTemplates won't be applied on the items as they have a defined Header property. You need to have in mind that a DataTemplate is only applied on a property which is bound to a data object.

So in your case, you just need to place the close button in the header of each tab:

<telerik:RadTabControl x:Name="tabControl">
    <telerik:RadTabItem>
        <telerik:RadTabItem.Header>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <ContentControl Content="Tab 1" />
                <telerik:RadButton Grid.Column="1" Width="16" Height="16" Margin="3 0 0 0"
                        HorizontalAlignment="Center" VerticalAlignment="Center" Content="x"
                        example:RoutedEventHelper.EnableRoutedClick="True" Padding="0" />
            </Grid>
        </telerik:RadTabItem.Header>
        <TextBlock VerticalAlignment="Center" Text="Content of Tab 1" TextAlignment="Center" />
    </telerik:RadTabItem>
    ...
</telerik:RadTabControl>

I attached a sample solution demonstrating this approach, so please give it a try and let me know if it helps.

Kind regards,
Tina Stancheva
the Telerik team