I have the following code in a WPF 4 project, linked to an imagebox. I have four other similar instances of it that work perfectly. Why is this one throwing that vague "BAML" error we all hate (it points to the animations)? FYI, I'm using VB.net in code behind.
<Image Height="121" HorizontalAlignment="Left" Margin="139,83,0,0" Name="Spinefish" Stretch="Fill" VerticalAlignment="Top" Width="323" Source="/VBP-WORD4WORD;component/Images/IMG-SPINEFISH1.png">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" />
<TranslateTransform X="0" />
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:60" RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[1].X">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="-1000" />
<LinearDoubleKeyFrame KeyTime="0:0:25" Value="-1000" />
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="1000" />
<LinearDoubleKeyFrame KeyTime="0:0:55" Value="1000" />
<LinearDoubleKeyFrame KeyTime="0:0:60" Value="-1000" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:60" RepeatBehavior="Forever" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX">
<LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="1" />
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="-1" />
<LinearDoubleKeyFrame KeyTime="0:0:59.9" Value="-1" />
<LinearDoubleKeyFrame KeyTime="0:0:60" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
KeyTime="0:0:60" and Duration="0:0:60" do not exist, the seconds range is from 0 to 59 only, change those to 0:1:0.
Related
I want to make an image flash a set number of times, when I set its Visibility to Visible. And when it's finished flashing, I want it to make itself Collapsed again.
Here's a simple version of what I'm trying to do:
<Image Visibility="Collapsed"
Margin="0,0,3,0"
Width="24"
Source="blah"
Height="24">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<Trigger Property="Visibility"
Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="5x"
x:Name="flashingStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
Duration="0:0:1"
FillBehavior="Stop">
<DiscreteDoubleKeyFrame Value="0"
KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="1"
KeyTime="0:0:0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
Can I do this in XAML?
If you know how many times it will be flashed then you can set BeginTime correspondingly the number of times your flashing comes along.
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames RepeatBehavior="5x" Storyboard.TargetProperty="Opacity" Duration="0:0:1">
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="1" KeyTime="0:0:0.5" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="0:0:5" Duration="0:0:0" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
I saw this post
Given a WPF Image control, how can I make it bigger through animation on MouseEnter?
and I was wondering if I want to reuse this code on many Images in my project how can I apply a template to do so?
I tried creating a style but i got exception that I cannot use TargetName in Storyboard.TargetName="scale"
The Code:
<Image Width="100" Height="100" Source="...">
<Image.RenderTransform>
<ScaleTransform
x:Name="scale"
CenterX="50"
CenterY="50"
ScaleX="1"
ScaleY="1" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX"
To="1.5" />
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY"
To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleX"
To="1" />
<DoubleAnimation
Storyboard.TargetName="scale"
Storyboard.TargetProperty="ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
this is not the final answer, but I have been trying since this morning (I have to go now :-) ) but I thought this can lead you to find an answer. I still have a runtime error, but it seems to be on the right path.
<Window.Resources>
<ScaleTransform x:Key="Scale"
CenterX="50"
CenterY="50"
ScaleX="1.5"
ScaleY="1.5" />
<Style x:Key="ImageStyle" TargetType="Image">
<Style.Setters>
<Setter Property="Image.RenderTransform" Value="{StaticResource Scale}" />
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard>
<BeginStoryboard.Storyboard>
<Storyboard Duration="0:0:0.2">
<DoubleAnimation
Storyboard.Target="{DynamicResource Scale}"
Storyboard.TargetProperty="ScaleX"
To="1.5" />
<DoubleAnimation
Storyboard.Target="{DynamicResource Scale}"
Storyboard.TargetProperty="ScaleY"
To="1.5" />
</Storyboard>
</BeginStoryboard.Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Image Grid.Row="2" Width="100" Height="100" Source="C:\WindowPhoneApp7_1.PNG" Style="{StaticResource ImageStyle}">
I have a control that indicates the operation mode. Depending on the current mode (automatic, manual or none) it rotates several degrees to the left or right and also changes a label's content. The rotation works fine already. But the label's content doesn't show up, regardless of the current state. Is there any mistake in the control template (I simplified the template a bit by removing the third state)? Or is there anything else not the way it should be?
Thanks in advance!
<ControlTemplate TargetType="{x:Type local:OperationModeIndicator}">
<Grid x:Name="rootGrid" RenderTransformOrigin="0.5,0.525">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OperationModeStates">
<VisualState x:Name="None">
<Storyboard>
<StringAnimationUsingKeyFrames Storyboard.TargetName="contentLabel" Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="" />
</StringAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="rootGrid" >
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="contentLabel">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Automatic">
<Storyboard>
<StringAnimationUsingKeyFrames Storyboard.TargetName="contentLabel" Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="A" />
</StringAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="rootGrid">
<EasingDoubleKeyFrame KeyTime="0" Value="-30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="contentLabel">
<EasingDoubleKeyFrame KeyTime="0" Value="30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Label x:Name="contentLabel" Foreground="#FFDA1D1D" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" RenderTransformOrigin="0.5,0.525" >
<Label.RenderTransform>
<TransformGroup>
<RotateTransform/>
</TransformGroup>
</Label.RenderTransform>
</Label>
<Path Stroke="Gray" StrokeThickness="5">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="35 10" >
<ArcSegment Point="65 10" Size="45 45" RotationAngle="0" IsLargeArc="True" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Line X1="2.5" X2="2.5" Y1="0" Y2="20" StrokeThickness="5" Stroke="Gray" HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
The animation works as expected. It's Blend that doesn't show it. Anyway, the reason is still unknown.
I have an image of a fish in a WPF project (VB.net code behind), and I'm attempting to animate it swimming back and forth using two transforms.
For some reason, while if I only animate the ScaleTransform (with ScaleTransform alone, and no TransformGroup), the animation works fine, the TranslateTransform animation does not. Additionally, the ScaleTransform does not work when inside the TransformGroup.
Here is the code I'm using. What am I doing wrong?
<Image Height="90" HorizontalAlignment="Left" Name="Fish1" Stretch="Fill" VerticalAlignment="Top" Width="260" Source="/VBP-WORD4WORD;component/Images/IMG-FISH1.png" Canvas.Left="24" Canvas.Top="67" Margin="-28,70,0,0">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<TranslateTransform X="0"/>
</TransformGroup>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.TranslateTransform.X)" RepeatBehavior="Forever">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
<LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
<LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.ScaleTransform.ScaleX)" RepeatBehavior="Forever">
<LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
<LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
</Image>
Those property paths are all wrong, but i would vote for just avoiding the whole trouble of only using those paths by utilizing Storyboard.TargetName; this works:
<!-- ... -->
<TransformGroup>
<ScaleTransform x:Name="scaleTransform" ScaleX="1"/>
<TranslateTransform x:Name="translateTransform" X="0"/>
</TransformGroup>
<!-- ... -->
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="0:0:30"
Storyboard.TargetProperty="ScaleX"
Storyboard.TargetName="scaleTransform"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
<LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
<LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="0:0:30"
Storyboard.TargetProperty="X"
Storyboard.TargetName="translateTransform"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
<LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
<LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
<LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
<LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
If you really want to do it using Storyboard.TargetProperty only, these would be the correct paths as i found out just now:
Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
Storyboard.TargetProperty="RenderTransform.Children[1].X"
Which does make perfect sense if you think about it.
I want to move the images one by one like slides. i am using the following code to move one image. How to apply this animation to all the images in the image folder.
Code:
<Image Name="img" Width="50" Height="25" Grid.Row="3" HorizontalAlignment="Left" Source="btn_audio_stop.jpg">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Trans" Storyboard.TargetProperty="Y" Duration="0:0:25">
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:25" />
<!--<LinearDoubleKeyFrame Value="50" KeyTime="0:0:5" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:3" />-->
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
<Image.RenderTransform>
<TranslateTransform x:Name="Trans" X="0" Y="0" />
</Image.RenderTransform>
</Image>
See following articles
http://www.c-sharpcorner.com/UploadFile/prvn_131971/ImageSlideshowWPF11162008224421PM/ImageSlideshowWPF.aspx
http://www.c-sharpcorner.com/UploadFile/dpatra/569/