Changing the background color when disabled

10 posts, 0 answers
  1. Aaron
    Aaron avatar
    28 posts
    Member since:
    May 2012

    Posted 13 Jun 2013 Link to this post

    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?
  2. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 18 Jun 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Aaron
    Aaron avatar
    28 posts
    Member since:
    May 2012

    Posted 20 Jun 2013 Link to this post

    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.
  5. Kalin
    Admin
    Kalin avatar
    1207 posts

    Posted 25 Jun 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Aaron
    Aaron avatar
    28 posts
    Member since:
    May 2012

    Posted 03 Jul 2013 Link to this post

    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.
  7. Sascha
    Sascha avatar
    2 posts
    Member since:
    Aug 2012

    Posted 31 Jul 2013 Link to this post

    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
  8. Sascha
    Sascha avatar
    2 posts
    Member since:
    Aug 2012

    Posted 01 Aug 2013 Link to this post

    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
  9. Masha
    Admin
    Masha avatar
    355 posts

    Posted 05 Aug 2013 Link to this post

    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
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  10. AlinRaul
    AlinRaul avatar
    10 posts
    Member since:
    Jul 2009

    Posted 19 Nov 2013 Link to this post

    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
     
  11. AlinRaul
    AlinRaul avatar
    10 posts
    Member since:
    Jul 2009

    Posted 19 Nov 2013 Link to this post

    Whatever, I used the styles from the installation directory and it works. 
Back to Top
DevCraft banner