We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

TabItemExt ControlTemplate question

Thread ID:





90858 Oct 22,2009 10:27 AM UTC Nov 4,2009 06:05 AM UTC WPF 5
Tags: Tools
Christina Robin
Asked On October 22, 2009 10:27 AM UTC

I'm in the process of creating ControlTemplates for tabExtItems.
For some reason, my tab Header content appears upside down. I have a feeling this is because my tabStripPlacement is set to Bottom. Is there a way around this which can simplify my code?

This is the ControlTemplate code inside my ImageResources.xaml

BorderBrush="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentOuterBorderBrushKey}}"
Background="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentBackgroundBrushKey}}">
BorderBrush="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentInnerBorderBrushKey}}">

This is how I set the new tab's template programmatically:

private void NewTabClick(object sender, RoutedEventArgs e)
TabItemExt tabItemExt = new TabItemExt();
tabItemExt.Name = "Workspace" + wsCount;
tabItemExt.Header = "Workspace " + wsCount;
tabItemExt.Content = new Workspace();
tabControlExt.Items.Insert(tabControlExt.Items.Count - 1, tabItemExt);
tabItemExt.IsSelected = true;
tabItemExt.Template = (ControlTemplate)FindResource("generalTabStyle");

This is my tab code inside of my Window.xaml

Grid.Column="0" Grid.Row="0"
Background="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentBackgroundBrushKey}}"
FlowDirection="LeftToRight" Foreground="Black">

Margin='10,0,0,0' Height='20' Width='30'

Margin='0,0,0,0' MinHeight='20' MinWidth='70'

Name="TabItemBlank" Template="{StaticResource myTabItem}"
Width="40" MaxWidth="40" IsSelected="True" />

Also one more question,
I want to set a trigger that will use a different ControlTemplate when tabItemExt is selected as well as if there is a mouse hover event, but I can't seem to figure it out. Could you provide me with an example code to show me how?

Thanks a lot!

Christina Robin
Replied On October 22, 2009 10:36 AM UTC

here you can see the tabs using the ControlTemplate have headers that appear upside down


Christina Robin
Replied On October 23, 2009 09:39 AM UTC

I managed to flip the header myself and using triggers I've been able to change the color on an IsSelected event, so disregard the posts above.

I do have a new problem, however. After using a ControlTemplate, the normal syncfusion tab behavior is overridden. If there are too many tabs on the screen, a syncfusion tab normally cuts the header short so it looks like this "Ta..." and if there are even more tabs, they show up blank (see attached file). As you can see from the pic, my custom tabs do not inherit this behavior. How can I account for it in my Control Template?

Also, my custom ControlTemplate overrides the ability to double click and edit the tab header. How can I gain back this functionaltiy in my ControlTemplate code? Please see the code I have currently below:

Background="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentBackgroundBrushKey}}">
BorderBrush="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentInnerBorderBrushKey}}">

Value="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabBackgroundSelectedBrushKey}}" />
Value="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabInnerBorderSelectedBrushKey}}" />


Hemanth Kumar K [Syncfusion]
Replied On October 23, 2009 07:30 PM UTC

Hi Christina,

Thanks for Choosing Syncfusion products,

To achieve the feature (1.Syncfusion tab normally cuts the header short) we modified your control template in this attachment.
(2) Editing the tab header when control template is
overrided is not possible , because you are overriding the control template of tab item in which we implemented the logics for editing the tab item header. so if you want to
tab header editing feature . you need to implement such a feature in your control template . we attached our default control template and style for tab item with tab header editing
feature for your general idea. when you are using this template to create your own Control Template the PART name mentioned in Tab item template should not be changed . because we
are using this name to refer in our internal source to create tab items.

Please let us know if you have any questions,

HemanthKumar K


Christina Robin
Replied On November 3, 2009 08:37 AM UTC

Hi, thanks for the response and the sample code.
It seems like I only need this code:

the problem is I don't have the static resource EditableDataTemplate. Also, how are the tabs triggering the input box to pop up when I double click? Do I have to implement an event handler for double click and write some code on the backend? Could you explain the process of working with syncfusion built in functions(ie: what does UseCustomEditable Template, IsEditing do?). Do I need to use HeaderedContentControl? and what does it do? I'm still not sure what I should do on my side to get editable tab headers working.

as always, thanks for your time!

Hemanth Kumar K [Syncfusion]
Replied On November 4, 2009 06:05 AM UTC

Hi Christina,

We Created a simple sample for custom control template with tab header editing feature.In this we placed a textbox inside control template with default state collapsed and visiblity for textbox and textblock is handled in MouseDoubleClick event for tabItemExt.please find the attached file.

Please let us know if you have any questions,

HemanthKumar K



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon