TabItemExt ControlTemplate question

[Christina Robin]

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();
wsCount++;
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");
tabItemExt.Focus();
}


This is my tab code inside of my Window.xaml


Grid.Column="0" Grid.Row="0"
TabItemLayout="SingleLine"
TabStripPlacement="Bottom"
SelectedItemChangedEvent="selectedTabChangedEvent"
Background="{DynamicResource {x:Static themes:RibbonCommonDictionary.TabContentBackgroundBrushKey}}"
TabItemSize="ShrinkToFit"
HotTrackingEnabled="False"
Name="tabControlExt"
EnableLabelEdit="True"
CloseButtonType="Common"
FlowDirection="LeftToRight" Foreground="Black">






Margin='10,0,0,0' Height='20' Width='30'
CornerRadius='5,5,0,0'>



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







MouseEnter="TabItemBlank_MouseEnter"
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!
Tina

[Christina Robin]

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



border_1128ac0b.zip

[Christina Robin]

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:



BorderBrush="DarkGray"
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}}" />








titleProblem_50ba88be.zip

[Hemanth Kumar K]

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,

Regards,
HemanthKumar K




ControlTemplate_TabItem_e905fc58.zip

[Christina Robin]

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!
Tina

[Hemanth Kumar K]

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,

Thanks,
HemanthKumar K



CustomTemplateEditHeader_f4cfddd1.zip