<Window x:Class="AnimateNavigateTransitions.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="AnimateNavigateTransitions" Height="300" Width="300"> <Window.Resources> <Storyboard x:Key="transitionAnimation" TargetName="transitionPlaceholder"> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" DecelerationRatio="1" Duration="0:0:0.4" /> </Storyboard> </Window.Resources> <StackPanel> <Frame Name="mainFrame" Source="Page1.xaml" /> <Canvas Name="transitionPlaceholder" IsHitTestVisible="False" /> </StackPanel> </Window> //File:Window.xaml.cs using System; using System.Collections.Generic; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; using System.Windows.Navigation; using System.Windows.Media.Animation; namespace AnimateNavigateTransitions { public partial class Window1 : System.Windows.Window { VisualBrush lastPageBrush; public Window1() { InitializeComponent(); mainFrame.Navigating += new System.Windows.Navigation.NavigatingCancelEventHandler(mainFrame_Navigating); mainFrame.Navigated += new NavigatedEventHandler(mainFrame_Navigated); } void mainFrame_Navigating(object sender, NavigatingCancelEventArgs e) { Page lastPage = mainFrame.Content as Page; if (lastPage == null){ lastPageBrush = null; return; } lastPageBrush = new VisualBrush(lastPage); lastPageBrush.Viewbox = new Rect(0, 0, lastPage.ActualWidth,lastPage.ActualHeight); lastPageBrush.ViewboxUnits = BrushMappingMode.Absolute; lastPageBrush.Stretch = Stretch.None; Point pageOffset = lastPage.TransformToVisual(this).Transform(new Point()); transitionPlaceholder.Margin = new Thickness(pageOffset.X, pageOffset.Y,0, 0); } void mainFrame_Navigated(object sender, NavigationEventArgs e) { if (lastPageBrush == null){ return ; } transitionPlaceholder.Background = lastPageBrush; lastPageBrush = null; Storyboard sb = (Storyboard) FindResource("transitionAnimation"); sb.Begin(this); } } }
Opacity Animation
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace _360Timer
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.Show();
for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation opacityAnimation = new DoubleAnimation(duration-1.0, 0.0, new Duration(TimeSpan.FromSeconds(duration))); opacityAnimation.BeginTime = TimeSpan.FromSeconds(delay); opacityAnimation.RepeatBehavior = RepeatBehavior.Forever; e.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation); } } } } [/csharp]
Width and Height animation
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace _360Timer
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
this.Show();
for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation sizeAnimation = new DoubleAnimation(0.0, 512.0, new Duration(TimeSpan.FromSeconds(duration))); sizeAnimation.RepeatBehavior = RepeatBehavior.Forever; sizeAnimation.BeginTime = TimeSpan.FromSeconds(delay); e.BeginAnimation(Ellipse.WidthProperty, sizeAnimation); e.BeginAnimation(Ellipse.HeightProperty, sizeAnimation); } } } } [/csharp]
Timer triggered Animation
<Window x:Class="WpfApplication1.PerFrameAnimation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Per Frame Animation" Height="400" Width="400"> <Canvas> <Path Fill="Blue"> <Path.Data> <EllipseGeometry x:Name="ball1" Center="30,180" RadiusX="5" RadiusY="5" /> </Path.Data> </Path> <Path Stroke="LightBlue"> <Path.Data> <EllipseGeometry Center="180,180" RadiusX="150" RadiusY="75" /> </Path.Data> </Path> </Canvas> </Window> //File:Window.xaml.cs using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace WpfApplication1 { public partial class PerFrameAnimation : Window { private TimeSpan lastRender; double time = 0; double dt = 0; public PerFrameAnimation() { lastRender = TimeSpan.FromTicks(DateTime.Now.Ticks); CompositionTarget.Rendering += StartAnimation; } private void StartAnimation(object sender, EventArgs e) { RenderingEventArgs renderArgs = (RenderingEventArgs)e; dt = (renderArgs.RenderingTime - lastRender).TotalSeconds; lastRender = renderArgs.RenderingTime; double x = 180 + 150 * Math.Cos(2 * time); double y = 180 + 75 * Math.Sin(2 * time); ball1.Center = new Point(x, y); time += dt; } } }
Path animation by code, duration, RepeatBehavior
<Window x:Class="WpfApplication1.PathAnimationExample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Path Animation" Height="500" Width="518"> <Canvas Margin="5"> <Path Stroke="LightBlue"> <Path.Data> <PathGeometry x:Name="path1" Figures="M10,10 C75,20 300,20 200,120 220,220 300,220 350, 400 325,20 220,20 200,120 175,220 75,200 50,120" /> </Path.Data> </Path> <Path Stroke="DarkGoldenrod"> <Path.Fill> <RadialGradientBrush> <GradientStop Color="Gold" Offset="0" /> <GradientStop Color="DarkGoldenrod" Offset="1" /> </RadialGradientBrush> </Path.Fill> <Path.Data> <EllipseGeometry x:Name="circle1" Center="50,120" RadiusX="10" RadiusY="10" /> </Path.Data> </Path> </Canvas> </Window> //File:Window.xaml.cs using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace WpfApplication1 { public partial class PathAnimationExample : Window { public PathAnimationExample() { InitializeComponent(); path1.Freeze(); // For performance benefits. PointAnimationUsingPath pa = new PointAnimationUsingPath(); pa.PathGeometry = path1; pa.Duration = TimeSpan.FromSeconds(5); pa.RepeatBehavior = RepeatBehavior.Forever; circle1.BeginAnimation(EllipseGeometry.CenterProperty, pa); } } }
Rolling Ball Animation
<Window x:Class="WpfApplication1.RollingBall" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Rolling Balls" Height="350" Width="518"> <Border BorderBrush="Gray" BorderThickness="1" Margin="4"> <Canvas> <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="60" /> <Ellipse x:Name="ellipse1" Width="50" Height="50" Stroke="Blue" Canvas.Top="10" Canvas.Left="0"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Blue" Offset="0.2" /> <GradientStop Color="LightBlue" Offset="0.8" /> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <RotateTransform x:Name="ellipse1Rotate" CenterX="25" CenterY="25" /> </Ellipse.RenderTransform> </Ellipse> <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="130" /> <Ellipse x:Name="ellipse2" Width="50" Height="50" Stroke="Red" Canvas.Top="80" Canvas.Left="0"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Red" Offset="0.8" /> <GradientStop Color="LightSalmon" Offset="0.2" /> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <RotateTransform x:Name="ellipse2Rotate" CenterX="25" CenterY="25" /> </Ellipse.RenderTransform> </Ellipse> <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="200" /> <Ellipse x:Name="ellipse3" Width="50" Height="50" Stroke="Green" Canvas.Top="150" Canvas.Left="0"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Green" Offset="0.5" /> <GradientStop Color="LightGreen" Offset="0.5" /> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <RotateTransform x:Name="ellipse3Rotate" CenterX="25" CenterY="25" /> </Ellipse.RenderTransform> </Ellipse> <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="270" /> <Ellipse x:Name="ellipse4" Width="50" Height="50" Stroke="Purple" Canvas.Top="220" Canvas.Left="0"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Purple" Offset="0.5" /> <GradientStop Color="LightPink" Offset="0.2" /> </LinearGradientBrush> </Ellipse.Fill> <Ellipse.RenderTransform> <RotateTransform x:Name="ellipse4Rotate" CenterX="25" CenterY="25" /> </Ellipse.RenderTransform> </Ellipse> </Canvas> </Border> </Window> //File:Window.xaml.cs using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace WpfApplication1 { public partial class RollingBall : Window { public RollingBall() { InitializeComponent(); double nRotation = 2; DoubleAnimation da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(5)); da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse1.BeginAnimation(Canvas.LeftProperty, da); da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15)); da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse1Rotate.BeginAnimation(RotateTransform.AngleProperty, da); da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(15)); da.AccelerationRatio = 0.4; da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse2.BeginAnimation(Canvas.LeftProperty, da); da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15)); da.AccelerationRatio = 0.4; da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse2Rotate.BeginAnimation(RotateTransform.AngleProperty, da); da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(5)); da.DecelerationRatio = 0.6; da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse3.BeginAnimation(Canvas.LeftProperty, da); da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15)); da.DecelerationRatio = 0.6; da.RepeatBehavior = RepeatBehavior.Forever; da.AutoReverse = true; ellipse3Rotate.BeginAnimation(RotateTransform.AngleProperty, da); } } }
Show a Continuous Animation During an Asynchronous Process
//File:Window.xaml.cs
using System.Windows;
using System.Threading;
using System.ComponentModel;
using System.Windows.Media.Animation;
namespace WpfApplication1
{
public partial class Window1 : Window
{
private Storyboard pulseStoryboard;
private BackgroundWorker worker;
public Window1()
{
InitializeComponent();
pulseStoryboard = (Storyboard) this.Resources[“PulseStoryboard”];
pulseStoryboard.RepeatBehavior = RepeatBehavior.Forever;
worker = new BackgroundWorker();
worker.DoWork += new DoWorkEventHandler(worker_DoWork);
worker.RunWorkerCompleted += new RunWorkerCompletedEventHandler(worker_RunWorkerCompleted);
}
private void button_Click(object sender, RoutedEventArgs e)
{
pulseStoryboard.Begin(this, true);
worker.RunWorkerAsync();
button.IsEnabled = false;
}
private void worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
button.IsEnabled = true;
pulseStoryboard.Stop(this);
}
private void worker_DoWork(object sender, DoWorkEventArgs e)
{
for(int i = 1; i <= 50; i++)
{
Thread.Sleep(100);
}
}
}
}
[/csharp]