Change the Background color of RadButton

[Harsh]

Hi,

I want to change the background color of RadButton when it is disabled. what I did, create two syles one for enabled and one for disabled and set the backgorund color property accordingly. and initially i set the property IsEnabled = false and implement the style of disabled. But on the first time on page load Backgroung color set as a white (default color of the button on disabled) and after some operations my disabled style works on this button, Its only a problem on loading after that it works fine.

 

 

 

<telerik:RadButton Name="BtnAdd" Width="144" Style="{StaticResource btnDisabledFieldStyle}" Content="ADD USER" Margin="22,0,0,0" Click="BtnAdd_Click" IsEnabled="False">

 

 

 

public MainPage(){
    InitializeComponent();
    HtmlPage.RegisterScriptableObject("boardingpage", this);
    BtnAdd.Style = (Style)this.Resources["btnDisabledFieldStyle"];
    //BtnAddNotify.Background = new SolidColorBrush(Colors.Gray);
    BtnAdd.IsEnabled = false;    
}

 

 

 

 

<Style x:Key="btnFieldStyle" TargetType="telerik:RadButton" >
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Background" Value="#554d47"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontWeight" Value="Normal"/>
</Style>

 

 

 

 

 

 

 

 

<Style x:Key="btnDisabledFieldStyle" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="FontSize" Value="11"/>
<Setter Property="FontFamily" Value="Verdana"/>
<Setter Property="FontWeight" Value="Normal"/>
</Style>

private void function()
{
    if (isTemplateSelected == true){
        BtnAddNotify.IsEnabled = true;
        BtnAddNotify.Style = (Style)this.Resources["btnFieldStyle"];}
else{    
    BtnAddNotify.IsEnabled = false;
    BtnAddNotify.Style = (Style)this.Resources["btnDisabledFieldStyle"];
    }
}

 

[Tina Stancheva]

Hello Harsh,

In order to implement your scenario, you will need to edit the default style of the RadButton and set the FontSize, FontFamily and FontWeight properties. Also, you will need to edit the ControlBackground_Normal brush, which defines the RadButton Background color as well as the ControlForeground_Normal brush to modify the RadButton Foreground color.

Then, in order to change the disabled state background color, you will need to edit the ButtonChrome element default ControlTemplate and modify the ControlBackground_Disabled brush resource, since it controls the disabled background of the ButtonChrome and thus the disabled background of the RadButton.

I prepared a sample project illustrating this approach. I hope it helps. Also, you can find more info about editing RadControls ControlTemplates here.

Regards,
Tina Stancheva
the Telerik team