Windows Presentation Foundation

StrokeDashArray 4,2 / StrokeDashOffset: 0

Posted on by coder 


   
   

<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>

Stop, resume animation with Storyboard

Posted on by coder 


   
 

<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);
                }
            }
        }
    }
}

Get resource in code as Storyboard

Posted on by coder 


   
 

<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);
                }
            }
        }
    }
}

Create animations using the Storyboard in code

Posted on by coder 


   
 

<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);
        }
    }
}

Create an interactive animation using XAML and the Storyboard

Posted on by coder 


   
 

<Window x:Class="WpfApplication1.CombineTransformAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animating Combine Transforms" Height="320" Width="300">
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
      <Setter Property="Margin" Value="10" />
      <Setter Property="Width" Value="80" />
      <Setter Property="Height" Value="40" />
      <Setter Property="RenderTransform">
        <Setter.Value>
          <TransformGroup>
            <ScaleTransform />
            <SkewTransform />
            <RotateTransform />
          </TransformGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard Name="StoryboardBegin">
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleX"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleY"
                  To="1.5" Duration="0:0:1" RepeatBehavior="1x" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.AngleX"
                  To="30" Duration="0:0:1" RepeatBehavior="1x" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleX"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.ScaleY"
                  Duration="0:0:0.5" />
                <DoubleAnimation
                  Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.AngleX"
                  Duration="0:0:0.5" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Window.Resources>
  <StackPanel Margin="20" HorizontalAlignment="Center">
    <Button Click="btn1_Click" x:Name="btn1">Button1</Button>
    <Button Click="btn2_Click" x:Name="btn2">Button2</Button>
    <Button Click="btnClose_Click">Close</Button>
    <TextBlock Name="tb1" Margin="5,40,5,5" />
  </StackPanel>
</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;


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

        private void btn1_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn1.Content;
        }

        private void btn2_Click(object sender,RoutedEventArgs e)
        {
            tb1.Text = "You are clicking on " + btn2.Content;
        }


        private void btnClose_Click(object sender,RoutedEventArgs e)
        {
            this.Close();
        }
    }
}

Remove Animations with Storyboard

Posted on by coder 


   
 

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <ParallelTimeline>
        <DoubleAnimation x:Name="Animation1" Storyboard.TargetProperty="Width" From="140" To="50"
          AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <UniformGrid>
    <Button Content="Method 4" Click="Button4_Click" Loaded="Button4_Loaded" />
  </UniformGrid>
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

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

        private void Button4_Loaded(object sender, RoutedEventArgs e)
        {
            method4Storyboard = TryFindResource("Storyboard1") as Storyboard;
            method4Storyboard.Begin(sender as FrameworkElement, true);
        }
        private void Button4_Click(object sender, RoutedEventArgs e)
        {
            if (method4Storyboard != null)
            {
                method4Storyboard.Remove(sender as FrameworkElement);
            }
        }
     
    }
}

Trigger Animation by Mouse in out action

Posted on by coder 


   
       

<Window x:Class="Main"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="LowOpacity">
      <DoubleAnimation Storyboard.TargetProperty="Opacity" />
    </Storyboard>
    <Storyboard x:Key="HighOpacity">
      <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </Window.Resources>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="0.5*" />
      <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="35" />
    </Grid.RowDefinitions>

    <Border Background="Firebrick" Width="100" Height="100" x:Name="Rect1" Opacity="0.4">
      <Border.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <BeginStoryboard Storyboard="{DynamicResource HighOpacity}" />
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <BeginStoryboard Storyboard="{DynamicResource LowOpacity}" />
        </EventTrigger>
      </Border.Triggers>
    </Border>
    <Rectangle Fill="Firebrick" Width="100" Height="100" Grid.Column="1" />
  </Grid>
</Window>