Silverlight Toolkit Timepicker control not visually ghosting when IsEnabled=False

I was wondering if anybody has found a solution to this problem. Setting the TimePicker controls IsEnabled property to false properly ghosts the time icon but the main time displ开发者_C百科ay does not ghost at all. Both composited controls are indeed disabled as clicking on both do not respond to mouse clicks its just the visual representation of the main time display is not ghosting. Has anybody successfully found a workaround for this?

Thanks.

This can be done without subclassing the control by editing the TimeUpDownStyle template in blend. That template has a disabled visual state, and you can use it to set the opacity of the entire grid for the up/down area to something like 35%.

I'm adding the XAML here for reference, but note that the only differences from the original template are giving the top-level grid a name <Grid x:Name="grid"> and then changing its opacity on the disabled visual state:

<VisualState x:Name="Disabled">
    <Storyboard>
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.35"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

It's a lot easier to do it all with a few clicks in Blend.

    <Style x:Key="TimeUpDownStyle" TargetType="inputToolkit:TimeUpDown">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="MinWidth" Value="100"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="inputToolkit:TimeUpDown">
                    <Grid x:Name="grid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.35"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="TimeHintStates">
                                <VisualState x:Name="TimeHintOpenedUp">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="-23"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Height">
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="22"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TimeHintOpenedDown">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Height">
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="22"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TimeHintClosed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:20" Value="Collapsed"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TimeHintVisualElement" Storyboard.TargetProperty="Height">
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="22"/>
                                            <SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ParsingStates">
                                <VisualState x:Name="ValidTime">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="validicon" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidTime">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="invalidicon" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="EmptyTime">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="emptyicon" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Popup x:Name="TimeHintPopup" VerticalOffset="0">
                            <Border x:Name="TimeHintVisualElement" HorizontalAlignment="Left" IsHitTestVisible="True" Visibility="Collapsed" Background="White" BorderBrush="Gray" BorderThickness="1">
                                <Border.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Border.RenderTransform>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition MinWidth="15" Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentControl FontSize="10" Foreground="#FF4A4A4A" IsTabStop="False" HorizontalAlignment="Right" Margin="3" VerticalAlignment="Center" IsHitTestVisible="False" Content="{TemplateBinding TimeHintContent}" Grid.Column="0"/>
                                    <ContentControl x:Name="emptyicon" IsTabStop="False" Margin="3" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="1"/>
                                    <ContentControl x:Name="validicon" IsTabStop="False" Margin="3" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="1"/>
                                    <ContentControl x:Name="invalidicon" IsTabStop="False" VerticalAlignment="Center" IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="1">
                                        <Grid Height="13" VerticalAlignment="Bottom" Width="10">
                                            <Path Stretch="Fill" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" StrokeStartLineCap="Round" Height="11.833" HorizontalAlignment="Stretch" VerticalAlignment="Top" Data="F1 M 28.1143,29.4857L 28.1143,27.4286L 20.7612,13.0286L 19.3898,13.0286L 12.3429,27.4286L 12.3429,29.4857L 28.1143,29.4857 Z ">
                                                <Path.Fill>
                                                    <LinearGradientBrush EndPoint="-0.140331,0.460318" StartPoint="1.13883,0.460318">
                                                        <GradientStop Color="#FFF7F79F" Offset="0.123636"/>
                                                        <GradientStop Color="#FBFBFB7D" Offset="0.177662"/>
                                                        <GradientStop Color="#F6FFFF5B" Offset="0.24"/>
                                                        <GradientStop Color="#E7CAA709" Offset="0.52"/>
                                                        <GradientStop Color="#9ADABE0C" Offset="0.941376"/>
                                                        <GradientStop Color="#4DEBD60F" Offset="0.941818"/>
                                                        <GradientStop Color="#FBF6EC20" Offset="0.956364"/>
                                                        <GradientStop Color="#FFFFFF2F" Offset="0.963636"/>
                                                    </LinearGradientBrush>
                                                </Path.Fill>
                                                <Path.Stroke>
                                                    <LinearGradientBrush EndPoint="-0.102151,0.462591" StartPoint="1.10074,0.462591">
                                                        <GradientStop Color="#F6CAA709" Offset="0.0436364"/>
                                                        <GradientStop Color="#F3F7F34F" Offset="0.149091"/>
                                                        <GradientStop Color="#E7CAA709" Offset="0.825455"/>
                                                        <GradientStop Color="#E7967C07" Offset="0.967124"/>
                                                        <GradientStop Color="#E7625106" Offset="0.967273"/>
                                                    </LinearGradientBrush>
                                                </Path.Stroke>
                                            </Path>
                                            <Path Stretch="Fill" Stroke="#FF1B1B54" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" StrokeStartLineCap="Round" StrokeThickness="0.3" Height="4.683" Margin="4.25,2.25,3.75,0" VerticalAlignment="Top" Data="F1 M 18.6937,17.3004L 22.2563,17.3004L 21.1313,23.6937L 19.8563,23.6937L 18.6937,17.3004 Z ">
                                                <Path.Fill>
                                                    <LinearGradientBrush EndPoint="1.4,0.50126" StartPoint="-0.400002,0.50126">
                                                        <GradientStop Color="#FFF7F79F" Offset="0.123636"/>
                                                        <GradientStop Color="#FB8F8873" Offset="0.175974"/>
                                                        <GradientStop Color="#F6271A47" Offset="0.236364"/>
                                                        <GradientStop Color="#E7271A47" Offset="0.534545"/>
                                                        <GradientStop Color="#9A89782B" Offset="0.941391"/>
                                                        <GradientStop Color="#4DEBD60F" Offset="0.941818"/>
                                                        <GradientStop Color="#FBF6EC20" Offset="0.956364"/>
                                                        <GradientStop Color="#FFFFFF2F" Offset="0.963636"/>
                                                    </LinearGradientBrush>
                                                </Path.Fill>
                                            </Path>
                                            <Path Stretch="Fill" Stroke="#FF1C1C50" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="0.3" Height="3.11" Margin="3.833,0,4.167,0.833" VerticalAlignment="Bottom" Data="F1 M 20.225,25.122L 20.725,25.122C 21.2773,25.122 21.725,25.5697 21.725,26.122L 21.725,26.872C 21.725,27.4243 21.2773,27.872 20.725,27.872L 20.225,27.872C 19.6727,27.872 19.225,27.4243 19.225,26.872L 19.225,26.122C 19.225,25.5697 19.6727,25.122 20.225,25.122 Z ">
                                                <Path.Fill>
                                                    <LinearGradientBrush EndPoint="1.06,0.5" StartPoint="-0.0599991,0.5">
                                                        <GradientStop Color="#F6271A47" Offset="0.236364"/>
                                                        <GradientStop Color="#E7271A47" Offset="0.534545"/>
                                                        <GradientStop Color="#9A89782B" Offset="0.98135"/>
                                                        <GradientStop Color="#4DEBD60F" Offset="0.981818"/>
                                                    </LinearGradientBrush>
                                                </Path.Fill>
                                            </Path>
                                        </Grid>
                                    </ContentControl>
                                </Grid>
                            </Border>
                        </Popup>
                        <inputToolkit:ButtonSpinner x:Name="Spinner" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalContentAlignment="Stretch" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" MinWidth="35" Style="{TemplateBinding SpinnerStyle}">
                            <TextBox x:Name="Text" BorderThickness="0" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}" FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}" MinWidth="20" AcceptsReturn="False" Text="{TemplateBinding Value}" TextAlignment="Right" TextWrapping="NoWrap">
                                <TextBox.Style>
                                    <Style TargetType="TextBox">
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="TextBox">
                                                    <ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </TextBox.Style>
                            </TextBox>
                        </inputToolkit:ButtonSpinner>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Update: You can use the style by referencing the resource key in the TimeUpDownStyle property of the TimePicker control:

<inputToolkit:TimePicker TimeUpDownStyle="{StaticResource TimeUpDownStyle}"/>