Changing the background color when disabled

[Aaron]

We have a problem styling the DatePicker's disabled state. We want the background to change to gray but it seems that there is a semi-transparent layer or some kind of opacity which alters the applied color. The attached screenshot shows the problem: the TextBox's background color is the same (#F5F5F5) as the DatePicker's background but it looks different (we are using the BlueOffice theme).

This is how we changed the style:

(...)
<!-- inserted new brush for disabled state -->
<SolidColorBrush x:Key="PickerBackground_Disabled" Color="#F5F5F5" />
    <Style TargetType="telerik:RadDatePicker" >
       (...)
         <VisualState x:Name="Disabled">
              <Storyboard>
                 <!-- added change of background when disabled: PickerBackground_Disabled -->
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"  Storyboard.TargetName="PART_DateTimeInput" >
                          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PickerBackground_Disabled}"/>
                  </ObjectAnimationUsingKeyFrames>

Where can we remove the opacity or disable the transparent element? Which property has to be set to apply the correct color?

[Kalin]

Hello Aaron,

The "PART_DateTimeInput" element is actually RadWatermarkTextBox which also has Disabled VisualState with an opacity. You should change that opacity to 0 in order to achieve the desired scenario.

Hope this helps.

Regards,
Kalin
Telerik

[Aaron]

Thanks for your response.

I tried to change the opacity for the WatermarkTextBox but could not get the expected result. So I tried to replace the WatermarkTextBox with a standard TextBox and it worked. This code replaced the RadwaterMarkTextBox:

<TextBox
   x:Name="PART_DateTimeInput"
   BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"
   BorderThickness="0"
   Background="{x:Null}"
   Grid.Column="0"
   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
   IsReadOnly="{TemplateBinding IsReadOnly}"
   Foreground="{StaticResource PickerForeground_Normal}"
   MinHeight="0"
   Padding="{TemplateBinding Padding}"
  TextAlignment="{TemplateBinding TextAlignment}"
  Text="{Binding DateTimeText, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
  telerik:StyleManager.Theme="{StaticResource Theme}"
  TabIndex="0"
  VerticalAlignment="Stretch"
  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />

But now the issue is with the foreground color. Setting this property to black results in a slightly grayed color instead of a pure black. It seems that there is a transparent layer somewhere else. Although we changed the default styling of all TextBoxes and their disabled state, the TextBox within the RadDatePicker does not apply these styles. Please see the attached screen-shot (left: styled disabled state of TextBox, right: disabled DateTimePicker containing the TextBox).

Furthermore the border of the TextBox ís always visible and setting BorderThickness to "0" has no effect.

I would appreciate it if you could post your ideas according both problems.

[Kalin]

Hello Aaron,

I assume you are using Implicit Styles for styling the TextBox and as I can see in the provided code the DateTimePicker is styled with StyleManager which is overriding the Implicit Styles. So this probably is causing the issue, could you remove the StyleManager and let us know if this has worked?

I'm looking forward to your response.

Regards,
Kalin
Telerik

[Aaron]

Sorry for the late response.

I was able to change the style while still using the WatermarkTextBox. Therefore I removed the content of the <VisualState x:Name="Disabled"> within the WatermarkTextBox style such that the parent's DatePicker style for the disabled state is visible. Since we do not use any WatermarkTextBoxes in our application this solution is acceptable. Not very elegant but it worked.

[Sascha]

We are facing exactly the same problem here. We are not able to change the foreground color from the RadWatermarkTextBox named "PART_DateTimeInput" in the RadDateTimePicker-ControlTemplate for disabled state.

A detailed how to would be very helpful!

Best regards
Sascha

[Sascha]

After further investigation we found that the style for the RadWatermarkTextBox is defined twice!
One definition can be found in Telerik.Windows.Controls.xaml and one definition in Telerik.Windows.Controls.Input.xaml. Since we changed the style only in [...]Input.xaml it was overwritten by the definition in [...]Controls.xaml.
So the right place to change the style is in [...]Controls.xaml

Our solution was to add the [...]Controls.xaml as a resource to the [...]Input.xaml like this:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Telerik.Windows.Controls.xaml" />
</ResourceDictionary.MergedDictionaries>

and then we just removed the redundant style definition in [...]Input.xaml.

This should be revised by telerik.

Best regards
Sascha

[Masha]

Hello Sascha,

I'm glad that you were able to resolve the issue by yourself.

Actually we are aware that the style of RadWatermartTextBox is defined inside Telerik.Windows.Controls and Telerik.Windows.Controls.Input. At the moment RadAutocompleteBox style is based on RadWatermarkStyle and this is the reason we need to include RadWatermark style inside Telerik.Windows.Controls.Input.xaml file. We will definitely consider how to removing RadWatermartTextBox definition from Telerik.Windows.Controls.Input.xaml file.

Thank you for sending us your feedback, much appreciated.

Regards,
Masha
Telerik

[AlinRaul]

Hello, 

 I have to do a similar thing, that is, showing the content of RadDatePicker and RadTimePicker in a more visible way when the state is disabled. Reading this thread, it's not clear what I specifically need to do to achieve this behaviour.  

Can you provide me the default styles for the controls and tell me what should I do?

Thanks, 
Alin
 

[AlinRaul]

Whatever, I used the styles from the installation directory and it works.