Silverlight Controls and Silverlight Toolkit

Re: TimeUpDown - Inconsistent Styles with IsEnabled

mj_naughton — Thu, 26 Mar 2009 19:26:15 GMT

Hi RJ,

"As for the repeatbuttons disappearing, I'm afraid I don't see that problem."

Sorry - I meant that, while the Repeat Buttons are disabled, they "appear" to be enabled (they are black when disabled - they would be "grey" normally when disabled). I understand now why that is the case - it's a side-effect of the workaround.

Given the nature of the issue we are discussing, I am happy with this workaround for now.

Thanks,

Martin

Re: TimeUpDown - Inconsistent Styles with IsEnabled

Ruurd Boeke — Thu, 26 Mar 2009 16:34:50 GMT

Hi Mj,

I'm glad to hear this solved your problem to some extend.

You raise good questions. Indeed, container controls should take cascading visualstyle like this into account. I believe though that the solution for these composites is to not define their disabled style at all and let the individual parts take care of disabling themselves. In that case, retemplating is not necessary. That said, it is indeed possible for container controls to retemplate their parts, this is the beauty of Xaml. They can do that by using the Template property on those parts, or even Style (in the same way as we set SpinnerStyle).
However, we should strive for a template where that is not necessary.

SL3 does indeed introduce the BasedOn mechanism, which helps when redefining styles enormously. In this case, if we were to restyle buttonSpinner, we would not have to know about the defaults of all the setter/value combinations in the style, which allows us to make small precise changes without copying the full style. That is really great.

As for the repeatbuttons disappearing, I'm afraid I don't see that problem.

I have copied my complete page.xaml for you to try out.

Hope that helps!

<UserControl x:Class="TimeUpDownInconsistentStylesFPost84142.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 
    >
  <StackPanel x:Name="LayoutRoot" Background="White">
    <StackPanel.Resources>

      <Style x:Key="spinnerStyle" TargetType="inputToolkit:ButtonSpinner">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="inputToolkit:ButtonSpinner">
              <Grid>
                <Grid.Resources>
                  <ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton">
                    <Grid x:Name="Root">
                      <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualStateGroup.Transitions>
                            <vsm:VisualTransition GeneratedDuration="0"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                          </vsm:VisualStateGroup.Transitions>
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F2FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#CCFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#7FFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Pressed">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F4FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#EAFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#C6FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#6BFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                          <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Unfocused"/>
                        </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" StrokeThickness="1" RadiusX="2" RadiusY="2">
                        <Rectangle.Stroke>
                          <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                            <GradientStop Color="#FFAEB7BF" Offset="0"/>
                            <GradientStop Color="#FF919EA7" Offset="0.35"/>
                            <GradientStop Color="#FF7A8A99" Offset="0.35"/>
                            <GradientStop Color="#FF647480" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Stroke>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="1" RadiusY="1">
                        <Rectangle.Fill>
                          <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Fill>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="Highlight" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                      <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FF333333" Stretch="Uniform" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " Margin="4,3,4,3"/>
                    </Grid>
                  </ControlTemplate>
                  <ControlTemplate x:Key="DecreaseButtonTemplate" TargetType="RepeatButton">
                    <Grid x:Name="Root">
                      <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualStateGroup.Transitions>
                            <vsm:VisualTransition GeneratedDuration="0"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                          </vsm:VisualStateGroup.Transitions>
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F2FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#CCFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#7FFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Pressed">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F4FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#EAFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#C6FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#6BFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                          <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Unfocused"/>
                        </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" StrokeThickness="1" RadiusX="2" RadiusY="2">
                        <Rectangle.Stroke>
                          <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                            <GradientStop Color="#FFAEB7BF" Offset="0"/>
                            <GradientStop Color="#FF919EA7" Offset="0.35"/>
                            <GradientStop Color="#FF7A8A99" Offset="0.35"/>
                            <GradientStop Color="#FF647480" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Stroke>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="1" RadiusY="1">
                        <Rectangle.Fill>
                          <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Fill>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="Highlight" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                      <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Path Height="Auto" HorizontalAlignment="Stretch" Margin="4,3,4,3" VerticalAlignment="Stretch" Width="Auto" Fill="#FF333333" Stretch="Uniform" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z "/>
                    </Grid>
                  </ControlTemplate>
                </Grid.Resources>
                <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"/>
                    <vsm:VisualState x:Name="Disabled">
                      
                      <!-- snip -->
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- focus states -->
                  <vsm:VisualStateGroup x:Name="FocusStates">
                    <vsm:VisualState x:Name="Focused">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Unfocused"/>
                  </vsm:VisualStateGroup>
                  <!-- Increase states -->
                  <vsm:VisualStateGroup x:Name="IncreaseStates">
                    <vsm:VisualState x:Name="IncreaseEnabled" />
                    <vsm:VisualState x:Name="IncreaseDisabled" />
                  </vsm:VisualStateGroup>
                  <!-- Decrease states-->
                  <vsm:VisualStateGroup x:Name="DecreaseStates">
                    <vsm:VisualState x:Name="DecreaseEnabled" />
                    <vsm:VisualState x:Name="DecreaseDisabled" />
                  </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                  <Grid>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Grid.RowSpan="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"/>
                    <Button IsTabStop="False" IsHitTestVisible="True" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                      <Button.Template>
                        <ControlTemplate TargetType="Button">
                          <Grid Background="Transparent" />
                        </ControlTemplate>
                      </Button.Template>
                    </Button>
                    <RepeatButton Grid.Row="0" Grid.Column="1" IsTabStop="False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press"/>
                    <RepeatButton Grid.Row="1" Grid.Column="1" IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press"/>
                  </Grid>
                </Border>
                <Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
                <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1"/>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

      <Style x:Key="tudStyle" TargetType="inputToolkit:TimeUpDown">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="IsTabStop" Value="False" />
        <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>
                <!-- 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"/>
                    <vsm:VisualState x:Name="Disabled">
                      <Storyboard>
                        <!--<DoubleAnimation 
                      Duration="0" 
                      Storyboard.TargetName="DisabledVisualElement" 
                      Storyboard.TargetProperty="(UIElement.Opacity)" 
                      To="1"/>-->
                      </Storyboard>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- focus states -->
                  <vsm:VisualStateGroup x:Name="FocusStates">
                    <vsm:VisualState x:Name="Focused">
                      <Storyboard>
                        <DoubleAnimationUsingKeyFrames 
                      Storyboard.TargetName="FocusVisualElement" 
                      Storyboard.TargetProperty="Opacity">
                          <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Unfocused">
                      <Storyboard>
                        <DoubleAnimationUsingKeyFrames
                      Storyboard.TargetName="FocusVisualElement"
                      Storyboard.TargetProperty="Opacity">
                          <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- input valid states -->
                  <vsm:VisualStateGroup x:Name="InputValidStates">
                    <vsm:VisualState x:Name="Valid">
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Invalid">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                      Storyboard.TargetName="ErrorVisualElement" 
                      Storyboard.TargetProperty="(UIElement.Visibility)" 
                      Duration="0">
                          <DiscreteObjectKeyFrame 
                        KeyTime="0" 
                        Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- BalloonHintStates -->
                  <vsm:VisualStateGroup x:Name="BalloonHintStates">
                    <vsm:VisualState x:Name="BalloonHintOpenedUp">
                      <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="HintVisualElement" 
                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="-23"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="HintVisualElement" 
                                                   Storyboard.TargetProperty="Height">
                          <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="22"/>
                        </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="BalloonHintOpenedDown">
                      <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="HintVisualElement" 
                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="HintVisualElement" 
                                                   Storyboard.TargetProperty="Height">
                          <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="22"/>
                        </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="BalloonHintClosed">
                      <Storyboard>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                                   Storyboard.TargetName="HintVisualElement"
                                                   Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                   Storyboard.TargetName="HintVisualElement" 
                                                   Storyboard.TargetProperty="Height">
                          <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="22"/>
                          <SplineDoubleKeyFrame KeyTime="00:00:00.200" KeySpline="0,0,0,1" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- ParsingStates -->
                  <vsm:VisualStateGroup x:Name="ParsingStates">
                    <vsm: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>
                    </vsm:VisualState>
                    <vsm: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>
                    </vsm:VisualState>
                    <vsm: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>
                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>

                <!-- Spinner + HintVisualElement + TextBox -->
                <Grid>
                  <!-- the border will be 'flown out' to act as a balloon -->
                  <Popup x:Name="HintPopup" IsOpen="True" VerticalOffset="0">
                    <Border 
                      x:Name="HintVisualElement"
                      IsHitTestVisible="True"
                      BorderBrush="Gray"
                      Background="White"
                      Height="0"
                      HorizontalAlignment="Left"
                      BorderThickness="1">
                      <Border.RenderTransform>
                        <TransformGroup>
                          <ScaleTransform/>
                          <SkewTransform/>
                          <RotateTransform/>
                          <TranslateTransform/>
                        </TransformGroup>
                      </Border.RenderTransform>
                      <Grid>
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition />
                          <ColumnDefinition Width="Auto" MinWidth="15" />
                        </Grid.ColumnDefinitions>
                        <ContentControl 
                      Grid.Column="0"
                      IsTabStop="False"
                      IsHitTestVisible="False"
                      Margin="3"
                      HorizontalAlignment="Right" 
                      VerticalAlignment="Center"
                      Foreground="#FF4A4A4A" 
                      FontSize="10" 
                      Content="{TemplateBinding BalloonContent}" />
                        <ContentControl 
                      x:Name="emptyicon"
                      IsTabStop="False"
                      IsHitTestVisible="False"
                      Margin="3"
                      Visibility="Collapsed"
                      Grid.Column="1" />
                        <ContentControl 
                      x:Name="validicon"
                      IsHitTestVisible="False"
                      IsTabStop="False"
                      Margin="3"
                      Visibility="Collapsed"
                      Grid.Column="1" />
                        <ContentControl 
                      x:Name="invalidicon"
                      IsTabStop="False"
                      IsHitTestVisible="False"
                      Visibility="Collapsed"
                      VerticalAlignment="Center"
                      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" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                              <Path.Stroke>
                                <LinearGradientBrush StartPoint="1.10074,0.462591" EndPoint="-0.102151,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.Fill>
                                <LinearGradientBrush StartPoint="1.13883,0.460318" EndPoint="-0.140331,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>
                            <Path Stretch="Fill" StrokeThickness="0.3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" 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" VerticalAlignment="Top">
                              <Path.Fill>
                                <LinearGradientBrush StartPoint="-0.400002,0.50126" EndPoint="1.4,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 Height="3.11" Stretch="Fill" StrokeThickness="0.3" StrokeStartLineCap="Round" StrokeEndLineCap="Round" 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">
                              <Path.Fill>
                                <LinearGradientBrush StartPoint="-0.0599991,0.5" EndPoint="1.06,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>
                  <Border 
                  Background="{TemplateBinding Background}" 
                  BorderBrush="{TemplateBinding BorderBrush}" 
                  BorderThickness="{TemplateBinding BorderThickness}" 
                  Padding="{TemplateBinding Padding}">

                    <inputToolkit:ButtonSpinner x:Name="Spinner"
                  Style="{StaticResource spinnerStyle}"
                  MinWidth="35" 
                  IsTabStop="False"
                  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>
                  </Border>
                </Grid>
                <!-- DisabledVisualElement -->
                <Border x:Name="DisabledVisualElement" 
              IsHitTestVisible="false" 
              Opacity="0" 
              Background="#A5FFFFFF" 
              CornerRadius="2.5,2.5,2.5,2.5"/>
                <!-- focus visual element -->
                <Border x:Name="FocusVisualElement" 
              IsHitTestVisible="False" 
              Opacity="0" 
              BorderBrush="#FF45D6FA" 
              BorderThickness="{TemplateBinding BorderThickness}" 
              CornerRadius="1,1,1,1"/>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>



    </StackPanel.Resources>
    <inputToolkit:TimeUpDown 
      Style="{StaticResource tudStyle}"
      SpinnerStyle="{StaticResource spinnerStyle}"
      x:Name="timeUpDownIsEnabledTrue" 
      Value="12:00" 
      IsEnabled="True"
      Margin="10"
      />

    <inputToolkit:TimeUpDown 
      x:Name="timeUpDownIsEnabledFalse" 
      Style="{StaticResource tudStyle}"
      SpinnerStyle="{StaticResource spinnerStyle}"
      Value="12:00" 
      IsEnabled="False"
      Margin="10"
      />

    <inputToolkit:TimeUpDown 
      x:Name="timeUpDown" 
      Style="{StaticResource tudStyle}"
      SpinnerStyle="{StaticResource spinnerStyle}"
      Value="12:00" 
      IsEnabled="False"
      Margin="10"
      />

    <CheckBox x:Name="isTimePickerEnabledCheckBox" IsThreeState="False" IsChecked="False" 
      Click="isTimePickerEnabledCheckBox_Click"
      Content="TimePicker IsEnabled"
      HorizontalAlignment="Right"
      Margin="10"
      />


  </StackPanel>
</UserControl>

Re: TimeUpDown - Inconsistent Styles with IsEnabled

mj_naughton — Thu, 26 Mar 2009 12:01:36 GMT

Hi RJ,

Thanks for the quick response. I am able to make progress now.

I found that I needed to make the change you suggested for TimeUpDown too, to get readable text. I did both changes in the Themes/generic.xaml file in the Silverlight3 Toolkit source (Controls.Input.Toolkit project).

It does raise the longer-term issue with "cascading" VisualStyles, where Opacity is concerned, at least. The default template for ButtonSpinner seems OK if it is used standalone. However, any container control (e.g. TimeUpDown) would probably need to override the default ButtonSpinner Template/Styles within its own default Control Template. Is that possible (I'm not a XAML Templating specialist)?

Also, is it possible in Silverlight 3 to take advantage of the added "BasedOn" mechanism to more easily reuse Template/Style overrides in container/derived controls.

Finally, while I can now see the text in the TimeUpDown TextBox when it is disabled, the RepeatButtons appear enabled (i.e. they are black, with Opacity=1, I think).

XAML snippet:

<Setter.Value>

</LinearGradientBrush>

</Setter.Value>

</Setter>

<Setter.Value>

<Grid>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="CommonStates">

<vsm:VisualStateGroup.Transitions>

<vsm:VisualTransition GeneratedDuration="0" />

</vsm:VisualStateGroup.Transitions>

<vsm:VisualState x:Name="Normal" />

<vsm:VisualState x:Name="Disabled">

<!--<Storyboard>

</Storyboard>-->

</vsm:VisualState>

</vsm:VisualStateGroup>

Re: TimeUpDown - Inconsistent Styles with IsEnabled

Ruurd Boeke — Thu, 26 Mar 2009 03:47:20 GMT

Hi,

I have opened a workitem http://silverlight.codeplex.com/WorkItem/View.aspx?WorkItemId=2414 to track this bug.

Thank you for pointing it out!

I will explain what is happening: TimeUpdown uses a ButtonSpinner. That buttonSpinner has a disabled state and in that state will overlay a rectangle with a certain opacity. However, since the content inside of buttonSpinner also receives the IsEnabled state (it cascades) it does the same. The result is multiple overlays being displayed, resulting in a far too low opacity for the TextBox. It is quite possible that the TimeUpDown disabled state should be removed as well.

The workaround though is not pretty. You will need to retemplate ButtonSpinner.Luckily TimeUpDown exposes a SpinnerStyle which is used to template the buttonSpinner.

this would be your code:

    <inputToolkit:TimeUpDown
      x:Name="timeUpDownIsEnabledFalse"
      SpinnerStyle="{StaticResource spinnerStyle}"
      Value="12:00"
      IsEnabled="False"
      Margin="10"
      />

And this style is inside a resource section of your usercontrol:

      <Style x:Key="spinnerStyle" TargetType="inputToolkit:ButtonSpinner">
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Template">
          <Setter.Value>
            <ControlTemplate TargetType="inputToolkit:ButtonSpinner">
              <Grid>
                <Grid.Resources>
                  <ControlTemplate x:Key="IncreaseButtonTemplate" TargetType="RepeatButton">
                    <Grid x:Name="Root">
                      <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualStateGroup.Transitions>
                            <vsm:VisualTransition GeneratedDuration="0"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                          </vsm:VisualStateGroup.Transitions>
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F2FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#CCFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#7FFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Pressed">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F4FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#EAFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#C6FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#6BFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                          <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Unfocused"/>
                        </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" StrokeThickness="1" RadiusX="2" RadiusY="2">
                        <Rectangle.Stroke>
                          <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                            <GradientStop Color="#FFAEB7BF" Offset="0"/>
                            <GradientStop Color="#FF919EA7" Offset="0.35"/>
                            <GradientStop Color="#FF7A8A99" Offset="0.35"/>
                            <GradientStop Color="#FF647480" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Stroke>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="1" RadiusY="1">
                        <Rectangle.Fill>
                          <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Fill>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="Highlight" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                      <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Path HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="#FF333333" Stretch="Uniform" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " Margin="4,3,4,3"/>
                    </Grid>
                  </ControlTemplate>
                  <ControlTemplate x:Key="DecreaseButtonTemplate" TargetType="RepeatButton">
                    <Grid x:Name="Root">
                      <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                          <vsm:VisualStateGroup.Transitions>
                            <vsm:VisualTransition GeneratedDuration="0"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="MouseOver"/>
                            <vsm:VisualTransition GeneratedDuration="00:00:00.1" To="Pressed"/>
                          </vsm:VisualStateGroup.Transitions>
                          <vsm:VisualState x:Name="Normal"/>
                          <vsm:VisualState x:Name="MouseOver">
                            <Storyboard>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F2FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#CCFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#7FFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Pressed">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Highlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF448DCA"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#F4FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#EAFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#C6FFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                              <ColorAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#6BFFFFFF"/>
                              </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Disabled">
                            <Storyboard>
                              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                              </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                          <vsm:VisualState x:Name="Focused">
                            <Storyboard>
                              <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                              </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                          </vsm:VisualState>
                          <vsm:VisualState x:Name="Unfocused"/>
                        </vsm:VisualStateGroup>
                      </vsm:VisualStateManager.VisualStateGroups>
                      <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" StrokeThickness="1" RadiusX="2" RadiusY="2">
                        <Rectangle.Stroke>
                          <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                            <GradientStop Color="#FFAEB7BF" Offset="0"/>
                            <GradientStop Color="#FF919EA7" Offset="0.35"/>
                            <GradientStop Color="#FF7A8A99" Offset="0.35"/>
                            <GradientStop Color="#FF647480" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Stroke>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="BackgroundGradient" Stroke="#FFFFFFFF" StrokeThickness="1" RadiusX="1" RadiusY="1">
                        <Rectangle.Fill>
                          <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                            <GradientStop Color="#FFFFFFFF" Offset="0"/>
                            <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                            <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                            <GradientStop Color="#C6FFFFFF" Offset="1"/>
                          </LinearGradientBrush>
                        </Rectangle.Fill>
                      </Rectangle>
                      <Rectangle Margin="1" x:Name="Highlight" IsHitTestVisible="false" Opacity="0" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                      <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" Stroke="#FF45D6FA" StrokeThickness="1" RadiusX="1" RadiusY="1"/>
                      <Path Height="Auto" HorizontalAlignment="Stretch" Margin="4,3,4,3" VerticalAlignment="Stretch" Width="Auto" Fill="#FF333333" Stretch="Uniform" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z "/>
                    </Grid>
                  </ControlTemplate>
                </Grid.Resources>
                <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"/>
                    <vsm:VisualState x:Name="Disabled">
                      
                      <!-- snip -->

                    </vsm:VisualState>
                  </vsm:VisualStateGroup>
                  <!-- focus states -->
                  <vsm:VisualStateGroup x:Name="FocusStates">
                    <vsm:VisualState x:Name="Focused">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </vsm:VisualState>
                    <vsm:VisualState x:Name="Unfocused"/>
                  </vsm:VisualStateGroup>
                  <!-- Increase states -->
                  <vsm:VisualStateGroup x:Name="IncreaseStates">
                    <vsm:VisualState x:Name="IncreaseEnabled" />
                    <vsm:VisualState x:Name="IncreaseDisabled" />
                  </vsm:VisualStateGroup>
                  <!-- Decrease states-->
                  <vsm:VisualStateGroup x:Name="DecreaseStates">
                    <vsm:VisualState x:Name="DecreaseEnabled" />
                    <vsm:VisualState x:Name="DecreaseDisabled" />
                  </vsm:VisualStateGroup>
                </vsm:VisualStateManager.VisualStateGroups>
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                  <Grid>
                    <Grid.RowDefinitions>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="*"/>
                      <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <ContentPresenter Grid.RowSpan="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"/>
                    <Button IsTabStop="False" IsHitTestVisible="True" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
                      <Button.Template>
                        <ControlTemplate TargetType="Button">
                          <Grid Background="Transparent" />
                        </ControlTemplate>
                      </Button.Template>
                    </Button>
                    <RepeatButton Grid.Row="0" Grid.Column="1" IsTabStop="False" Template="{StaticResource IncreaseButtonTemplate}" x:Name="IncreaseButton" ClickMode="Press"/>
                    <RepeatButton Grid.Row="1" Grid.Column="1" IsTabStop="False" Template="{StaticResource DecreaseButtonTemplate}" x:Name="DecreaseButton" ClickMode="Press"/>
                  </Grid>
                </Border>
                <Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Opacity="0" Background="#A5FFFFFF" CornerRadius="3"/>
                <Border x:Name="FocusVisualElement" IsHitTestVisible="false" Visibility="Collapsed" BorderBrush="#FF45D6FA" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1"/>
              </Grid>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>

As you can see, I have removed the Disabled story board. If you still feel that the text is too gray, I would recommend doing the same for TimeUpDown. Let me know if you need help with this, and I will post the TimeUpDown style to be used.

I hope this helps!

TimeUpDown - Inconsistent Styles with IsEnabled

mj_naughton — Thu, 26 Mar 2009 02:51:40 GMT

Hi,

The style applied to TimeUpDown when IsEnabled=True differs if the IsEnabled property is set in XAML as opposed to code-behind.

Further, I thought I found a bug in TimeUpDown, because I thought it was not rendering the Value. However, on closer inspection, it was displaying the value but the foregorund colour was a very light grey - almost invisible, when IsEnabled=False. (No theming applied)

Note: This scenario was tested after applying the fix described for the issue here:

http://silverlight.net/forums/t/83044.aspx

XAML (MainPage.xaml):

<UserControl xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" x:Class="SilverlightTimeUpDownApp.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

<inputToolkit:TimeUpDown

x:Name="timeUpDownIsEnabledTrue"

Value="12:00"

IsEnabled="True"

Margin="10"

<inputToolkit:TimeUpDown

x:Name="timeUpDownIsEnabledFalse"

Value="12:00"

IsEnabled="False"

Margin="10"

<inputToolkit:TimeUpDown

x:Name="timeUpDown"

Value="12:00"

IsEnabled="False"

Margin="10"

<CheckBox x:Name="isTimePickerEnabledCheckBox" IsThreeState="False" IsChecked="False"

Click="isTimePickerEnabledCheckBox_Click"

Content="TimePicker IsEnabled"

HorizontalAlignment="Right"

Margin="10"

</StackPanel>

</Grid> </UserControl>

Code Behind (MainPage.xaml.cs):

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace SilverlightTimeUpDownApp

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

}

private void isTimePickerEnabledCheckBox_Click(object sender, RoutedEventArgs e)

{

timeUpDown.IsEnabled = (isTimePickerEnabledCheckBox.IsChecked ?? false);

}