Remove gap above tabs?

2 posts, 0 answers
  1. Steve
    Steve avatar
    100 posts
    Member since:
    May 2014

    Posted 22 Sep 2017 Link to this post

    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.

  2. Sia
    Sia avatar
    757 posts

    Posted 22 Sep 2017 Link to this post


    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.

    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top