Custom color to the HeaderBackground property

[Birgit]

Hello

 

how can I set custom color to the HeaderBackground property of the RadLayoutControl (LayoutControlExpanderGroup)?

I tried similar way for setting implicit styles mechanism like setting the HeaderBackground of RadLayoutControl, but this not work:

<Style TargetType="telerik:RadLayoutControl" BasedOn="{StaticResource RadLayoutControlStyle}">
   <Setter Property="HeaderBackground" Value="Yellow" />
</Style>

 

It can not be difficult, but I do not find anything in the documentation.

Thanks for any help.

Birgit

[Dinko | Tech Support Engineer]

Hi Birgit,

Thank you for your interest in RadLayoutControl. 

LayoutControl doesn't expose such property. In your case, you want to change the style of the LayoutControlExpanderGroup. To do this you can extract and edit the default template of the control. You can take a look at the Editing Control Templates help article which describes how to extract the default template. 

In your case, in the extracted template you can navigate to the Style set to the HeaderButtonStyle property of the RadExpander and change the Background property. I have prepared a sample project which demonstrates this approach. Can you give this project a try and let me know if it works for your scenario.

Regards,
Dinko
Progress Telerik

[Birgit]

Hello Dinko

many thanks for your answer and your example. It works good, but I am very surprised - I have to overwrite the entire style just to change the color? This solution has problems with future Telerik updates, right? I'm not sure, but I think I've then always an 'old' LayoutControlExpanderGroup...or not?

 

Kind regards

Birgit

 

Kind regards

Birgit

[Dinko | Tech Support Engineer]

Hello Birgit,

You are right. Basically, every new release you need to download the latest version and extract the template again in order to have up to date template. 

What I could suggest you is to use extension method. You can subscribe to the Loaded event of the RadLayoutControl. In the event handler, using this method you can search in the visual tree of the expander group in order to get the RadToggleButton control and change its Background property. Using this approach you don't have to worry about the new version of our controls.

public MainWindow()
{
    InitializeComponent();
    this.myLayoutControl.Loaded += MyLayoutControl_Loaded;
}

private void MyLayoutControl_Loaded(object sender, RoutedEventArgs e)
{
    var toggleButton = this.myExpanderGroup.ChildrenOfType<RadToggleButton>().FirstOrDefault();
    if (toggleButton != null)
    {
        toggleButton.Background = new SolidColorBrush(Colors.Purple);
    }
}

I have logged a feature request in our Feedback Portal for creating a property in order to customize the header of the LayoutControlExpanderGroup.

Regards,
Dinko
Progress Telerik

[Birgit]

Hi Dinko

thank you for the feature request.

I like your proposal, so I'll use the ChildrenOfType<T>() extension method.

Thank you very much

Birgit

[Daniel]

Why wouldn't simple properties like this be exposed?  I too want to use the LayoutControlExpanderGroup but if I have to extract the entire style to change a few things it seems like I'm wasting more time on a product that's supposed to save me time.  I came here to ask if I can make the header smaller with rounded corners and different colour but I don't even want to know what that would entail.

 

So far I'm not impressed with Telerik for WPF.

[Dinko | Tech Support Engineer]

Hi Daniel,

Speaking in general, editing the control template is the recommended approach used in the framework for achieving such visual customizations. RadLayoutControl has a lot of visual elements and exposing properties for each one of them would burden the public API of the control. In your case, to change the corner radius of the header you can navigate to a Border with x:Name="BorderVisual" and the first child Border and set their CornerRadius property. To change the width for example you can set the Width property of the  x:Name="BorderVisual" Border element. I have modified the project from my first reply to demonstrate this steps.

Regards,
Dinko
Progress Telerik