Any ideas on how to flash a border but not the children inside?
I can flash the border like so:
<UserControl.Resources>
<Storyboard x:Key="valueFlasher" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="outline">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Border BorderBrush="Black" BorderThickness="3" CornerRadius="7" x:Name="outline">
<!--children-->
</Border>
But that will change the opacity of everything nested inside.
I was thinking something like this:
<Border BorderThickness="3" CornerRadius="7">
<Border.BorderBrush>
<SolidColorBrush Color="Black" x:Name="outline"/>
</Border.BorderBrush>
<!--children-->
</Border>
But it doesn't seem to work either. Maybe my storyboard can't find 'outline' because its nested?
Thanks in advance!
The property path (UIElement.Opacity) is not valid for SolidColorBrush, because it is not a UIElement.
Instead, use BorderBrush.Opacity
<Storyboard x:Key="valueFlasher" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="BorderBrush.Opacity"
Storyboard.TargetName="outline">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
with a Border like this:
<Border x:Name="outline" BorderThickness="3" CornerRadius="7">
<Border.BorderBrush>
<SolidColorBrush Color="Black"/>
</Border.BorderBrush>
<!--children-->
</Border>
Or just Opacity
<Storyboard x:Key="valueFlasher" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="outline">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
with the x:Name set on the SolidColorBrush:
<Border BorderThickness="3" CornerRadius="7">
<Border.BorderBrush>
<SolidColorBrush x:Name="outline" Color="Black"/>
</Border.BorderBrush>
<!--children-->
</Border>
Related
I have a WPF application which contains a an ellipse which has a circular animation. The animation only runs for 2 seconds and I would like it to run until I tell the storyboard to stop.
This is the Resource Dictionary Storyboard Definition:
<Storyboard x:Key="AnimateCircle" Duration="00:05:00">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="{Binding}">
<EasingColorKeyFrame KeyTime="0" Value="#FF212121"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="{Binding}">
<EasingColorKeyFrame KeyTime="0" Value="#FFF7F4F5"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="{Binding}" Duration="00:05:00">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="359"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
This is my WPF XAML code:
<Ellipse
Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
x:Name="AnimationCircle"
Margin="0,0,0,0"
Height="200" Width="200"
StrokeThickness="30"
Visibility="Visible"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF212121" Offset="0"/>
<GradientStop Color="#FFF7F4F5" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
This is WPF C# Code behind to start the animation:
sb = this.FindResource("AnimateCircle") as Storyboard;
Storyboard.SetTarget(sb, AnimationCircle);
sb.Begin(this);
Delete Duration="00:05:00" from Storyboard and modify DoubleAnimationUsingKeyFrames like this
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="{Binding}" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="359"/>
</DoubleAnimationUsingKeyFrames>
I have a grid with a multiple rows and row definitions.
<Grid x:Name="RContentGrid" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Name="RLabelRowDefinition" Height="40"></RowDefinition>
<RowDefinition Name="HeadingsRowDefinition" Height="40"></RowDefinition>
<RowDefinition Name="1RowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="2RowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="LineRowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="3RowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="4RowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="5RowDefinition" Height="Auto"></RowDefinition>
<RowDefinition Name="ErrorRowDefinition" Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
...
One of the textboxes looks like this:
<TextBox x:Name="TextBoxRight1"
Grid.Row="2" Grid.Column="1" Margin="5"
Style="{DynamicResource g_TextInputWithLabelSmall}"
FontFamily="Arial Narrow" FontSize="16" />
The referred style looks like this:
<Style x:Key="g_TextInputWithLabelSmall" TargetType="{x:Type TextBox}">
<Setter Property="Helpers:ClientKeyboardController.AutoShowKeyboard" Value="True"/>
<Setter Property="Helpers:ClientKeyboardController.AutoHideKeyboard" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid MinHeight="35" MinWidth="55">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="CustomSelected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CustomUnSelected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="#FF666666"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="#FFCCCCCC"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(Brush.RelativeTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="-45"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="#33000000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="#33000000"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Storyboard.TargetName="Bd">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Bd">
<EasingColorKeyFrame KeyTime="0" Value="Black"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
<EasingThicknessKeyFrame KeyTime="0" Value="2"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Bd">
<EasingThicknessKeyFrame KeyTime="0" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="PART_ContentHost">
<EasingColorKeyFrame KeyTime="0" Value="#FFE3001B"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">
<EasingThicknessKeyFrame KeyTime="0" Value="2"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="Bd">
<EasingThicknessKeyFrame KeyTime="0" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="PART_ContentHost">
<EasingColorKeyFrame KeyTime="0" Value="#FFE3001B"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid VerticalAlignment="Bottom" Margin="0,-75,0,50" Height="Auto">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" IsHyphenationEnabled="True" Height="Auto" Style="{DynamicResource g_TextFieldLabel_14_100}" VerticalAlignment="Bottom" Margin="0,0,2,0" Width="Auto" Opacity="0.6"><Run Text="{TemplateBinding Tag}"/><Run Text=" "/><Run Foreground="#88000000" Text="{TemplateBinding ToolTip}"/></TextBlock>
</Grid>
<Border x:Name="border" BorderBrush="{DynamicResource ErrorColor}">
<Border x:Name="Bd" SnapsToDevicePixels="true" Background="White" BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5" Angle="135"/>
<TranslateTransform/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFCCCCCC" Offset="0.5"/>
<GradientStop Color="#FF666666" Offset="0.5"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Template="{DynamicResource g_TextInput}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" Opacity="0.5"/>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem I face is that when the user clicks the textbox on the bottom half the focus goes to the grid above. Only when the user clicks on the upper half the focus comes to the textbox.
I tried the following:
- Tried changing the row definition of the rows
- Tried changing the height of the row
What am I missing here?
Thanks to Chris W. :)
By removing the margin on the Grid I was able to solve the problem:
<Grid VerticalAlignment="Bottom" Height="Auto">
<TextBlock x:Name="textBlock" TextWrapping="Wrap" IsHyphenationEnabled="True" Height="Auto" Style="{DynamicResource g_TextFieldLabel_14_100}" VerticalAlignment="Bottom" Margin="0,0,2,0" Width="Auto" Opacity="0.6"><Run Text="{TemplateBinding Tag}"/><Run Text=" "/><Run Foreground="#88000000" Text="{TemplateBinding ToolTip}"/></TextBlock>
</Grid>
I'm trying to animate a canvas in WPF using Storyboard and DoubleAnimationsUsingKeyFrames my code goes something like this:
<Canvas x:Name="bgCanvas" Height="261" Canvas.Top="-262" Width="720">
<Canvas.Background>
<ImageBrush ImageSource="Resources/backgroundBlurred.png" Stretch="UniformToFill"/>
</Canvas.Background>
<Canvas.Resources>
<Storyboard x:Key="bgAnim" x:Name="bgAnim">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(bgCanvas.Opacity)" Storyboard.Target="bgCanvas">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
I'm also using Mahapps.Metro for the project. <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(bgCanvas.Opacity)" Storyboard.Target="bgCanvas"> is underlined by blue lines and the error reads:
bgCanvas is not supported in a Windows Presentation Format (WPF) Application.
I'm not sure whats wrong with the code.
BONUS: Is this the right way to animate a canvas in WPF?
Sorry for the nub questions.
You could start the animation in an EventTrigger on the Loaded event of the Canvas:
<Canvas ...>
<Canvas.Background>
<ImageBrush .../>
</Canvas.Background>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
Replace (bgCanvas.Opacity) with (Canvas.Opacity)
I'm trying to create a control in WPF, similar to a card, that will have bound data on both "sides". Using the following code I can get it to flip from FIRST NAME to LAST NAME, just not back. Once it flips to LAST NAME and I click it just flashes like it's performing the same animation and not running the reverse. Any insight into this problem would be greatly appreciated.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>
The problem with the code is that first time when animation is run, the grid named "back" becomes visible to the user and grid named "front" becomes transparent. But still it is on the top of "Back" grid and capturing all the mouse hit.
So, when user again left click the mouse, it is captured by front grid not the back grid.
To solve this problem, You need to IsHitTestVisible to false when grid is transparent.
See the below code.
<UserControl x:Class="WpfApplication2.TileControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<UserControl.Resources>
<Storyboard x:Key="FlipFirst">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<EasingDoubleKeyFrame KeyTime="0" Value="-1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FlipLast">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Back">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="-1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Front">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Front">
<BeginStoryboard x:Name="Storyboard_Begin" Storyboard="{StaticResource FlipFirst}"/>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown" SourceName="Back">
<StopStoryboard BeginStoryboardName="Storyboard_Begin" />
<BeginStoryboard x:Name="Storyboard_Reversed" Storyboard="{StaticResource FlipLast}" />
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="LayoutRoot" Width="280" Height="680">
<Grid.Resources>
<Style TargetType="Grid">
<Setter Property="IsHitTestVisible" Value="True" />
<Style.Triggers>
<Trigger Property="Opacity" Value="0">
<Setter Property="IsHitTestVisible" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid x:Name="Back" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="LastName" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Margin="0" Text="LAST NAME" Width="100" Height="100"/>
</Grid>
<Grid x:Name="Front" HorizontalAlignment="Left" Height="680" VerticalAlignment="Top" Width="280" Background="{DynamicResource {x:Static SystemColors.ActiveCaptionBrushKey}}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<TextBlock x:Name="FirstName" HorizontalAlignment="Center" TextWrapping="Wrap" Text="FIRST NAME" VerticalAlignment="Center" Width="100" Height="100"/>
</Grid>
</Grid>
</UserControl>
I wrote a style for a button to let it rotate a bit when the mouse is over it. Unfortunately the animation does not start.
I have a created a similar style for another button type in my application which uses the VisualStateManager as well and works perfectly well so I don't think it is a problem with the VSM.
Seems there is a problem with the animation but I can't find the issue.
This is what the style looks like:
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOverState">
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimation From="0" To="10" Duration="0:0:1"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="10" To="0" Duration="0:0:1" BeginTime="0:0:1"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="0" To="-10" Duration="0:0:1" BeginTime="0:0:2"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
<DoubleAnimation From="-10" To="0" Duration="0:0:1" BeginTime="0:0:3"
Storyboard.TargetProperty="Angle"
Storyboard.TargetName="content"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have also tried
Storyboard.TargetProperty="(ContentPresenter.RenderTransform).(RotateTransform.Angle)"
You have a few problems with this template:
The VisualStateManager.VisualStateGroups elements needs to be the child of your first FrameworkElement, which in this case is a Grid
The VisualState "MouseOverState" should be renamed "MouseOver"
Each storyboard can animate each dependency property once. You have 4 double animations all attempting to animate the Angle property. What you need to use here is a DoubleAnimationUsingKeyframes that has either LinearDoubleKeyframes or EasingDoubleKeyframes.
Here is a working version of this template:
<Style TargetType="Button" x:Key="MyButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Angle" Storyboard.TargetName="content">
<EasingDoubleKeyFrame KeyTime="0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="10"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:3" Value="-10"/>
<EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Content="{TemplateBinding Content}">
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform CenterX="0.5" CenterY="0.5" Angle="0" x:Name="content"/>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>