How change Background Color when RadCombobox isEnabled=False

6 posts, 1 answers
  1. Gilmar
    Gilmar avatar
    19 posts
    Member since:
    Jul 2010

    Posted 01 Jul 2011 Link to this post

    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?
  2. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 04 Jul 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Gilmar
    Gilmar avatar
    19 posts
    Member since:
    Jul 2010

    Posted 06 Jul 2011 Link to this post

    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?
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 09 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  6. Gilmar
    Gilmar avatar
    19 posts
    Member since:
    Jul 2010

    Posted 11 Jul 2011 Link to this post

    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.
  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 13 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top
DevCraft banner