Develop Reference

WPF c# XAML ismouseover animation

In my project when program starts polygon is moving on set path
What should I change to stop polygon moving, when the mouse cursor on it (when mouse cursor out of polygon, polygon must continue it's moving)
<Window x:Class="aqua3.MainWindow"
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:local="clr-namespace:aqua3"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<PathGeometry x:Key="pathg">
<PathFigure IsClosed="True">
<PolyLineSegment Points="0,0 200,0 200,80 0,80" />
</PathFigure>
</PathGeometry>
</Window.Resources>
<Grid Background="LightBlue">
<Canvas Margin="10" Background="LightBlue">
<Path Stroke="Red" Data="{StaticResource pathg}" Canvas.Top="10" Canvas.Left="10" />
<Polygon Name="polygon1" Stroke="Yellow" Fill="Yellow" Points="100,150 120,140 120,120 165,150 120,180 120,160 ">
<Polygon.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="Y" >
</DoubleAnimationUsingPath>
<DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:15" RepeatBehavior="Forever"
PathGeometry="{StaticResource pathg}" Source="X" >
</DoubleAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Polygon.Triggers>
</Polygon>
</Canvas>
</Grid>

Assign a name to your BeginStoryboard
<BeginStoryboard x:Name="Move">
To pause, add this
<EventTrigger RoutedEvent="MouseEnter">
<PauseStoryboard BeginStoryboardName="Move"/>
</EventTrigger>
To resume, add this
<EventTrigger RoutedEvent="MouseLeave">
<ResumeStoryboard BeginStoryboardName="Move"/>
</EventTrigger>

How to make button and background flash in wpf

Issue
The issue I am having is when a user clicks a button I want the button to start flashing from 100% visible to around 20% visible and the background of the WPF window to change colors from #ffffff to #d6786a and this should happen untill the button is clicked again. Then the animations should stop.
Code
I have done a bit of diging around to find where somone has done this and I can't seem to see anything. The code i have at the moment is as follows.
Here is the button I want to flash from 100% visible to 20% visible when clicked:
<Button Name="button2" Style="{DynamicResource NoChromeButton}" Visibility="{Binding VisableState, Converter={StaticResource BoolToVis}}" ToolTip="Start Live Stream" Command="{Binding PlayStream}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="5" Height="22" Width="22" >
<Image Source="../Images/recordicon.png"/>
</Button>
I have tried to add a storyboard into the button and it just didn't work:
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="00:00:00"
RepeatBehavior="Forever"
Storyboard.TargetName="button2"
Storyboard.TargetProperty="(Visibility)">
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
I am new to WPF so going into animation is more difficult for me. If anyone could give me a little help on this stage it would be great.

Define animations in resources for example like this
<Window x:Name="window" x:Class="WpfApplication1.MainWindow"
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:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="FlashButton" RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="button">
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.2"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ChangeColor2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<EasingColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="grid" Background="White">
<Button x:Name="button" Content="Button" Margin="10,10,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Click="button_Click"/>
</Grid>
and create handler for button click
private bool isRunning;
private void button_Click(object sender, RoutedEventArgs e)
{
var flashButton = FindResource("FlashButton") as Storyboard;
var changeColor = FindResource("ChangeColor") as Storyboard;
var changeColor2 = FindResource("ChangeColor2") as Storyboard;
if (isRunning)
{
flashButton.Stop();
changeColor2.Begin();
isRunning = false;
}
else
{
flashButton.Begin();
changeColor.Begin();
isRunning = true;
}
}

To change "visibility to around 20%" you have to animate Opacity property (double type from 0.0 to 1.0) not Visibility (enum with 3 values, see msdn).
The goal can be easily achieved if you can use ToggleButton (because of its nice Checked and Unckecked routed events):
<ToggleButton>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard x:Name="storyboard">
<Storyboard RepeatBehavior="Forever"
AutoReverse="True">
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.2"
Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<StopStoryboard BeginStoryboardName="storyboard" />
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>

WPF Re-using \ Replacing an Image; animation

YO,
I have a long image (125x8000 pixls) that i am translating downwards, once it reaches a certain point, i want to use the same image and place it directly on top of the translating image, so it appears to be a continuous stream, perpetually coming downward. so like halfway through its translation, i add a copy of the image at the top of the first image. and repeat.
OR if i could somehow use ONE image and cycle it, as if it were circular, or a wheel. This is a slot machine. I won't give the code behind because its top secret(not really) but this is my xaml so far:
<Window x:Class="WpfApplication3.MainWindow"
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:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="422.846" Width="581.652">
<Window.Resources>
<x:ArrayExtension Type="sys:Int32" x:Key="arr">
<sys:Int32>2100</sys:Int32>
<sys:Int32>3000</sys:Int32>
<sys:Int32>4200</sys:Int32>
<sys:Int32>6000</sys:Int32>
<sys:Int32>6800</sys:Int32>
<sys:Int32>1500</sys:Int32>
<sys:Int32>500</sys:Int32>
<sys:Int32>8000</sys:Int32>
</x:ArrayExtension>
<Storyboard x:Key="SB2">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:4"
To="2900">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="SB3">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:3"
To="2100">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="SBName">
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
Duration="0:0:6"
To="4111">
<DoubleAnimation.EasingFunction>
<SineEase EasingMode="EaseOut">
</SineEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Window.Resources>
<Grid>
<Image x:Name="im" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="76,-7705,374.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="im1" Source="E:/fruit_roll.png" Stretch="None" Width="125" Height="8210" Margin="223,-7705,227.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="im2" Source="E:/fruit_roll.png" Stretch="none" Width="125" Height="8210" UseLayoutRounding="True" SnapsToDevicePixels="True" Margin="370,-7705,80.2,-109.8">
<Image.RenderTransform>
<TranslateTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="slot" Source="E:/Slot-Machine.png" Margin="-50,-187,-63.8,-166.8"/>
<Button x:Name="button1" Content="Button" Click="button_Click_2" Margin="235,302,283.2,61.2" Background="#FFB00000" AllowDrop="True" BorderBrush="#FFFF8484" Opacity="0.15"/>
</Grid>
</Window>
Any ideas or suggestions on how to make this appear to be continuous would be great.

Something like this should work:
<Rectangle>
<Rectangle.Fill>
<ImageBrush
ImageSource="E:/fruit_roll.png" TileMode="Tile"
Viewport="0,0,125,8000" ViewportUnits="Absolute">
<ImageBrush.Transform>
<TranslateTransform/>
</ImageBrush.Transform>
</ImageBrush>
</Rectangle.Fill>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Fill.Transform.Y"
To="-8000" Duration="0:0:5"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>

Creating a 'wipe' animation in WPF

I'm looking to create an animation similar to the 'wipe' animation in Microsoft PowerPoint using WPF.
Put simply, I'd like an image to fade in from left to right over 1 second.
This is the XAML I have so far, which fades the image in all at once:
<Window x:Class="WpfApplication2.MainWindow"
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:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="fade">
<DoubleAnimation From="0" To="1" Duration="0:0:1"
Storyboard.TargetName="logo"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Source="image.png" x:Name="logo"/>
</Grid>
</Window>
In the code behind, I just play the animation when window has loaded:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
BeginStoryboard((Storyboard)FindResource("fade"));
}
What do I need to add to the Storyboard tag in order to make the image fade in similar to the wipe animation on PowerPoint?

Found the answer myself from this blog post. The code I needed to achieve the effect I needed is identical to the code in the post, but I don't need the first image. (UFO.jpg)
<Window x:Class="LearnWPF.WipeEffect.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow">
<Grid>
<!--First image not needed.-->
<!--<Image Source="Images/UFO.jpg" />-->
<Image Source="Images/ladder.jpg">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
<GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</Grid>
<Window.Triggers>
<EventTrigger RoutedEvent="Window.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<!--Duration changed to half a second as this is what I need. -->
<DoubleAnimation Storyboard.TargetName="TransparentStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5" />
<DoubleAnimation Storyboard.TargetName="BlackStop"
Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5"
BeginTime="0:0:0.05" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Window.Triggers>
</Window>

How to Zoom in and zoom out through animation

I have set of images which are placed in pivot control.i want zoom in the image to a specific point and then go back to its normal size through animation.how can i do that.Any help will be appreciated.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="img"
Storyboard.TargetProperty="Height"
From="300"
To="600"
Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>

first tip:-
avoid writing Resources into specific control. Instead define all resources into <Page.Resources>
Now, if you want to animate some control, then you have to use Scaling property of an element.
Check below code. here, I'm pointing out how to zoom the image on any event handler.
XAML code of control
<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="compositeTransform" />
</Image.RenderTransform>
</Image>
Defining Storyborad
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="5"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="5"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
On any of the event handler
story.Begin();
Hope that helps..

If I understand your problem, then you should use the Storyboard, EventTrigger and ScaleX Instead of Height for Resize image.
Storyboarded and trigger animations
Here is one option for the loaded event.
<StackPanel>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>