Skip to main content
Home Forums Silverlight Programming Silverlight Controls and Silverlight Toolkit IsEnabled property for Timepicker
4 replies. Latest Post by elmore.adam on July 6, 2009.
(0)
koyot3
Participant
805 points
172 Posts
07-03-2009 4:35 AM |
Hi all,
I'm using a timepicker to display a timespan in my application. Users are not able to modify or change this control. So I've set the IsEnabled property to false in my page.xaml ; but it's almost invisible in timpeicker.
The value is in very clear gray, therefore difficult to see....
Is it possible to change it ???
Thank you in advance for your help !
Johan
Ruurd Boeke
821 points
110 Posts
07-03-2009 1:34 PM |
Hi,
this is caused by repeated overlays of translucent gray rectangles by the controls that make up the timepicker (timeupdown, buttonspinner and textbox).
To workaround, you would have to retemplate all or part of them and remove the 'disabled' visual state.
The good news is that I have fixed this in the upcoming Toolkit release!
Hope that helps,
elmore.adam
Member
482 points
67 Posts
07-03-2009 1:45 PM |
There are a few possible solutions to your problem. If you're only allowing users to view the time, you might consider using a TextBox control with IsReadOnly set to true. You would then simply format the Timespan to your liking. This is certainly the quick solution. The TimePicker control loses most of it's value if you're not allowing the user to pick a time with it. If you have other reasons to use the TimePicker, then you will need to modify the ControlTemplate to get around this visual change in the Disabled state. I've copied a modified version of the default ControlTemplate for TimePicker and the TimeUpDown. Essentially, we're just removing the DoubleAnimation within the TimeUpDown Disabled VisualState. You will need to set the TimePicker control's Template property to the corresponding ControlTemplate below, and then similarly modify the template for the other controls within the TimePicker. Let me know if you have any questions regarding that process. As you can see, the TextBox approach is much simpler and will most likely suffice.
<ControlTemplate
x:Name="TimeUpDownTemplate"
TargetType="inputToolkit:TimeUpDown">
<Grid>
<!-- visual states -->
<vsm:VisualStateManager.VisualStateGroups>
<!-- common states-->
<vsm:VisualStateGroup
x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition
GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState
x:Name="Normal" />
x:Name="Disabled" />
</vsm:VisualStateGroup>
<!-- focus states -->
x:Name="FocusStates">
x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame
KeyTime="0"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
x:Name="Unfocused">
Value="0" />
<!-- input valid states -->
x:Name="InputValidStates">
x:Name="Valid"></vsm:VisualState>
x:Name="Invalid">
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="ErrorVisualElement"
Storyboard.TargetProperty="(UIElement.Visibility)"
Duration="0">
<DiscreteObjectKeyFrame
Value="Visible" />
</ObjectAnimationUsingKeyFrames>
<!-- BalloonHintStates -->
x:Name="BalloonHintStates">
x:Name="BalloonHintOpened">
BeginTime="00:00:00"
Storyboard.TargetName="HintVisualElement"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
KeyTime="00:00:00.200"
KeySpline="1,0,0,1"
Value="-23" />
x:Name="BalloonHintClosed">
Storyboard.TargetProperty="Width">
Storyboard.TargetProperty="Height">
<!-- ParsingStates -->
x:Name="ParsingStates">
x:Name="ValidTime">
Storyboard.TargetName="validicon"
Storyboard.TargetProperty="Visibility">
KeyTime="00:00:00"
x:Name="InvalidTime">
Storyboard.TargetName="invalidicon"
x:Name="EmptyTime">
Storyboard.TargetName="emptyicon"
</vsm:VisualStateManager.VisualStateGroups>
<!-- Spinner + HintVisualElement + TextBox -->
<!-- the border will be 'flown out' to act as a balloon -->
<Border
x:Name="HintVisualElement"
HorizontalAlignment="Stretch"
IsHitTestVisible="False"
BorderBrush="Gray"
Background="White"
BorderThickness="1">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform />
</TransformGroup>
</Border.RenderTransform>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition
Width="Auto"
MinWidth="15" />
</Grid.ColumnDefinitions>
<ContentControl
Grid.Column="0"
IsTabStop="False"
Margin="3"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Foreground="#FF4A4A4A"
FontSize="10"
Content="{TemplateBinding BalloonContent}" />
x:Name="emptyicon"
Visibility="Collapsed"
Grid.Column="1" />
x:Name="validicon"
x:Name="invalidicon"
Grid.Column="1">
<Grid
VerticalAlignment="Bottom"
Width="10"
Height="13">
<Path
Stretch="Fill"
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 "
StrokeStartLineCap="Round"
StrokeEndLineCap="Round"
StrokeLineJoin="Bevel"
Height="11.833"
VerticalAlignment="Top">
<Path.Stroke>
<LinearGradientBrush
StartPoint="1.10074,0.462591"
EndPoint="-0.102151,0.462591">
<GradientStop
Color="#F6CAA709"
Offset="0.0436364" />
Color="#F3F7F34F"
Offset="0.149091" />
Color="#E7CAA709"
Offset="0.825455" />
Color="#E7967C07"
Offset="0.967124" />
Color="#E7625106"
Offset="0.967273" />
</LinearGradientBrush>
</Path.Stroke>
<Path.Fill>
StartPoint="1.13883,0.460318"
EndPoint="-0.140331,0.460318">
Color="#FFF7F79F"
Offset="0.123636" />
Color="#FBFBFB7D"
Offset="0.177662" />
Color="#F6FFFF5B"
Offset="0.24" />
Offset="0.52" />
Color="#9ADABE0C"
Offset="0.941376" />
Color="#4DEBD60F"
Offset="0.941818" />
Color="#FBF6EC20"
Offset="0.956364" />
Color="#FFFFFF2F"
Offset="0.963636" />
</Path.Fill>
</Path>
StrokeThickness="0.3"
Stroke="#FF1B1B54"
Data="F1 M 18.6937,17.3004L 22.2563,17.3004L 21.1313,23.6937L 19.8563,23.6937L 18.6937,17.3004 Z "
Margin="4.25,2.25,3.75,0"
Height="4.683"
StartPoint="-0.400002,0.50126"
EndPoint="1.4,0.50126">
Color="#FB8F8873"
Offset="0.175974" />
Color="#F6271A47"
Offset="0.236364" />
Color="#E7271A47"
Offset="0.534545" />
Color="#9A89782B"
Offset="0.941391" />
Height="3.11"
StrokeLineJoin="Round"
Stroke="#FF1C1C50"
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 "
Margin="3.833,0,4.167,0.833"
VerticalAlignment="Bottom">
StartPoint="-0.0599991,0.5"
EndPoint="1.06,0.5">
Offset="0.98135" />
Offset="0.981818" />
</Grid>
</ContentControl>
</Border>
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<inputToolkit:ButtonSpinner
x:Name="Spinner"
Style="{TemplateBinding SpinnerStyle}"
MinWidth="35"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch">
<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" />
</inputToolkit:ButtonSpinner>
<!-- DisabledVisualElement -->
x:Name="DisabledVisualElement"
IsHitTestVisible="false"
Opacity="0"
Background="#A5FFFFFF"
CornerRadius="2.5,2.5,2.5,2.5" />
<!-- focus visual element -->
x:Name="FocusVisualElement"
BorderBrush="#FF45D6FA"
CornerRadius="1,1,1,1" />
</ControlTemplate>
TargetType="input:TimePicker">
x:Name="RootElement"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<vsm:VisualStateManager.VisualStateGroups
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
<!-- Popup states -->
<VisualStateGroup
x:Name="PopupStates">
<VisualStateGroup.Transitions>
<VisualTransition
GeneratedDuration="0:0:0.1"
To="PopupOpened" />
GeneratedDuration="0:0:0.2"
To="PopupClosed" />
</VisualStateGroup.Transitions>
<VisualState
x:Name="PopupOpened">
<DoubleAnimation
Storyboard.TargetName="PopupRoot"
Storyboard.TargetProperty="Opacity"
To="1.0" />
</VisualState>
x:Name="PopupClosed">
To="0.0" />
</VisualStateGroup>
<Grid.Resources>
x:Key="PopupButtonTemplate"
TargetType="ToggleButton">
<!-- clock icon -->
Height="20"
Width="20">
x:Key="Dot"
EndPoint="1.025,0.434"
StartPoint="-0.025,0.566">
Color="#FFC8C8C8" />
Color="#FF19191A"
Offset="1" />
</Grid.Resources>
<Ellipse
Margin="0.28,0.281,1.095,1.998"
Stroke="{StaticResource Dot}"
StrokeThickness="0.75">
<Ellipse.Fill>
EndPoint="0.5,1"
StartPoint="0.5,0">
Color="#FFFFFFFF" />
Color="#FFD7E3EC"
Offset="0.80400002002716064" />
Color="#FFFBFBFB"
Offset="0.37099999189376831" />
</Ellipse.Fill>
</Ellipse>
Height="2.423"
Margin="7.969,0.655,9.594,0"
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<ScaleTransform
CenterX="0.5"
CenterY="0.5"
ScaleX="2.381"
ScaleY="1.817" />
<SkewTransform
CenterY="0.5" />
<RotateTransform
Angle="0.966"
<TranslateTransform
X="-0.2"
Y="0.087" />
</RadialGradientBrush.RelativeTransform>
Color="#FF000000" />
Color="#FFFB6A05"
Color="#FF4E4E4F"
Offset="0.446" />
</RadialGradientBrush>
Height="1.973"
Margin="8.406,0,9.594,2.875"
Stroke="{StaticResource Dot}">
HorizontalAlignment="Left"
Margin="0.969,9.186,0,0"
Width="1"
VerticalAlignment="Top"
Height="1.317">
Margin="0,9.438,2.26,0"
Width="1.05"
Height="1.421">
Fill="{x:Null}"
Height="8.258"
Margin="8.375,5.24,6.625,0"
Data="M10.108397,6.5404582 L10.108397,10.415268 L13.538931,13.738435">
Color="#FF5B91D2" />
Color="#FFC1570E"
Offset="0.996" />
Margin="8.406,9.438,9.594,10.562"
Fill="{x:Null}">
<Ellipse.Stroke>
Color="#FFD29C5B" />
Color="#FFFFFFFF"
Color="#FF060606"
Offset="0.469" />
</Ellipse.Stroke>
Width="*" />
Width="Auto" />
<!-- Value is being synched in code, because of inability to do TwoWay TemplateBinding -->
<inputToolkit:TimeUpDown
x:Name="TimeUpDown"
Height="Auto"
Style="{TemplateBinding TimeUpDownStyle}"
SpinnerStyle="{TemplateBinding SpinnerStyle}"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
TimeParsers="{TemplateBinding TimeParsers}"
Format="{TemplateBinding Format}"
Culture="{TemplateBinding Culture}"
TimeGlobalizationInfo="{TemplateBinding TimeGlobalizationInfo}"
Template="{StaticResource TimeUpDownTemplate}"
xmlns:inputToolkit="clr-namespace:System.Windows.Controls"></inputToolkit:TimeUpDown>
<ToggleButton
x:Name="DropDownToggle"
Template="{StaticResource PopupButtonTemplate}"
Margin="3,0,0,0"
HorizontalAlignment="Center"
<Popup
x:Name="Popup">
x:Name="PopupRoot"
BorderBrush="#FF8d8b8b"
x:Name="PopupPlaceHolder"
VerticalContentAlignment="Stretch" />
</Popup>
07-06-2009 2:39 AM |
Thank you for your answer, but is there a possibility to set this property in code-behind ???
I've trying to modify your xaml adam, but it's a little complex to adapt it to my timepicker ..
07-06-2009 10:22 AM |
Unfortunately, this sort of template change would need to be done in XAML. Depending on your needs, you could set IsHitTestVisible to false, or just use a read only TextBox.
IsEnabled property for Timepicker