Month: February 2011

Create animations using the Storyboard in code

Posted on by coder
image_pdfimage_print


   
 

<Window x:Class="WpfApplication1.StoryboardInCode"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Storyboard Animation in Code" Height="300" Width="300">
  <Canvas>
    <Button Content="Button1" Width="150" Height="80"
      Canvas.Left="50" Canvas.Top="20">
      <Button.Background>
        <SolidColorBrush x:Name="brush1" />
      </Button.Background>
    </Button>
    <Button Content="Button2" Width="150" Height="80"
      Canvas.Left="50" Canvas.Top="110">
      <Button.Background>
        <SolidColorBrush x:Name="brush2" />
      </Button.Background>
    </Button>
  </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.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class StoryboardInCode : Window
    {
        public StoryboardInCode()
        {
            InitializeComponent();

            Storyboard sb = new Storyboard();

            ColorAnimation ca1 = new ColorAnimation(Colors.Blue, Colors.Yellow,new Duration(new TimeSpan(0, 0, 10)));

            ca1.RepeatBehavior = RepeatBehavior.Forever;
            ca1.AutoReverse = true;
            Storyboard.SetTargetName(ca1, "brush1");
            Storyboard.SetTargetProperty(ca1,new PropertyPath(SolidColorBrush.ColorProperty));


            ColorAnimation ca2 = new ColorAnimation(Colors.Red, Colors.Green,new Duration(new TimeSpan(0, 0, 10)));

            ca2.RepeatBehavior = RepeatBehavior.Forever;

            ca2.AutoReverse = true;
            ca2.BeginTime = new TimeSpan(0, 0, 5);
            Storyboard.SetTargetName(ca2, "brush2");
            Storyboard.SetTargetProperty(ca2,new PropertyPath(SolidColorBrush.ColorProperty));

            sb.Children.Add(ca1);
            sb.Children.Add(ca2);
            sb.Begin(this);
        }
    }
}

Get resource in code as Storyboard

Posted on by coder
image_pdfimage_print


   
 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.Window1"
    Title="Color Spinner" Height="370" Width="270" >
    <Window.Resources>
        <Storyboard x:Key="Spin">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)&#91;0&#93;.(RotateTransform.Angle)" RepeatBehavior="Forever">
                <SplineDoubleKeyFrame KeyTime="00:00:10" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Spin}" x:Name="Spin_BeginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="goButton">
            <ResumeStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="stopButton">
            <PauseStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
        </EventTrigger>
    </Window.Triggers>
    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFFFC45A" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>
    <Grid>
        <StackPanel>
            <Ellipse Margin="15,85,0,0" Name="ellipse1" Stroke="{x:Null}" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Fill="Red" Opacity="0.5" RenderTransformOrigin="0.92,0.5" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Button Name="goButton" Content="Go"/>
        <Button Name="stopButton" Content="Stop"/>
        <Button Name="toggleButton" Content="Toggle" Click="toggleButton_Click" />
       </StackPanel>

    </Grid>
</Window>


//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void toggleButton_Click(object sender, RoutedEventArgs e)
        {
            Storyboard spinStoryboard = Resources["Spin"] as Storyboard;
            if (spinStoryboard != null)
            {
                if (spinStoryboard.GetIsPaused(this))
                {
                    spinStoryboard.Resume(this);
                }
                else
                {
                    spinStoryboard.Pause(this);
                }
            }
        }
    }
}

Stop, resume animation with Storyboard

Posted on by coder
image_pdfimage_print


   
 

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="WpfApplication1.Window1"
    Title="Color Spinner" Height="370" Width="270" >
    <Window.Resources>
        <Storyboard x:Key="Spin">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)&#91;0&#93;.(RotateTransform.Angle)" RepeatBehavior="Forever">
                <SplineDoubleKeyFrame KeyTime="00:00:10" Value="360"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource Spin}" x:Name="Spin_BeginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="goButton">
            <ResumeStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="stopButton">
            <PauseStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
        </EventTrigger>
    </Window.Triggers>
    <Window.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFFFF" Offset="0"/>
            <GradientStop Color="#FFFFC45A" Offset="1"/>
        </LinearGradientBrush>
    </Window.Background>
    <Grid>
        <StackPanel>
            <Ellipse Margin="15,85,0,0" Name="ellipse1" Stroke="{x:Null}" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Fill="Red" Opacity="0.5" RenderTransformOrigin="0.92,0.5" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Button Name="goButton" Content="Go"/>
        <Button Name="stopButton" Content="Stop"/>
        <Button Name="toggleButton" Content="Toggle" Click="toggleButton_Click" />
       </StackPanel>

    </Grid>
</Window>


//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
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.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void toggleButton_Click(object sender, RoutedEventArgs e)
        {
            Storyboard spinStoryboard = Resources["Spin"] as Storyboard;
            if (spinStoryboard != null)
            {
                if (spinStoryboard.GetIsPaused(this))
                {
                    spinStoryboard.Resume(this);
                }
                else
                {
                    spinStoryboard.Pause(this);
                }
            }
        }
    }
}

StrokeDashArray 4,2 / StrokeDashOffset: 0

Posted on by coder
image_pdfimage_print


   
   

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Rectangle Grid.Row="3" Grid.Column="0" Width="150" Height="150"
               StrokeDashArray="4 2" StrokeDashOffset="0"
               Stroke="Black" StrokeThickness="3" Fill="Blue">
    </Rectangle>


</Window>

StrokeDashArray>: 4,2 /StrokeDashOffset: 1

Posted on by coder
image_pdfimage_print
: 4,2 /StrokeDashOffset: 1" src="http://international.us.server12.fileserver.kutayzorlu.com/files/download/2011/05/WPF-StrokeDashArray42StrokeDashOffset1.PNG">

   
   
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Rectangle Grid.Row="3" Grid.Column="1" Width="150" Height="150"
               StrokeDashArray="4 2" StrokeDashOffset="1"
               Stroke="Black" StrokeThickness="3" Fill="Blue">
    </Rectangle>


</Window>

StrokeDashArray: 4,2 /StrokeDashOffset: 2

Posted on by coder
image_pdfimage_print


   
   

<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Rectangle Grid.Row="3" Grid.Column="2" Width="150" Height="150"
               StrokeDashArray="4 2" StrokeDashOffset="2"
               Stroke="Black" StrokeThickness="3" Fill="Blue">
    </Rectangle>

</Window>

StrokeDashArray: 4,1,4,3 /StrokeDashOffset: 1

Posted on by coder
image_pdfimage_print


   
   
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Ellipse Grid.Row="6" Grid.Column="0" Width="150" Height="150"
               StrokeDashArray="4 1 4 3" StrokeDashOffset="1"
               Stroke="Black" StrokeThickness="3" Fill="Blue">
    </Ellipse>

</Window>