How change Background Color when RadCombobox isEnabled=False

[Gilmar]

Hello, I have a problem in control RadCombox to set the background when the IsEnabled property equals False. The background color is always gray and I can not change the background color of the control to another. I have changed all the colors of the style of control based on the style of Telerik Office_Theme but the color does not change. How can I solve this problem?

[Dani]

Hello Gilmar,

If the RadComboBox you are using is in Editable mode, the approach to change the background for the disabled visual state is pretty easy. Open the control in Expression Blend, right-click it , select Edit Template > Edit a Copy. Then open the Resources tab on the right and simply change the ControlBackground_Disabled brush.

If the RadComboBox control is in NonEditable mode, then you need to edit the visual states of NonEditableComboBox ControlTemplate. Go to the Disabled visual state and replace this snippet:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                   <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                       <DiscreteObjectKeyFrame.Value>
                                           <System:Boolean>False</System:Boolean>
                                       </DiscreteObjectKeyFrame.Value>
                                   </DiscreteObjectKeyFrame>
                               </ObjectAnimationUsingKeyFrames>

 with, for example,  this snippet:

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonChrome">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                            </ObjectAnimationUsingKeyFrames>

I hope this helps.

Greetings,
Dani
the Telerik team

[Gilmar]

Hello Dani. Thank you. It worked for the RadComboBox control. But I'm having a similar problem with other controls. I am now developing a template to control RadDateTimePicker. I check the functioning of the template was similar to the RadComboBox and enter the same code passed by you and the background color of control when IsEnabled = False was changed. However, it seems there is an opacity in the control that I can not get and that changes the background color of the control. Howdo I fix this?

[Dani]

Hi Gilmar,

The quickest way to customize the disabled state of RadDateTimePicker is to create your own visual for this purpose and display it in the Disabled visual state. Normally, the ButtonChrome would take care of the disabled state and if you look at the template of RadDateTimePicker, you will notice that in the disabled state of the control the ButtonChrome is set to render its Disabled state. Hide that animation, and display your own customized visual.

An illustrative sample is attached. I hope it helps.

Best wishes,
Dani
the Telerik team

[Gilmar]

Hello Dani, I downloaded the code posted by you and insert the following line of code marked in bold below to change the background color of control

<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
<LinearDoubleKeyFrame KeyTime="0:0:0.050" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0.050">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PART_DateTimeInput">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource PickerForeground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>


<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconForeground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonIconBackground_Disabled}"/>
</ObjectAnimationUsingKeyFrames>
                                            
                                            <!--My Code-->
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PART_DateTimeInput">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            
                                            <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>False</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames> -->

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual">
<LinearDoubleKeyFrame KeyTime="0:0:0.050" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0.050">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

The background color changes but remains as before, as if there was a gray background color change the color of the final control.

[Dani]

Hi Gilmar,

I am not sure I understand which part of the control you wish to change.

If you examine the control template of RadDateTimePicker, you will notice that the icon on the right is represented by a RadDropDownButton with a custom ControlTemplate. Inside, there is a ButtonChrome control that is also rendered as disabled when RadDateTimePicker enters in disabled mode.
 
So if you want to customize that icon as well, you have two options - replace the ButtonChrome with another visual element and adjust its visual states so that they reflect the customized look of the WatermarkTextBox; generate and apply a style for the ButtonChrome control that modifies the disabled state of the chrome again to correspond to your own customizations.

I hope this helps.

Regards,
Dani
the Telerik team