Remove gap above tabs?

[Steve]

I would like to remove the gap above the tabs (see red box in attached picture) so that they align with other controls. Is there a way to do this without redefining the entire control template?

 

It doesn't need to be in XAML; I can find and modify the element in code behind if needed, but I can't figure out where the gap is even coming from. I used this technique to edit some margins that were buried deep within control templates.I looked through the live visual tree but didn't see any obvious margins or padding that were controlling it.

[Sia]

Hello,

This top margin is set to the ScrollViewer element (with x:Name ScrollViewerElement) and several other elements in the TabControl default ControlTemplate.

What I would suggest is to set a custom template for it in your application where to modify the following properties:

• Change the default margin of LayoutTransformControl with x:Name AdditionalContentTransform to be "0 2"
• Overwrite the default margin of ToggleButton with x:Name DropDownButtonElement to be "2 2 4 2"
• Change the default margin of RepeatButton with x:Name LeftScrollButtonElement to be "4 2 2 2"
• Change the default margin of RepeatButton with x:Name RightScrollButtonElement to be "2 2 0 2"
• Change the default margin of ScrollViewer with x:Name ScrollViewerElement to be "2 0"

All changes can be found in the style I have attached to my answer. If you do not use other orientations of the TabControl you can remove some of the visual states to make the custom style shorter.

I understand your concerns about using custom templates. However I would recommend this approach instead of looking through the VisualTree and set properties in code behind as it is the natural way of styling controls in WPF. Just keep in mind that all custom styles should be in a separate resource dictionary (one or more depending on the number of customizations) and you need to merge it after the Telerik ones which will make upgrading easier.

Regards,
Sia
Progress Telerik