When using the Office Black theme the tabs in the xmlTabControl have a gap inbetween them. How can i resize/remove this gap?
I've dug down with Snoop but I can't figure out where the width between the tabs is set.
Thanks,
Jamie
Hello Jamie,
I believe this is because when the theme is Office2kBlack, the XamTabControls uses Padding and the TabItemEx elements have margin set. You can create styles for them and set these properties:
<Style TargetType="{x:Type igWindows:XamTabControl}">
<Setter Property="Padding" Value="0"/>
</Style>
<Style TargetType="{x:Type igWindows:TabItemEx}">
<Setter Property="Margin" Value="0"/>
Hi Alex,
Thanks for the quick reply... Your suggest does remove the spacing between the tabs but it also seems to remove the styling from the tabs altogether.
any other ideas for this one?
thanks,
Jamie,
How is the styling from the other tabs removed? Do you have two separate styles for the TabItemEx. Please note that only one style can be applied. If you have set a Theme, you have to put this style inside the Resources of the XamTabControl.
Thanks for your insite Andew, your suggestion did what i needed
If you provide a style then the theme wouldn't apply since in WPF there can only be 1 local style. For a discussion of theme vs local/implicit styles and our theming please refer to the following page.
With regards to the spacing, that is just the way the default templates are set up for that theme. The template for the TabItemEx was designed to emulate the look of the Office 2007 ribbon tabs where the tabs are smaller until you hottrack over it and the hottracked look has a glow. Since the controls are lookless all of this is handled within the template so if you need to change the look outside of basic properties like the Background, BorderBrush, etc. on elements then you usually need to retemplate them. In this case you may be able to get close to what you want by setting the InterTabSpacing of the xamTabControl to something like -5. Note if you use to much the items are going to overlap since the z-index of the elements doesn't change based on mouse over (again you would have to do this in a style or template trigger).
I've attached a sample project that demonstrates the theme getting changed.
Thanks for the help,