Re: TimeUpDown - Inconsistent Styles with IsEnabled

03-26-2009 12:34 PM |

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>