This project has moved and is read-only. For the latest updates, please go here.

Removing white-out when inactiviating time picker

Dec 4, 2014 at 8:26 PM
Hello,
I have removed the drop-down from time picker and applied the Expression Dark theme to it. However, when I disablethe control (timepicker) the numbers are whited out. I can see that this is caused by a borders' opacity in the watermarktextbox via XAML Spy. However, I cannot seem to edit the style in order to set the opacity to 0.
Can anyone help? Just remove the text white-out on the timepicker when IsEnabled is set to False.

Thank you
Developer
Dec 9, 2014 at 2:31 PM
Hi,

You you say you are using Expresstion Dark Theme, what theme is this ? Is it the Xceed Metro Dark theme ? If so, when TimePicker.IsEnabled = False, the background is gray and foreground lightGray.
Dec 9, 2014 at 3:18 PM
No, it is Expression Dark 1.1.0 found on NuGet. Regardless, I don't want the background/foreground to change color at all. I am applying a mask with opacity over the top of the control when it is disabled. If there is an easy way to disable this behavior via a style that would be great. I can find the element with xaml spy but I don't have the time to dig down into the control and write such a complex style to override this behavoir. Thanks.
Developer
Dec 9, 2014 at 6:42 PM
Hi,

Just to make sure we have the same configuration :
-When Expression Dark 1.1.0 is installed, App.xaml includes the ResourceDictionary "Themes\ExpressionDark.xaml".
-To remove the Drop-Down from the TimePicker, in what file was it done ? Or did you re-template the TimePicker ?

Currently, when the TimePicker isEnabled is false, the foreground, the ButtonSpinners and the DropDownButton are grayed out. Adding a mask of opacity over it won't prevent this....unless the template is redone.

After installing Expression Dark 1.1.0, the theme is applied to buttons, radioButtons.....but is not applied on the TimePicker. What exact action have you taken for the TimePicker to be themed with Expression Dark.
Dec 11, 2014 at 5:34 PM
Yes, I have that resource dictionary. I should be more specific. I am mimicking expression dark on the timepicker because, as you stated, expression dark does not cover that control.
I am modifying timepicker in my mainwindow.xaml under windows.resources.
Essentially, when TimePicker isEnabled is false, i dont want the foreground, the ButtonSpinners and the DropDownButton to be grayed out. I have everything else working the way I want it. Not a huge deal but if there was an easy way to disable this function that would be great.
Developer
Dec 12, 2014 at 1:57 PM
I suggest you redefine the ControlTemplate of the TimePicker.

1) For the Foreground, it's easy to change :
 <Window.Resources>
      <Style TargetType="{x:Type xctk:TimePicker}">
         <Style.Triggers>
            <Trigger Property="IsEnabled"
                     Value="False">
               <Setter Property="Foreground"
                       Value="Black" />
            </Trigger>
         </Style.Triggers>
      </Style>
   </Window.Resources>
2) For the ButtonSpinner and ToggleButton, you should modify the TimePicker's ControlTemplate.
You can find the TimePicker in
-Xceed.Wpf.Toolkit/TimePicker/Themes/Aero2.NormalColor.xaml (in Windows8)
-Xceed.Wpf.Toolkit/TimePicker/Themes/Generic.xaml (in others Windows)
You could also need ButtonSpinner in
-Xceed.Wpf.Toolkit/ButtonSpinner/Themes/Aero2.NormalColor.xaml (in Windows8)
-Xceed.Wpf.Toolkit/ButtonSpinner/Themes/Generic.xaml (in others Windows)
You could also need ButtonChrome in
-Xceed.Wpf.Toolkit/Chromes/Themes/Aero2.NormalColor.xaml (in Windows8)
-Xceed.Wpf.Toolkit/Chromes/Themes/Generic.xaml (in others Windows)
Dec 15, 2014 at 3:47 PM
Thanks for the info. I have attached some pictures that show what I am trying to do. You can see that in the images there is an opacity applied to either of the controls when IsEnabled = False for that particular control. I do not want that 'white' box overlay (i believe it is a border) in the 'Daily' controls. I want it so that the text is visible like in the 'Period' controls. So the 'Daily' top image is incorrect, the 'Period' bottom image is correct.
Imgur Album

Here is my modification of the timepicker so far:
 <Window.Resources>
        <Style x:Key="TimePickerStyle1" TargetType="{x:Type xctk:TimePicker}">
            <Setter Property="WatermarkTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl Content="{Binding}" Foreground="Gray" Focusable="False" Margin="0,0,0,0"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type xctk:TimePicker}">
                        <Grid x:Name="grid">
                            <Rectangle
                            x:Name="Rectangle"
                            Width="Auto"
                            Height="Auto"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Fill="{DynamicResource LightBrush}"
                            RadiusX="3"
                            RadiusY="3"
                            Stroke="{DynamicResource NormalBorderBrush}"/>
                            <Grid x:Name="grid2">
                                <xctk:DateTimeUpDown x:Name="PART_TimeUpDown" Margin="2,0,2,0" AllowSpin="{TemplateBinding AllowSpin}" BorderThickness="0,0,0,0" Background="{TemplateBinding Background}" ClipValueToMinMax="{Binding ClipValueToMinMax, RelativeSource={RelativeSource TemplatedParent}}" ContextMenu="{TemplateBinding ContextMenu}" Foreground="{TemplateBinding Foreground}" FormatString="{TemplateBinding FormatString}" Maximum="{Binding Maximum, RelativeSource={RelativeSource TemplatedParent}}" Minimum="{Binding Minimum, RelativeSource={RelativeSource TemplatedParent}}" Padding="{TemplateBinding Padding}" ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}" TextAlignment="{TemplateBinding TextAlignment}" Text="" TabIndex="{TemplateBinding TabIndex}" Value="{Binding Value, RelativeSource={RelativeSource TemplatedParent}}" WatermarkTemplate="{TemplateBinding WatermarkTemplate}" Watermark="{TemplateBinding Watermark}">
                                    <xctk:DateTimeUpDown.Format>
                                        <TemplateBinding Property="Format">
                                            <TemplateBinding.Converter>
                                                <xctk:TimeFormatToDateTimeFormatConverter/>
                                            </TemplateBinding.Converter>
                                        </TemplateBinding>
                                    </xctk:DateTimeUpDown.Format>
                                </xctk:DateTimeUpDown>
                            </Grid>
                        </Grid>
                            
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="FocusManager.FocusedElement" TargetName="PART_TimeUpDown" Value="{Binding ElementName=PART_TimeUpDown}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}" />                               
                                <Setter TargetName="grid" Property="Opacity" Value="0.5"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
Developer
Dec 17, 2014 at 1:43 PM
Hi,

Is the Rectangle with the Fill = "LightBrush" the problem with the white Background overlay ?
Dec 17, 2014 at 5:04 PM
No, that only removes some of the background. You can see the missing 'background' on the left and right extremes of the control.
Image

Thanks though!
Developer
Dec 18, 2014 at 1:59 PM
Do you have the same problem when not using ExpressionDark ? Are you on Windows 7 or Windows8 ?
Dec 18, 2014 at 3:43 PM
Edited Dec 18, 2014 at 3:48 PM
I am able to turn it off using XAML Spy by changing the Opacity setting to 0. See here:
XAML Spy pic

I am using Windows 7.

The top picture is without ExpressionDark enabled (it still happens) and the second is with the Opacity setting set to 0 via XAML Spy:
Album

Here is the WaterMarkTextBox XAML from XAML Spy, you can see the three borders, the first of which (x:Name = "Border") I need to set opacity to 0 (adding it as a window resource like in the code i posted previously):
<WatermarkTextBox x:Name="PART_TextBox" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" AllowDrop="True" Background="#00FFFFFF" CaretIndex="0" Focusable="True" Foreground="#FFFFFFFF" HorizontalContentAlignment="Right" IsEnabled="False" MinWidth="20" Opacity="0" RenderSize="57, 15.96" SelectedText="12" SelectionBrush="#FF3399FF" SelectionLength="2" SelectionStart="0">
  <WatermarkTextBox.BorderBrush>
    <LinearGradientBrush EndPoint="0, 20" MappingMode="Absolute">
      <GradientStopCollection>
        <GradientStop Color="#FFABADB3" Offset="0.05" />
        <GradientStop Color="#FFE2E3EA" Offset="0.07" />
        <GradientStop Color="#FFE3E9EF" Offset="1" />
      </GradientStopCollection>
    </LinearGradientBrush>
  </WatermarkTextBox.BorderBrush>
  <Grid AllowDrop="True" IsEnabled="False" RenderSize="57, 15.96">
    <Border x:Name="Border" AllowDrop="True" Background="#FFF4F4F4" BorderBrush="#FFADB2B5" CornerRadius="1, 1, 1, 1" IsEnabled="False" RenderSize="57, 15.96" />
    <Border x:Name="MouseOverVisual" AllowDrop="True" CornerRadius="1, 1, 1, 1" IsEnabled="False" Opacity="0" RenderSize="57, 15.96">
      <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0, 1">
          <GradientStopCollection>
            <GradientStop Color="#FF5794BF" Offset="0.05" />
            <GradientStop Color="#FFB7D5EA" Offset="0.07" />
            <GradientStop Color="#FFC7E2F1" Offset="1" />
          </GradientStopCollection>
        </LinearGradientBrush>
      </Border.BorderBrush>
    </Border>
    <Border x:Name="FocusVisual" AllowDrop="True" CornerRadius="1, 1, 1, 1" IsEnabled="False" Opacity="0" RenderSize="57, 15.96">
      <Border.BorderBrush>
        <LinearGradientBrush EndPoint="0, 1">
          <GradientStopCollection>
            <GradientStop Color="#FF3D7BAD" Offset="0.05" />
            <GradientStop Color="#FFA4C9E3" Offset="0.07" />
            <GradientStop Color="#FFB7D9ED" Offset="1" />
          </GradientStopCollection>
        </LinearGradientBrush>
      </Border.BorderBrush>
    </Border>
    <ScrollViewer x:Name="PART_ContentHost" AllowDrop="True" Background="#00FFFFFF" CanContentScroll="True" Foreground="#FF6D6D6D" HorizontalScrollBarVisibility="Hidden" IsEnabled="False" IsManipulationEnabled="True" IsTabStop="False" PanningMode="VerticalFirst" RenderSize="57, 15.96" VerticalScrollBarVisibility="Hidden">
      <Grid AllowDrop="True" Background="#00FFFFFF" IsEnabled="False" RenderSize="57, 15.96">
        <Rectangle Grid.Column="1" Grid.Row="1" AllowDrop="True" Fill="#FFF0F0F0" IsEnabled="False" RenderSize="0, 0" Stretch="Fill" />
        <ScrollContentPresenter AllowDrop="True" CanContentScroll="True" CanHorizontallyScroll="False" CanVerticallyScroll="False" IsEnabled="False" RenderSize="57, 15.96">
          <TextBoxView AllowDrop="True" IsEnabled="False" Margin="2, 0, 2, 0" RenderSize="53, 15.96">
            <TextBoxLineDrawingVisual Opacity="1">
              <TextBoxLineDrawingVisual.Offset />
            </TextBoxLineDrawingVisual>
          </TextBoxView>
          <AdornerLayer AllowDrop="True" IsEnabled="False" RenderSize="57, 15.96" />
        </ScrollContentPresenter>
        <ScrollBar Grid.Column="1" AllowDrop="True" Cursor="Arrow" Foreground="#FF000000" IsEnabled="False" Maximum="0" MinWidth="17" RenderSize="0, 0" ViewportSize="15.96" Visibility="Collapsed" Width="17">
          <ScrollBar.Background>
            <LinearGradientBrush EndPoint="1, 0">
              <GradientStopCollection>
                <GradientStop Color="#FFE1E1E1" />
                <GradientStop Color="#FFEDEDED" Offset="0.2" />
                <GradientStop Color="#FFEDEDED" Offset="0.8" />
                <GradientStop Color="#FFE3E3E3" Offset="1" />
              </GradientStopCollection>
            </LinearGradientBrush>
          </ScrollBar.Background>
        </ScrollBar>
        <ScrollBar Grid.Row="1" AllowDrop="True" Cursor="Arrow" Foreground="#FF000000" Height="17" IsEnabled="False" Maximum="0" MinHeight="17" Orientation="Horizontal" RenderSize="0, 0" ViewportSize="53" Visibility="Collapsed">
          <ScrollBar.Background>
            <LinearGradientBrush EndPoint="0, 1">
              <GradientStopCollection>
                <GradientStop Color="#FFE1E1E1" />
                <GradientStop Color="#FFEDEDED" Offset="0.2" />
                <GradientStop Color="#FFEDEDED" Offset="0.8" />
                <GradientStop Color="#FFE3E3E3" Offset="1" />
              </GradientStopCollection>
            </LinearGradientBrush>
          </ScrollBar.Background>
        </ScrollBar>
      </Grid>
    </ScrollViewer>
    <ContentPresenter x:Name="PART_WatermarkHost" AllowDrop="True" HorizontalAlignment="Right" IsEnabled="False" IsHitTestVisible="False" RenderSize="0, 0" VerticalAlignment="Top" Visibility="Collapsed">
      <ContentControl AllowDrop="True" Foreground="#FF808080" IsEnabled="False" IsHitTestVisible="False" RenderSize="0, 0">
        <ContentPresenter AllowDrop="True" IsEnabled="False" IsHitTestVisible="False" RenderSize="0, 0" />
      </ContentControl>
    </ContentPresenter>
  </Grid>
</WatermarkTextBox>
Dec 18, 2014 at 6:14 PM
It worked with opacity set to 0 in x:name = "Border" in the following added code to windows.resources:
<Style TargetType="{x:Type xctk:WatermarkTextBox}">
            <Setter Property="Template" Value="{DynamicResource WatermarkTextBox1}"/>
        </Style>

        <ControlTemplate x:Key="WatermarkTextBox1" TargetType="{x:Type xctk:WatermarkTextBox}">
            <Grid>
                <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="0"/>
                <Border x:Name="MouseOverVisual" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FF5794BF" Offset="0.05"/>
                            <GradientStop Color="#FFB7D5EA" Offset="0.07"/>
                            <GradientStop Color="#FFC7E2F1" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                </Border>
                <Border x:Name="FocusVisual" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0">
                    <Border.BorderBrush>
                        <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                            <GradientStop Color="#FF3D7BAD" Offset="0.05"/>
                            <GradientStop Color="#FFA4C9E3" Offset="0.07"/>
                            <GradientStop Color="#FFB7D9ED" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.BorderBrush>
                </Border>
                <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                <ContentPresenter x:Name="PART_WatermarkHost" ContentTemplate="{TemplateBinding WatermarkTemplate}" Content="{TemplateBinding Watermark}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </Grid>
            <ControlTemplate.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsFocused" Value="False"/>
                        <Condition Property="Text" Value=""/>
                    </MultiTrigger.Conditions>
                    <Setter Property="Visibility" TargetName="PART_WatermarkHost" Value="Visible"/>
                </MultiTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Opacity" TargetName="FocusVisual" Value="1"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="BorderBrush" TargetName="Border" Value="#FFADB2B5"/>
                    <Setter Property="Background" TargetName="Border" Value="#FFF4F4F4"/>
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    <!--<Setter Property="Opacity" TargetName="Border" Value="0.5"/>-->
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
Thank you for your help guys.
Developer
Dec 18, 2014 at 7:11 PM
Hi,

What I can tell is that v2.5 of the toolkit has really changed the TimePicker (providing new base class and new properties). Since you are using Windows7, the "Generic.xaml" files will be used as default template for toolkit's controls.

When lookking at the template "WatermarkTextBox1" that you have, the Border (x:Name="Border") should have a Background of "TemplateBinding Background". But in the ControlTemplate.Triggers, if IsEnabled = False, the Border's Background is set to #FFF4F4F4 ; which correspond to what you have in WaterMarkTextBox XAML from XAML Spy.

Maybe just removing this setter, from triggers, would resolve the issue, without setting Opacty of Border to 0.
Dec 18, 2014 at 7:23 PM
Thanks, that is cleaner. Do you have any idea why this is part of the control by default? Changing the border background when IsEnabed= "False" doesn't seem to correspond to the operation of any other standard windows control.
Developer
Dec 18, 2014 at 8:03 PM
This is not part of the control in Windows8. I will remove it in Windows7. It will be included in v2.6.
Dec 18, 2014 at 10:58 PM
Awesome. Thank you.