I have a control template for a button that looks like this:
<ControlTemplate x:Key="CopyButton" TargetType="{x:Type Button}">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text=">>>>"/>
</ControlTemplate>
How could I go about animating this so that when the mouse is hovering over the button the > arrows "move". I mean so that the text is something like "> ", ">> ", ">>> ", ">>>>", " >>>", " >>", " >" in a repeat.
You can use a string animation. The result is however not the most professional looking in my opinion.
<Button
Name="myAnimatedButton"
Width="200"
Content=">">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseEnter">
<BeginStoryboard>
<Storyboard>
<StringAnimationUsingKeyFrames
Storyboard.TargetName="myAnimatedButton"
Storyboard.TargetProperty="(Button.Content)"
AutoReverse="True">
<DiscreteStringKeyFrame Value=">" KeyTime="0:0:0" />
<DiscreteStringKeyFrame Value=">>" KeyTime="0:0:1" />
<DiscreteStringKeyFrame Value=">>>" KeyTime="0:0:2" />
<DiscreteStringKeyFrame Value=">>>>" KeyTime="0:0:3" />
<DiscreteStringKeyFrame Value=" >>>" KeyTime="0:0:4" />
<DiscreteStringKeyFrame Value=" >>" KeyTime="0:0:5" />
<DiscreteStringKeyFrame Value=" >" KeyTime="0:0:6" />
</StringAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Related
I'm animating text in StatusBarItem (from right to left and then Opacity two times).
When this animation finishes It would like to show a button which is in a different StatusBarItem and is set to Visibility.Hidden by default.
How can I do this in XAML?
My XAML - error is "A storyboard tree in a Style cannot specify a TargetName":
<StatusBarItem x:Name="Stat_info" DockPanel.Dock="Right" FontStyle="Italic" Height="23" Foreground="#FFB41414" FontWeight="Bold" Visibility="Hidden">
<StatusBarItem.Style>
<Style TargetType="{x:Type StatusBarItem}">
<Style.Resources>
<Storyboard x:Key="flashAnimate">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
<!--This is a button that should be set to visible-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Btn_info" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:5.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimate}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</StatusBarItem.Style>
</StatusBarItem>
EDIT:
I've tried provided answer from link, but I can't get It to work. I tried with & without TargetName and just for first animation. Result is no error & no animation :
<Window.Resources>
<ControlTemplate x:Key="StatusBarItemControlTemplate1" TargetType="{x:Type StatusBarItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="myAnimation" Storyboard.TargetName="Stat_info">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Stat_info" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="beginAnimation" Storyboard="{StaticResource myAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="beginAnimation" />
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
<!-- Content to be animated goes here -->
</ControlTemplate>
</Window.Resources>
<StatusBarItem x:Name="Stat_info" Visibility="Hidden" Template="{StaticResource StatusBarItemControlTemplate1}" >
i have a textblock that displays second from 60 to 1 and it's foreground animate from green to red:
my xaml is like bellow and work fine:
<TextBlock x:Name="timer_check_version" Text="60" HorizontalAlignment="Center" FontSize="18">
<TextBlock.Foreground>
<SolidColorBrush x:Name="tbBrush" Color="#1e7145"/>
</TextBlock.Foreground>
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ChronometerStoryboard}"/>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
and my ChronometerStoryboard is:
<Storyboard x:Key="ChronometerStoryboard">
<ColorAnimation To="#b91d47" From="#1e7145"
Duration="0:0:59"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"/>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="59"/>
<DiscreteStringKeyFrame KeyTime="0:0:2" Value="58"/>
<DiscreteStringKeyFrame KeyTime="0:0:3" Value="57"/>
<DiscreteStringKeyFrame KeyTime="0:0:4" Value="56"/>
<DiscreteStringKeyFrame KeyTime="0:0:5" Value="55"/>
<DiscreteStringKeyFrame KeyTime="0:0:6" Value="54"/>
<DiscreteStringKeyFrame KeyTime="0:0:7" Value="53"/>
<DiscreteStringKeyFrame KeyTime="0:0:8" Value="52"/>
<DiscreteStringKeyFrame KeyTime="0:0:9" Value="51"/>
<DiscreteStringKeyFrame KeyTime="0:0:10" Value="50"/>
......
......
......
......
<DiscreteStringKeyFrame KeyTime="0:0:51" Value="09"/>
<DiscreteStringKeyFrame KeyTime="0:0:52" Value="08"/>
<DiscreteStringKeyFrame KeyTime="0:0:53" Value="07"/>
<DiscreteStringKeyFrame KeyTime="0:0:54" Value="06"/>
<DiscreteStringKeyFrame KeyTime="0:0:55" Value="05"/>
<DiscreteStringKeyFrame KeyTime="0:0:56" Value="04"/>
<DiscreteStringKeyFrame KeyTime="0:0:57" Value="03"/>
<DiscreteStringKeyFrame KeyTime="0:0:58" Value="02"/>
<DiscreteStringKeyFrame KeyTime="0:0:59" Value="01"/>
</StringAnimationUsingKeyFrames>
</Storyboard>
the goal of above sample is to display a message to users for 60 seconds with TextBlock that counting down from 60 to 1,after 60 seconds the message and timer should be invisible and after some times according to background Threads the display of message and timer(TextBlock that counting down from 60 to 1) should be repeat,this may repeat for some times, all things work fine for first,but first the timer comes to 1,my message and timer collapsed for some minute(according to background threads) and when background threads completed i want to repeat the display of message and timer for 60 second again,but my problem is the timer value equals to 1 and timer Foreground equals to Red and no animated.
Apply AutoReverse and RepeatBeahvior attributes.
AutoReverse will make your storyboard goes exact reverse making your text color changing from Red to Green, and RepeatBehavior will make this to and fro color change continuing forever.
You can choose various RepeatBehavior settings according to your need.
<Storyboard x:Key="ChronometerStoryboard" AutoReverse="True" RepeatBehavior="Forever">
In reply to your comment :
"the visible and invisible of textblock may repeate forever and to time of invisible is random and after each visible it must start from 59 to 1 and it's foreground must start from green to red"
Use a Behavior called ControlStoryBoardAction which is present in Blend. And use it to play your storyboard.
Complete sample code might look like :
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="S32494473W.Chronometer"
x:Name="UserControl"
d:DesignWidth="632" d:DesignHeight="392">
<UserControl.Resources>
<Storyboard x:Key="ChronometerStoryboard">
<ColorAnimation To="#b91d47" From="#1e7145"
Duration="0:0:10"
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="timer_check_version"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Visibility)" Storyboard.TargetName="timer_check_version">
<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="timer_check_version">
<DiscreteStringKeyFrame KeyTime="0:0:1" Value="10"/>
<DiscreteStringKeyFrame KeyTime="0:0:2" Value="9"/>
<DiscreteStringKeyFrame KeyTime="0:0:3" Value="8"/>
<DiscreteStringKeyFrame KeyTime="0:0:4" Value="7"/>
<DiscreteStringKeyFrame KeyTime="0:0:5" Value="6"/>
<DiscreteStringKeyFrame KeyTime="0:0:6" Value="5"/>
<DiscreteStringKeyFrame KeyTime="0:0:7" Value="4"/>
<DiscreteStringKeyFrame KeyTime="0:0:8" Value="3"/>
<DiscreteStringKeyFrame KeyTime="0:0:9" Value="2"/>
<DiscreteStringKeyFrame KeyTime="0:0:10" Value="1"/>
</StringAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Visibility)" Storyboard.TargetName="timer_check_version">
<DiscreteObjectKeyFrame KeyTime="0:0:10" Value="{x:Static Visibility.Hidden}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Content="Chronometer" Height="32" Margin="272,8,272,0" VerticalAlignment="Top" Click="Button_Click">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ControlStoryboardAction Storyboard="{StaticResource ChronometerStoryboard}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<TextBlock x:Name="timer_check_version" Width="100" Background="AliceBlue" Text="10" Visibility="Hidden" HorizontalAlignment="Center" FontSize="18" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="tbBrush" Color="#1e7145"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</UserControl>
i change my trigger to :
<Trigger Property="IsEnabled" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ChronometerStoryboard}" Name="st1"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="st1"/>
</Trigger.ExitActions>
</Trigger>
and bind TextBlock.IsEnabled to it's Parent.Visibility and solved my problem.
I have a set of Ellipses on my Canvas.
For the MouseEnter event on each of the ellipses, I would like to resize the element so as to give a magnifying look and feel.
To make it more attractive, I want to make the change gradual (smooth/animated feeling). Any hints are appreciated.
Try something like this:
<Style x:Key="ScaleStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.2" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation To="1.2" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1.0" Duration="0:0:0.1"
Storyboard.TargetProperty="RenderTransform.ScaleX" />
<DoubleAnimation To="1.0" Duration="0:0:0.1"
Storyboard.TargetProperty="RenderTransform.ScaleY" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Canvas>
<Ellipse Style="{StaticResource ScaleStyle}" Canvas.Left="100" Canvas.Top="100"
Width="200" Height="100" Stroke="Black" StrokeThickness="2" Fill="Transparent" />
</Canvas>
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.
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/