Styling in the new themes

[Mily]

Guys,

I really like new redesigned themes, however I don't quite understand the implementation. I noticed most of the style attribute values (i.e. margin or padding) are no longer template-bound but used directly:

Telerik.Windows.Themes.Summer.g.resources:themes/summer/tabcontrol.xaml

<!-- -->
<Thickness x:Key="TabItem_Margin">1 0</Thickness>


<!-- top tab template  -->
<ControlTemplate x:Key="TabItemTemplate" TargetType="telerikNavigation:RadTabItem">
        <Grid x:Name="wrapper">

            <VisualStateManager.VisualStateGroups>
                        <!-- ... -->
            </VisualStateManager.VisualStateGroups>


            <!-- normal -->
            <Border x:Name="NormalVisual"
                    Margin="{StaticResource TabItem_Margin}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{StaticResource TabItem_OuterCornerRadius}">
                <Border BorderBrush="{StaticResource TabItem_InnerBorder_Normal}"
                        CornerRadius="{StaticResource TabItem_InnerCornerRadius}"
                        BorderThickness="{StaticResource TabItem_InnerBorderThickness}" />
            </Border>

What I can see the margin is set to {StaticResource TabItem_Margin} instead of {TemplateBinding Margin} (which obviously would be set to a default value of TabItem_Margin in the style declaration as it had been implemented before). Hence, it is not possible to amend just the margin without defining the whole template for TabItem or playing with static resource reference fallback mechanism. Is it the indented implementation or something you are planning to change in the future?

Kind Regards,

Milosz

[Dimitrina]

Hi Mily,

Thank you for your feedback. We use the Margin property this way because our controls share the same control templates throughout all of our themes. We do not recommend binding the Margin in a control template because whenever the Margin property is set to the control, it's applied even without being bound within the control template. This means that if you bind the Margin in the control template, when you set a margin to the control, the value will be set twice e.g. when you set Margin=5, the control will be rendered with a margin of 10.

Please find attached an example.If you have further questions please do not hesitate to ask us.

Greetings,
Dimitrina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mily]

Dimitrina,

Thank you for your answer but I think my question was not understood. Short version of my question is why we need this additional, non-configurable margin in the top of the radtabcontrol? You could get the same effect by setting margin=“0,2,0,0” on the RadTabItem. What I need to do now to remove this extra margin is to rejig entire template for RadTabItem. Please see the attached screenshot.

 

Kind Regards,

 

Milosz

[Dimitrina]

Hi Mily,

I hope I  understood you correctly. I suppose that you want to remove the space between TabItems and top of the header. This space is due to the style of TabControl control in it we have ScrollViewer control which have Margin="2 4 2 -1". If you want to remove this space you have to edit the control template of the TabControl or you can find attached project whit a workaround. 

If you have further questions please do not hesitate to ask us.

I hope this will help you.

All the best,
Dimitrina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.