Style With Resource

image_pdfimage_print


   
    

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel.Resources>
        <Style x:Key="normal">
            <Style.Resources>
                <LinearGradientBrush x:Key="gradbrush" StartPoint="1,0" EndPoint="1,1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Color="LightBlue" Offset="0" />
                        <GradientStop Color="Aquamarine" Offset="1" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Style.Resources>
            <Setter Property="Control.FontSize" Value="24" />
            <Setter Property="Control.HorizontalAlignment" Value="Center" />
            <Setter Property="Control.Margin" Value="24" />
            <Setter Property="Control.Background" Value="{StaticResource gradbrush}" />
        </Style>
    </StackPanel.Resources>

    <Button Style="{StaticResource normal}">
        Button Number 1
    </Button>
</StackPanel>

   
    
    
    
     


Animation ProgressBar.

image_pdfimage_print


   
  

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ProgBar.Window1"
    Title ="ProgressBar"
    Width="500">

  <StackPanel>
    <Button Content="One" Click="MakeOne"/>
    <StatusBar Name="sbar" Grid.Column="0" Grid.Row="5" VerticalAlignment="Bottom" Background="Beige" >
      <StatusBarItem>
        <TextBlock>StatusBar</TextBlock>
      </StatusBarItem>
    </StatusBar>
  </StackPanel>
</Window>
//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;



namespace ProgBar
{

    public partial class Window1 : Window
    {
        
        private void MakeOne(object sender, RoutedEventArgs e)
        {
           sbar.Items.Clear();
           Label lbl = new Label();
           lbl.Background = new LinearGradientBrush(Colors.Pink, Colors.Red, 90);
           lbl.Content = "ProgressBar with three iterations.";
           sbar.Items.Add(lbl);
           ProgressBar progbar = new ProgressBar();
           progbar.Background = Brushes.Gray;
           progbar.Foreground = Brushes.Red;
           progbar.Width = 150;
           progbar.Height = 15;
           Duration duration = new Duration(TimeSpan.FromMilliseconds(2000));
           DoubleAnimation doubleanimation = new DoubleAnimation(100.0, duration);
           doubleanimation.RepeatBehavior = new RepeatBehavior(3);
           progbar.BeginAnimation(ProgressBar.ValueProperty, doubleanimation);
           sbar.Items.Add(progbar);
        } 

     }
}

   
    
     


EventTrigger RoutedEvent=Image.Loaded

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">
      <Image Source="c:image.jpg" Width="200" Height="150" HorizontalAlignment="Left">
        <Image.Clip>
          <EllipseGeometry x:Name="MyEllipseGeometry2"
            RadiusX="100"
            RadiusY="75"
            Center="100,75"/>
        </Image.Clip>
        <Image.Triggers>
          <EventTrigger RoutedEvent="Image.Loaded">
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="MyEllipseGeometry2" 
                  Storyboard.TargetProperty="(EllipseGeometry.RadiusX)"
                  From="0" To="150" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True" />
                <DoubleAnimation 
                  Storyboard.TargetName="MyEllipseGeometry2" 
                  Storyboard.TargetProperty="(EllipseGeometry.RadiusY)" 
                  From="0" To="150" Duration="0:0:3" RepeatBehavior="Forever" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Image.Triggers>        
       </Image>
</Window>

   
    
    
     


Controlling The Storyboard

image_pdfimage_print


   
      
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel>
        <Canvas Width="350" Height="200">
            <Rectangle Canvas.Left="150" Canvas.Top="50" Fill="Aqua" Width="50" Height="150">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <RotateTransform x:Name="xform1" Angle="-90" CenterX="0" CenterY="150" />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
        </Canvas>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Name="btnBegin" Content="Begin" />
            <Button Name="btnPause" Content="Pause" />
            <Button Name="btnResume" Content="Resume" />
            <Button Name="btnStop" Content="Stop" />
            <Button Name="btnSkip" Content="Skip to End" />
            <Button Name="btnCenter" Content="Skip to Center" />
        </StackPanel>

        <StackPanel.Triggers>
            <EventTrigger SourceName="btnBegin" RoutedEvent="Button.Click">
                <BeginStoryboard Name="storybrd">
                    <Storyboard >
                        <DoubleAnimation 
                            Storyboard.TargetName="xform1"
                            Storyboard.TargetProperty="Angle"
                            From="-90" To="0" Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger SourceName="btnPause" RoutedEvent="Button.Click">
                <PauseStoryboard BeginStoryboardName="storybrd" />
            </EventTrigger>

            <EventTrigger SourceName="btnResume" RoutedEvent="Button.Click">
                <ResumeStoryboard BeginStoryboardName="storybrd" />
            </EventTrigger>

            <EventTrigger SourceName="btnStop" RoutedEvent="Button.Click">
                <StopStoryboard BeginStoryboardName="storybrd" />
            </EventTrigger>

            <EventTrigger SourceName="btnSkip" RoutedEvent="Button.Click">
                <SkipStoryboardToFill BeginStoryboardName="storybrd" />
            </EventTrigger>

            <EventTrigger SourceName="btnCenter" RoutedEvent="Button.Click">
                <SeekStoryboard BeginStoryboardName="storybrd"
                                Offset="0:0:5" />
            </EventTrigger>

        </StackPanel.Triggers>
    </StackPanel>
</Page>

   
    
    
    
    
    
     


Trigger Animation by Mouse in out action

image_pdfimage_print


   
       

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

   
    
    
    
    
    
    
     


Remove Animations with Storyboard

image_pdfimage_print


   
 

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

   
     


Create an interactive animation using XAML and the Storyboard

image_pdfimage_print


   
 

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