Radbutton back color

[Thanh]

Hi,

 I'm working with RadButton, (like attached image). When click on WorkWeek button, the background is changed as attached image, but after click it change to color as the color when mouse on hover the button. But I want when after click it still keep color as the color when I click, and then I click on another button (Week button for example), that backcolor is set for another button (not set for WorkWeek button any more). How can I do it?

 Look forward to your reply,

Pham Thanh.

[Hristo]

Hi Thanh,

Thank you for writing.

The BackColor property is usually set through a theme defining various colors for the different states. TPF exposes an API for overriding the theme settings at run-time preserving the styles defined for all the element states: Override Theme Settings at Run Time.

I created a simple example for toggling a color between two buttons inside RadRibbonBar. Please check my code snippet below: 

public partial class Form1 : Form
{
    private Color initialColor;

    public Form1()
    {
        InitializeComponent();

        this.initialColor = this.radButtonElement1.BackColor;

        this.radButtonElement1.Click += radButtonElement1_Click;
        this.radButtonElement2.Click += radButtonElement2_Click;
    }

    private void radButtonElement1_Click(object sender, EventArgs e)
    {
        this.ResetColor(this.radButtonElement2);
        this.ChangeBackColor(((RadButtonElement)sender));
    }

    private void radButtonElement2_Click(object sender, EventArgs e)
    {
        this.ResetColor(this.radButtonElement1);
        this.ChangeBackColor(((RadButtonElement)sender));
    }

    private void ResetColor(RadButtonElement button)
    {
        if (button.BackColor != this.initialColor)
        {
            button.ResetThemeValueOverrides();
        }
    }

    private void radButtonElement_Click(object sender, EventArgs e)
    {
        this.ChangeBackColor(((RadButtonElement)sender));
    }

    private void ChangeBackColor(RadButtonElement button)
    {
        button.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.BackColorProperty, Color.LightGreen, "",
            typeof(Telerik.WinControls.Primitives.FillPrimitive));
        button.SetThemeValueOverride(Telerik.WinControls.Primitives.FillPrimitive.GradientStyleProperty, GradientStyles.Solid, "",
            typeof(Telerik.WinControls.Primitives.FillPrimitive));
    }
}

I am also sending you a gif file showing the result on my end.

Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

[Thanh]

Thank for your code, it is really clear.

There is a small issue that I want to change to color as the color when button is clicked on. So that when user change theme, the color is changed according that theme. How can I get the color as the color when I click on button?

 Or telerik have anyway that I can set group of button, then it can mark the button have just clicked?

[Hristo]

Hi Thanh,

Thank you for writing.

Themes define different styles and settings for the various element states. These styles are usually defined via repository items: Working with Repository Items.

In the context of the discussed scenario, you could read a particular setting knowing the responsible repository. Please check my code snippet below: 

private Color initialBackColor;

public Form1()
{
    InitializeComponent();

    Theme theme = ThemeRepository.FindTheme(this.radRibbonBar1.ThemeName);
    StyleRepository repository = theme.FindRepository("ButtonMouseDownFill");
    PropertySetting setting = repository.FindSetting("BackColor");
    this.initialBackColor = (Color)setting.EndValue;
}

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

[Thanh]

 I have used your code, the value of theme is "Office2013Light", and the repository is null

[Hristo]

Hi Thanh,

Thank you for writing back.

As I said earlier the styles are usually defined through repository items and the different themes for some settings use unique repositories. This way they define their own style.

Our VSB tool provides information about the theme settings. You can read the name of a repository and at run-time find it and use its style according to your scenario. Considering the Office2013Theme, you can get the back color this way: 

this.radRibbonBar1.ThemeName = "Office2013Light";
Theme theme = ThemeRepository.FindTheme(this.radRibbonBar1.ThemeName);
StyleRepository repository = theme.FindRepository("FillSolid(146;192;224)");
PropertySetting setting = repository.FindSetting("BackColor");
this.initialBackColor = (Color)setting.Value;

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

[Thanh]

Thanks for your code. I got the color I want. :)

[Craig]

Does this still work in 2016.3? I am trying it for a CommandBarButton but nothing happens and if I don't reset it, the next time through the color change isn't reflected in the setting value.

[Hristo]

Hi Craig,

Thank you for writing.

Yes, it is working. The CommandBarButton, however, has a different hierarchy and its back color is directly set without creating a fill primitive. You can change it in the default state like this: 

this.commandBarButton1.SetThemeValueOverride(VisualElement.BackColorProperty, Color.LightGreen, "");

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik by Progress