Changing the TabControlExt ItemContainerStyle to bind header

[Derek Spurlock]

I have added the following to the TabControlExt xaml

            <syncfusion:TabControlExt.ItemContainerStyle>
                <Style TargetType="TabItem">
                    <Setter Property="Header" Value="{Binding DataContext.Title}" />
                </Style>
            </syncfusion:TabControlExt.ItemContainerStyle>

This is to facilitate binding the header of a tab item.  I am also using SkinManager to set the VisualStyle property of the tab control.  When the style is implemented the style of the tab item header reverts back to the default.  I would like to maintain the Metro Style for the tab header but be able to get the text from the binding.

What am I doing wrong?

[Kannan R]

Hi Derek, 

Thank you for contacting Syncfusion Support. 

In order to merge the style and override it in an application level, the BasedOn property should be used to maintain the same SfSkinManager style. In this, we have used the AeroTabItemExtStyle BasedOn key for TabItemExt. Please make use of the below code snippet for the same. 

Code snippet[XAML] 

 

<Window x:Class="TabControlExt_ItemContainerStyle.MainWindow" 

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

        xmlns:local="clr-namespace:TabControlExt_ItemContainerStyle" 

        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 

        xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" 

        skin:SfSkinManager.VisualStyle="Metro" 

        mc:Ignorable="d"  

        Title="MainWindow" Height="350" Width="525"> 

    <Window.DataContext> 

        <local:ViewModel/> 

    </Window.DataContext> 

    <Grid> 

        <Grid.RowDefinitions> 

            <RowDefinition Height="auto"></RowDefinition> 

            <RowDefinition></RowDefinition> 

        </Grid.RowDefinitions> 

        <syncfusion:TabControlExt x:Name="Tabcontrol" Grid.Row="1" ItemsSource="{Binding TabCollection}" DisplayMemberPath="Header"> 

            <syncfusion:TabControlExt.ItemContainerStyle> 

                <Style TargetType="{x:Type syncfusion:TabItemExt}" BasedOn="{StaticResource AeroTabItemExtStyle}"> 

                    <Setter Property="Header" Value="{Binding Title}" /> 

                </Style> 

            </syncfusion:TabControlExt.ItemContainerStyle> 

        </syncfusion:TabControlExt> 

    </Grid> 

</Window> 

Please make use of the below sample for your reference. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TabControlExt_ItemContainerStyle-1679234455.zip  

Please find the link for UG documentation regarding how to override the theme using BasedOn property .  

  

UG Link: https://help.syncfusion.com/wpf/skinmanager/how-to/override-syncfusion-themes  

Please check the above solution and let us know if it is helpful. 

Regards, 

Kannan 

[Derek Spurlock]

That is exactly what I needed.  I knew about BasedOn but had no idea what the resource key was to use.  Thank you.

[Kannan R]

Hi Derek, 

Thank you for your feedback and please let us know if you need any further assistance. 

Regards, 

Kannan 

[Tibor]

Hi Kannan,

I am trying to run the the sample provided without any modification but get the error: The resource 'AeroTabItemExtStyle' could not be resolved.

Thank you,

Tibor

[Unknown]

Hi Tibor, 

 

Thanks for your update. 

 

We have checked your requirement and created a sample to meet your requirement in which the applied style for TabItemExt will not be overridden by applied theme. Please refer the below sample and screenshot for same. 

 

Sample : https://www.syncfusion.com/downloads/support/forum/140387/ze/TabControlExt_ItemContainerStyle2016181366  

 

Screenshot :  

 

 

Regards, 

Niranjan Kumar Gopalan 

[Tibor]

Thank you Niranjan!

[Unknown]

Hi Tibor, 

Thanks for your update. 

We are glad to be of assistance. Have a safe day! 

Regards, 

Niranjan Kumar Gopalan