How can I put animation effect inside MouseOver trigger in wpf - c#

I have a button with image inside that has a Mouse Enter trigger for animation I had created. The problem is when the button is clicked the trigger and also the animation does not occur again on mouse enter. So I think maybe using Mouse Over trigger instead would solve the problem but i don't know how . Here is my code :
<telerik:RadButton Name="setting" CornerRadius="12" Click="settings_Click" Grid.Column="2" IsBackgroundVisible="False">
<Image Source="/CRI_12;component/Images/cog-64.png" RenderTransformOrigin=".5,.5" Stretch="Uniform">
<Image.RenderTransform>
<RotateTransform x:Name="AnimatedRotate" Angle="0" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="AnimatedRotate"
Storyboard.TargetProperty="Angle"
By="0"
To="45"
Duration="0:0:.5"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</telerik:RadButton>
Edited

The visual states that are defined in the default template of the RadButton are applied after your trigger and hence the trigger becomes overridden. You will need to edit the template in order to get this working for a RadButton. Quote a lot of markup but here it is:
<telerik:RadButton Name="setting" CornerRadius="12" Click="settings_Click" Grid.Column="2" IsBackgroundVisible="False">
<telerik:RadButton.Resources>
<SolidColorBrush x:Key="ControlInnerBorder_Normal" Color="#FFFFFFFF"/>
<LinearGradientBrush x:Key="ControlBackground_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFEEBAE" Offset="0.50"/>
<GradientStop Color="#FFFFD25A" Offset="0.50"/>
<GradientStop Color="#FFFFFBA3" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlOuterBorder_MouseOver" Color="#FFFFC92B"/>
<SolidColorBrush x:Key="ControlInnerBorder_MouseOver" Color="#FFFFFFFF"/>
<LinearGradientBrush x:Key="ControlBackground_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFDCAB" Offset="0"/>
<GradientStop Color="#FFFFD18F" Offset="0.5"/>
<GradientStop Color="#FFFE9227" Offset="0.5"/>
<GradientStop Color="#FFFFBA74" Offset="0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlOuterBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ControlInnerBorder_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent"/>
<SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0"/>
<SolidColorBrush x:Key="ControlBackground_Focused" Color="Transparent"/>
<SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#FFFFC92B"/>
<SolidColorBrush x:Key="ControlInnerBorder_Focused" Color="Transparent"/>
</telerik:RadButton.Resources>
<Image Source="/CRI_12;component/Images/cog-64.png" RenderTransformOrigin=".5,.5" Stretch="Uniform">
<Image.RenderTransform>
<RotateTransform x:Name="AnimatedRotate" Angle="0" />
</Image.RenderTransform>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="sb">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
By="0"
To="45"
Duration="0:0:.5"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="sb" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<telerik:RadButton.Template>
<ControlTemplate TargetType="telerik:RadButton">
<Grid SnapsToDevicePixels="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OuterMouseOverBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterPressedBorder" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="CommonStatesWrapper" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundIsHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="BackgroundIsVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.150">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!--<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="00:00:00.115">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>-->
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="OuterBorder"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
CornerRadius="{TemplateBinding CornerRadius}">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{x:Null}"
CornerRadius="{TemplateBinding InnerCornerRadius}"
BorderBrush="{StaticResource ControlInnerBorder_Normal}"/>
</Border>
<Border x:Name="OuterMouseOverBorder"
Opacity="0"
CornerRadius="{TemplateBinding CornerRadius}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{StaticResource ControlBackground_MouseOver}"
BorderBrush="{StaticResource ControlOuterBorder_MouseOver}">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{x:Null}"
CornerRadius="{TemplateBinding InnerCornerRadius}"
BorderBrush="{StaticResource ControlInnerBorder_MouseOver}"/>
</Border>
<Border x:Name="OuterPressedBorder"
Visibility="Collapsed"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Background="{StaticResource ControlBackground_Pressed}"
BorderBrush="{StaticResource ControlOuterBorder_Pressed}">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{x:Null}"
CornerRadius="{TemplateBinding InnerCornerRadius}"
BorderBrush="{StaticResource ControlInnerBorder_Pressed}"/>
</Border>
<Border x:Name="DisabledVisual"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Visibility="Collapsed"
BorderBrush="{StaticResource ControlInnerBorder_Disabled}"
Background="{StaticResource ControlBackground_Disabled}"/>
<ContentPresenter x:Name="Content"
TextBlock.Foreground="{TemplateBinding Foreground}"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
RecognizesAccessKey="True"/>
<Border x:Name="CommonStatesWrapper">
<Border x:Name="FocusVisual"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Visibility="Collapsed"
Background="{StaticResource ControlBackground_Focused}"
BorderBrush="{StaticResource ControlOuterBorder_Focused}">
<Border BorderThickness="1" BorderBrush="{StaticResource ControlInnerBorder_Focused}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
</Border>
</Grid>
</ControlTemplate>
</telerik:RadButton.Template>
</telerik:RadButton>

Here some example, don't forget to change button for your Telerik's one and change image's source:
<Button Height="50" Width="50">
<Image Source="Images/ok_icon.png">
<Image.RenderTransform>
<RotateTransform CenterX="25" CenterY="25"/>
</Image.RenderTransform>
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
From="0"
To="45"
Duration="0:0:0.5"
FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Button>

Related

IsEnabled TextBox style. Silverlight

I'm trying to prevent textbox from fading out when it is disabled.
So i'm trying to do it in IsEnabledChanged event handler like this:
private void AssociatedObjectOnIsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
var border = FindVisualChildByName<Border>(AssociatedObject, "DisabledVisual");
if (!(bool) e.NewValue)
{
AssociatedObject.Foreground = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
if (border != null)
{
border.Visibility = Visibility.Collapsed;
border.Opacity = 0;
}
}
else
{
AssociatedObject.Foreground = defaultBrush;
}
}
So.. This approach doesn't work. Actually ActualWidth and ActualHeight is presented, but Visibility set to Collapsed.
Can't understand why? And any other approaches to prevent textbox from fading out when IsEnabled = false?
Thanks!
The effect is because of visual states of the textbox (MSDN LINK)
The VisualState Name Disabled causes the fading effect.
I have pasted the edited style by commenting the storyboard for fading effect. All you have to do is apply this style(after editing if needed) to ur text box for which u Don't want thfading effect.
<Style TargetType="TextBox">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="2"/>
<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="TextBox">
<Grid x:Name="RootElement">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<!--<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>-->
</vsm:VisualState>
<vsm:VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="ValidationStates">
<vsm:VisualState x:Name="Valid"/>
<vsm:VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#5EC9C9C9"/>
<Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
<ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>
</Border>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="ValidationErrorElement" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>true</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Width="12" Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
<Path Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
<Path Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How do I make a read-only textbox that selects all text when tapped?

I am trying to make a textbox look like a textblock (no white background or anything) so that I can display resulting text and numbers in it. When the user taps on the text I want the whole result to be highlighted for easy copy/pasting. This is for a Windows Phone 8 Application. Thanks!
I've tried using this:
<Style x:Key="TransparentTextBoxStyle" TargetType="TextBox">
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="EnabledBorder" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Border>
<Border x:Name="DisabledOrReadonlyBorder" BorderThickness="{TemplateBinding BorderThickness}" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">
<TextBox x:Name="DisabledOrReadonlyContent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But it makes it so that everything is black or invisible until you tap on the text to highlight it.
To make it look like TextBlock you have to set IsReadOnly property to true and modify control style (template) for ReadOnly visual state as shown below:
<!-- namespace declarations
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-->
<Style TargetType="TextBox" x:Key="TextBoxAsTextBlock">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="#FFFFFFFF"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="0,2,2,2"/>
<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="TextBox">
<Grid x:Name="RootElement">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="ReadOnly">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" To="#00000000" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="(BorderBrush).(LinearGradientBrush.Opacity)" To="0" Duration="0"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EditModeLeftBorderElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="ValidationStates">
<vsm:VisualState x:Name="Valid"/>
<vsm:VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<Grid>
<Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#5EC9C9C9" />
<Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Width="2" x:Name="EditModeLeftBorderElement" Grid.Column="0" />
<ScrollViewer x:Name="ContentElement" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False" Grid.Column="1" />
</Grid>
</Border>
</Grid>
</Border>
<Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="ValidationErrorElement" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>true</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Width="12" Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
<Path Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
<Path Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To select text on focus assign following event handler to GotFocus event:
private static void OnTextBoxFocused(object sender, RoutedEventArgs e)
{
((TextBox)sender).SelectAll();
}
I was able to answer my own question.
The style:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="CopyPasteTextBox" TargetType="TextBox">
<Setter Property="Foreground" Value="White" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<ContentPresenter x:Name="ContentElement" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
And the textbox:
<ScrollViewer VerticalScrollBarVisibility="Visible" Width="396" Margin="31,231,41,106">
<TextBox TextAlignment="Left"
FontSize="30"
Margin="0,0,0,0"
Grid.Row="2"
Foreground="White"
Name="resultbox"
Grid.ColumnSpan="2"
BorderThickness="0"
Style="{StaticResource CopyPasteTextBox}"
GotFocus="resultbox_GotFocus"/>
</ScrollViewer>

Centering text vertically and horizontally in TextBlock and PasswordBox in windows store app

I am trying to center the text in a TextBlock and PasswordBox.
In TextBlock I use TextAlignment Property to center the text horizontally, but it still close to the top. How to center the text vertically?
And in PasswordBox there is no property associate with the text alignment, how to achieve this??
TextAlignment is for horizontal alignment. TextBlock itself doesn't suport vertical alignment.
I suggest put a border around it and let border do vertical alignment:
<Border BorderBrush="{x:Null}" Height="50">
<TextBlock Text="Your text" VerticalAlignment="Center"/>
</Border>
Or other way would be using height and set padding within textblock.
For password box use in WPF:
<PasswordBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
For Silverlight you will need to extract the actual template of passwordbox (use blend it allows you to edit template and copy that) then you can change the members (on ContentElement which is of type Border) with template binding like:
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
You can get the template also at this msdn link.
For passworbox in Silverlight update password box style in your xaml as this:
<ControlTemplate x:Key="ValidationToolTipTemplate">
<Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
<Grid.RenderTransform>
<TranslateTransform x:Name="xform" X="-25"/>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="OpenStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition To="Open" GeneratedDuration="0:0:0.2">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<BackEase Amplitude=".3" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Closed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Open">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="xform" Storyboard.TargetProperty="X" To="0" Duration="0"/>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
<Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
<Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
<Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>
<Border Background="#FFDC000C" CornerRadius="2"/>
<Border CornerRadius="2">
<TextBlock
UseLayoutRounding="false"
Foreground="White" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].ErrorContent}"/>
</Border>
</Grid>
</ControlTemplate>
<Style TargetType="PasswordBox">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="Padding" Value="2" />
<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="PasswordBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<Border x:Name="MouseOverBorder" BorderThickness="1" BorderBrush="Transparent">
<Border x:Name="ContentElement" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Border>
<Border x:Name="DisabledVisualElement" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="FocusVisualElement" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" Margin="1" Opacity="0" IsHitTestVisible="False"/>
<Border x:Name="ValidationErrorElement" BorderThickness="1" CornerRadius="1" BorderBrush="#FFDB000C" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" Template="{StaticResource ValidationToolTipTemplate}" Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>true</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Width="12" Height="12" HorizontalAlignment="Right" Margin="1,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
<Path Margin="1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C"/>
<Path Margin="1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then your PasswordBox can have alignment as such:
<PasswordBox HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
Change the TextBlock to a Label. A Label has a VerticalContentAlignment property which is used to center the content vertically.
This would do the horizontal alignment only.
For Horizental/Vertical both, better go with Label instead of TextBlock.

TimeUpDown focus minutes

I've written a small MouseEnter-Event for a TimeUpDown, to set the focus.
xaml:
<toolkit:TimeUpDown MouseEnter="TimeUpDown_MouseEnter" KeyDown="time_KeyDown" ValueChanged="time_Value_Changed" Value="{Binding Endtime, Mode=TwoWay,BindsDirectlyToSource=True}"/>
xaml.cs:
private void TimeUpDown_MouseEnter(object sender, MouseEventArgs e)
{
TimeUpDown picker = sender as TimeUpDown;
picker.Focus();
}
With this code, I focus (highlight) the complete time (eg 10:15 ... hrs and mins) for the TimeUpDown.
How can I only focus the minutes (eg 10:15) for the TimeUpDown???
The TextBox in the template of a TimeUpDown is not accessible, so I would recommend creating a style using a custom TextBox instead.
Edit complex templates in Expression Blend. I have copied the basic template of the TimeUpDown style below. As you can see it is not only very complex, but the TextBox is actually in a Template within a Template:
XAML (style part only)
<UserControl.Resources>
<Style x:Key="TimeUpDownStyle1" TargetType="toolkit:TimeUpDown">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Height" Value="22"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="MinWidth" Value="100"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:TimeUpDown">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="TimeHintStates">
<VisualState x:Name="TimeHintOpenedUp">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TimeHintVisualElement">
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="-23"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Height" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="22"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="TimeHintOpenedDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TimeHintVisualElement">
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Height" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="22"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="TimeHintClosed">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteObjectKeyFrame KeyTime="00:00:20" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TimeHintVisualElement">
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Height" Storyboard.TargetName="TimeHintVisualElement">
<DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="22"/>
<SplineDoubleKeyFrame KeySpline="0,0,0,1" KeyTime="00:00:00.200" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ParsingStates">
<VisualState x:Name="ValidTime">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="validicon">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidTime">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="invalidicon">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="EmptyTime">
<Storyboard>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="emptyicon">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Popup x:Name="TimeHintPopup" VerticalOffset="0">
<Border x:Name="TimeHintVisualElement" BorderBrush="Gray" BorderThickness="1" Background="White" HorizontalAlignment="Left" IsHitTestVisible="True" Visibility="Collapsed">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MinWidth="15" Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentControl Content="{TemplateBinding TimeHintContent}" Grid.Column="0" Foreground="#FF4A4A4A" FontSize="10" HorizontalAlignment="Right" IsHitTestVisible="False" IsTabStop="False" Margin="3" VerticalAlignment="Center"/>
<ContentControl x:Name="emptyicon" Grid.Column="1" IsHitTestVisible="False" IsTabStop="False" Margin="3" Visibility="Collapsed"/>
<ContentControl x:Name="validicon" Grid.Column="1" IsHitTestVisible="False" IsTabStop="False" Margin="3" Visibility="Collapsed"/>
<ContentControl x:Name="invalidicon" Grid.Column="1" IsHitTestVisible="False" IsTabStop="False" Visibility="Collapsed" VerticalAlignment="Center">
<Grid Height="13" VerticalAlignment="Bottom" Width="10">
<Path 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 " HorizontalAlignment="Stretch" Height="11.833" StrokeStartLineCap="Round" Stretch="Fill" StrokeEndLineCap="Round" StrokeLineJoin="Bevel" VerticalAlignment="Top">
<Path.Fill>
<LinearGradientBrush EndPoint="-0.140331,0.460318" StartPoint="1.13883,0.460318">
<GradientStop Color="#FFF7F79F" Offset="0.123636"/>
<GradientStop Color="#FBFBFB7D" Offset="0.177662"/>
<GradientStop Color="#F6FFFF5B" Offset="0.24"/>
<GradientStop Color="#E7CAA709" Offset="0.52"/>
<GradientStop Color="#9ADABE0C" Offset="0.941376"/>
<GradientStop Color="#4DEBD60F" Offset="0.941818"/>
<GradientStop Color="#FBF6EC20" Offset="0.956364"/>
<GradientStop Color="#FFFFFF2F" Offset="0.963636"/>
</LinearGradientBrush>
</Path.Fill>
<Path.Stroke>
<LinearGradientBrush EndPoint="-0.102151,0.462591" StartPoint="1.10074,0.462591">
<GradientStop Color="#F6CAA709" Offset="0.0436364"/>
<GradientStop Color="#F3F7F34F" Offset="0.149091"/>
<GradientStop Color="#E7CAA709" Offset="0.825455"/>
<GradientStop Color="#E7967C07" Offset="0.967124"/>
<GradientStop Color="#E7625106" Offset="0.967273"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="F1 M 18.6937,17.3004L 22.2563,17.3004L 21.1313,23.6937L 19.8563,23.6937L 18.6937,17.3004 Z " Height="4.683" Margin="4.25,2.25,3.75,0" StrokeStartLineCap="Round" Stretch="Fill" StrokeEndLineCap="Round" Stroke="#FF1B1B54" StrokeThickness="0.3" StrokeLineJoin="Bevel" VerticalAlignment="Top">
<Path.Fill>
<LinearGradientBrush EndPoint="1.4,0.50126" StartPoint="-0.400002,0.50126">
<GradientStop Color="#FFF7F79F" Offset="0.123636"/>
<GradientStop Color="#FB8F8873" Offset="0.175974"/>
<GradientStop Color="#F6271A47" Offset="0.236364"/>
<GradientStop Color="#E7271A47" Offset="0.534545"/>
<GradientStop Color="#9A89782B" Offset="0.941391"/>
<GradientStop Color="#4DEBD60F" Offset="0.941818"/>
<GradientStop Color="#FBF6EC20" Offset="0.956364"/>
<GradientStop Color="#FFFFFF2F" Offset="0.963636"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path 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 " Height="3.11" Margin="3.833,0,4.167,0.833" StrokeStartLineCap="Round" Stretch="Fill" StrokeEndLineCap="Round" Stroke="#FF1C1C50" StrokeThickness="0.3" StrokeLineJoin="Round" VerticalAlignment="Bottom">
<Path.Fill>
<LinearGradientBrush EndPoint="1.06,0.5" StartPoint="-0.0599991,0.5">
<GradientStop Color="#F6271A47" Offset="0.236364"/>
<GradientStop Color="#E7271A47" Offset="0.534545"/>
<GradientStop Color="#9A89782B" Offset="0.98135"/>
<GradientStop Color="#4DEBD60F" Offset="0.981818"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ContentControl>
</Grid>
</Border>
</Popup>
<toolkit:ButtonSpinner x:Name="Spinner" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalContentAlignment="Stretch" IsTabStop="False" MinWidth="35" Padding="{TemplateBinding Padding}" Style="{TemplateBinding SpinnerStyle}" VerticalContentAlignment="Stretch">
<TextBox x:Name="Text" AcceptsReturn="False" BorderThickness="0" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" MinWidth="20" TextAlignment="Right" TextWrapping="NoWrap" Text="{TemplateBinding Value}">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<ScrollViewer x:Name="ContentElement" BorderThickness="0" Padding="0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</toolkit:ButtonSpinner>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TimePickerStyle1" TargetType="toolkit:TimePicker">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="MinWidth" Value="125"/>
<Setter Property="Height" Value="22"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="Transparent"/>
<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="PopupTemplate">
<Setter.Value>
<toolkit:TimePickerPopupTemplate>
<toolkit:ListTimePickerPopup/>
</toolkit:TimePickerPopupTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:TimePicker">
<Grid x:Name="RootElement">
<Grid.Resources>
<ControlTemplate x:Key="PopupButtonTemplate" TargetType="ToggleButton">
<Grid FlowDirection="LeftToRight" Height="20" Width="20">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.1000000"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
<SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse">
<SplinePointKeyFrame KeyTime="00:00:00" Value="1.016,0.377"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-0.01,0.687"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.556,0.035"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.441,0.979"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse1">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.984,0.328"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse1">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.031,0.719"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse2">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-0.047,0.516"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse2">
<SplinePointKeyFrame KeyTime="00:00:00" Value="1.016,0.422"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="1.062,0.375"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse3">
<SplinePointKeyFrame KeyTime="00:00:00" Value="0.031,0.688"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="ellipse4">
<SplinePointKeyFrame KeyTime="00:00:00" Value="1.031,0.281"/>
</PointAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="ellipse4">
<SplinePointKeyFrame KeyTime="00:00:00" Value="-0.188,0.656"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Grid.Resources>
<LinearGradientBrush x:Key="Dot" EndPoint="1.025,0.434" StartPoint="-0.025,0.566">
<GradientStop Color="#FFC8C8C8"/>
<GradientStop Color="#FF19191A" Offset="1"/>
</LinearGradientBrush>
</Grid.Resources>
<Ellipse x:Name="Highlight" Margin="0,0,0,0" Opacity="0" Stroke="#FF0052CA" StrokeThickness="1"/>
<Ellipse x:Name="ellipse" Margin="1,1,1,1" Stroke="{StaticResource Dot}" StrokeThickness="0.75">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF"/>
<GradientStop Color="#FFD7E3EC" Offset="0.80400002002716064"/>
<GradientStop Color="#FFFBFBFB" Offset="0.37099999189376831"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse1" Height="2" Margin="8,2,8,0" Stroke="{StaticResource Dot}" VerticalAlignment="Top" Width="2">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.817" ScaleX="2.381"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="0.966" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform X="-0.2" Y="0.087"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFB6A05" Offset="1"/>
<GradientStop Color="#FF4E4E4F" Offset="0.446"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse2" Height="2" Margin="8,0,8,2" Stroke="{StaticResource Dot}" VerticalAlignment="Bottom" Width="2">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.817" ScaleX="2.381"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="0.966" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform X="-0.2" Y="0.087"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFB6A05" Offset="1"/>
<GradientStop Color="#FF4E4E4F" Offset="0.446"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse3" HorizontalAlignment="Left" Height="1" Margin="2,10,0,0" Stroke="{StaticResource Dot}" VerticalAlignment="Top" Width="1">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.817" ScaleX="2.381"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="0.966" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform X="-0.2" Y="0.087"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFB6A05" Offset="1"/>
<GradientStop Color="#FF4E4E4F" Offset="0.446"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="ellipse4" HorizontalAlignment="Right" Height="1.421" Margin="0,10,2,0" Stroke="{StaticResource Dot}" VerticalAlignment="Top" Width="1.05">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.817" ScaleX="2.381"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform Angle="0.966" CenterY="0.5" CenterX="0.5"/>
<TranslateTransform X="-0.2" Y="0.087"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFB6A05" Offset="1"/>
<GradientStop Color="#FF4E4E4F" Offset="0.446"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Path Data="M10.108397,6.5404582 L10.108397,10.415268 L13.538931,13.738435" Fill="{x:Null}" HorizontalAlignment="Left" Height="8.258" Margin="9,6,5,0" Stretch="Fill" VerticalAlignment="Top">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B91D2"/>
<GradientStop Color="#FFC1570E" Offset="0.996"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
</Grid>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="Pressed"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="PopupStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" To="PopupOpened"/>
<VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="PopupOpened">
<Storyboard>
<DoubleAnimation To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PopupRoot"/>
</Storyboard>
</VisualState>
<VisualState x:Name="PopupClosed">
<Storyboard>
<DoubleAnimation To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PopupRoot"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<toolkit:TimeUpDown x:Name="TimeUpDown" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Culture="{TemplateBinding Culture}" Grid.Column="0" Format="{TemplateBinding Format}" Height="Auto" Maximum="{TemplateBinding Maximum}" Minimum="{TemplateBinding Minimum}" Padding="{TemplateBinding Padding}" Style="{StaticResource TimeUpDownStyle1}" SpinnerStyle="{TemplateBinding SpinnerStyle}" TimeParsers="{TemplateBinding TimeParsers}" TimeGlobalizationInfo="{TemplateBinding TimeGlobalizationInfo}"/>
<ToggleButton x:Name="DropDownToggle" Grid.Column="1" HorizontalAlignment="Center" Margin="3,0,0,0" Template="{StaticResource PopupButtonTemplate}" VerticalAlignment="Center"/>
<Popup x:Name="Popup">
<Border x:Name="PopupRoot" BorderBrush="#FF8d8b8b" BorderThickness="1">
<ContentControl x:Name="PopupPlaceHolder" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch"/>
</Border>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
If you have short format (hh:MM AM/PM), solution would be something like this:
int startIndex = picker.Text.Text.IndexOf(':');
picker.Text.SelectionStart = startIndex + 1;
picker.Text.SelectionLength = 2; // minutes have two digits
If you have other date format, then find index of colon that is just before the minutes.

How to stop animation of Image-scaling to reset itself?

I have created a copy of the Button template and added an Image in there.
Then I created a mouseover state for *=> MouseOver to scale the image by 0.1.
It works. However despite leaving the mouse over the image, the animation resets itself back to initial state as if there was no mouseover still in place.
How can I make it stay there?
The second question is regarding the hardcoded path of Source within my Image. How can I inject it from the top into the style rather than having it hardcoded for one specific image? So that its more generic?
Many Thanks
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<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="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" To="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="toolbarImage" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="toolbarImage" d:IsOptimized="True"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#FF6DBDD1" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
<Rectangle x:Name="BackgroundGradient">
<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>
</Grid>
</Border>
<Image x:Name="toolbarImage" Source="./Images/New.png">
<Image.RenderTransform>
<CompositeTransform CenterY="24" CenterX="24"/>
</Image.RenderTransform>
</Image>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
UPDATE:
Despite having set the autoreverse to false, I still havent sorted out the first issue.
<VisualTransition From="Normal" GeneratedDuration="0" To="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BackgroundAnimation"/>
<ColorAnimation Duration="0" To="#F2FFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#CCFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>
<DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="toolbarImage" AutoReverse="False"/>
<DoubleAnimation Duration="0:0:0.4" To="1.1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="toolbarImage" AutoReverse="False"/>
</Storyboard>
</VisualTransition>
UPDATE 2:
I have uploaded a sample here to demo what I mean. Hover with mouse over the New button:
http://sl.venuscloud.com/
Am I missing something obvious?
Thanks
Well your requirement does sound a bit impractical to me i.e. scaling images on mouseover and keeping them scaled forever then onwards??
Although if you insist
Being part of a Trigger, the scaling animation will anyways be removed (and scaled back to its original size) if you do not hover the mouse.
So for your requirement to fulfill, you can scale-animate the button in an attached behavior and not in Trigger that starts on main thread when mouseover is true (and make sure you write no reverse logic when its not a mouse over).
<Button myNameSpace:MyAttachedBehavior.BeginScalingAnimation="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" />
So in your attached behavior storyboard's AutoReverse property should be false and the scaling should persist after animation ends.
Now for next issue for image source...
You would have to create another Attached Property for Button which can be of ImageSource type. You can TemplateBind to that attached property in your Style.
e.g.
<Button myNameSpace:MyAttachedBehavior.IconPath=".../xyz.png"/>
and in Style's Template
<Image Source="{TemplateBinding myNameSpace.MyAttachedBehavior:IconPath}" .../>
in case if above TemplateBinding does not work try TemplatedParent as RelativeSource in normal Binding.
Let me know if this helps.

Categories