This is a migrated thread and some comments may be shown as answers.

Custom color to the HeaderBackground property

6 Answers 96 Views
LayoutControl
This is a migrated thread and some comments may be shown as answers.
Birgit
Top achievements
Rank 1
Birgit asked on 13 Jul 2017, 07:10 AM

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

6 Answers, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 17 Jul 2017, 12:59 PM
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
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 you to write beautiful native mobile apps using a single shared C# codebase.
0
Birgit
Top achievements
Rank 1
answered on 17 Jul 2017, 02:06 PM

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

0
Accepted
Dinko
Telerik team
answered on 20 Jul 2017, 12:27 PM
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
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.
0
Birgit
Top achievements
Rank 1
answered on 20 Jul 2017, 01:10 PM

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

0
Daniel
Top achievements
Rank 1
answered on 20 Nov 2018, 08:12 PM

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.

0
Dinko
Telerik team
answered on 22 Nov 2018, 01:38 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
LayoutControl
Asked by
Birgit
Top achievements
Rank 1
Answers by
Dinko
Telerik team
Birgit
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Share this question
or