Month: February 2011

Animate the brush's RadiusX property.

Posted on by coder
image_pdfimage_print


   
     
<Window x:Class="InteractiveStoryboard"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Interactive Storyboard" Height="300" Width="300">
    <StackPanel Margin="10">
        <Ellipse Name="ellipse" Width="150" Height="150">
            <Ellipse.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="LightCoral" Offset="0.1" />
                    <GradientStop Color="Gold" Offset="0.9" />
                    <GradientStop Color="Purple" Offset="1" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
            <Button Name="btnBegin">Begin</Button>
            <Button Name="btnPause">Pause</Button>
            <Button Name="btnResume">Resume</Button>
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Name="btnSkipToFill">Skip To Fill</Button>
            <Button Name="btnStop">Stop</Button>
        </StackPanel>
        <StackPanel.Triggers>
            <EventTrigger RoutedEvent="Button.Click"
        SourceName="btnBegin">
                <EventTrigger.Actions>
                    <BeginStoryboard Name="MyBeginStoryboard">
                        <Storyboard>

                            <DoubleAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="Fill.RadiusX" From="0" To="1"
                Duration="0:0:2" RepeatBehavior="5x" />


                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">
                <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">
                <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnSkipToFill">
                <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">
                <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
            </EventTrigger>
        </StackPanel.Triggers>
    </StackPanel>
</Window>

Animate Fill.RadiusY

Posted on by coder
image_pdfimage_print


   
     
<Window x:Class="InteractiveStoryboard"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Interactive Storyboard" Height="300" Width="300">
  <StackPanel Margin="10">
    <Ellipse Name="ellipse" Width="150" Height="150">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="White" Offset="0" />
          <GradientStop Color="LightCoral" Offset="0.1" />
          <GradientStop Color="Gold" Offset="0.9" />
          <GradientStop Color="Purple" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
      <Button Name="btnBegin">Begin</Button>
      <Button Name="btnPause">Pause</Button>
      <Button Name="btnResume">Resume</Button>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
      <Button Name="btnSkipToFill">Skip To Fill</Button>
      <Button Name="btnStop">Stop</Button>
    </StackPanel>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click"
        SourceName="btnBegin">
        <EventTrigger.Actions>
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>
            
              <DoubleAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="Fill.RadiusY" From="0" To="1"
                Duration="0:0:2" RepeatBehavior="5x" />


            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnSkipToFill">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

Animate GradientStop and Button control

Posted on by coder
image_pdfimage_print


   
     
<Window x:Class="InteractiveStoryboard"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Interactive Storyboard" Height="300" Width="300">
  <StackPanel Margin="10">
    <Ellipse Name="ellipse" Width="150" Height="150">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="White" Offset="0" />
          <GradientStop Color="LightCoral" Offset="0.1" />
          <GradientStop Color="Gold" Offset="0.9" />
          <GradientStop Color="Purple" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20,0,0">
      <Button Name="btnBegin">Begin</Button>
      <Button Name="btnPause">Pause</Button>
      <Button Name="btnResume">Resume</Button>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
      <Button Name="btnSkipToFill">Skip To Fill</Button>
      <Button Name="btnStop">Stop</Button>
    </StackPanel>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click"
        SourceName="btnBegin">
        <EventTrigger.Actions>
          <BeginStoryboard Name="MyBeginStoryboard">
            <Storyboard>
            
              <ColorAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="Fill.GradientStops&#91;2&#93;.Color"
                To="Black" Duration="0:0:2" RepeatBehavior="5x" />


            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnPause">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnResume">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnSkipToFill">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="btnStop">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>

Animate EndPoint

Posted on by coder
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">
  <Grid>
    <Path Stroke="Black" StrokeThickness="1">
      <Path.Data>
        <GeometryGroup>
          <LineGeometry x:Name="line1" StartPoint="20,20" EndPoint="264,20" />
        </GeometryGroup>
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
              <PointAnimation To="40,20" 
                              Storyboard.TargetName="line1" 
                              Storyboard.TargetProperty="EndPoint" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Grid>
</Window>

Animate StartPoint

Posted on by coder
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">
  <Grid>
    <Path Stroke="Black" StrokeThickness="1">
      <Path.Data>
        <GeometryGroup>
          <LineGeometry x:Name="line2" StartPoint="38,40" EndPoint="248,40" />
        </GeometryGroup>
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
              <PointAnimation To="280,40" Storyboard.TargetName="line2" Storyboard.TargetProperty="StartPoint" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Grid>
</Window>

Animate Ellipse RadiusY, RadiusX

Posted on by coder
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">
  <Grid>
    <Path Stroke="Black" StrokeThickness="1">
      <Path.Data>
        <GeometryGroup>
          <EllipseGeometry x:Name="ellipse" Center="150,150" RadiusX="5" RadiusY="5" />
        </GeometryGroup>
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
              <ParallelTimeline Storyboard.TargetName="ellipse">
                <DoubleAnimation To="80" Storyboard.TargetProperty="RadiusX" />
                <DoubleAnimation To="80" Storyboard.TargetProperty="RadiusY" />
              </ParallelTimeline>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>
  </Grid>
</Window>

XAML Only Animation

Posted on by coder
image_pdfimage_print



     


<Window x:Class="XamlOnly"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    
xmlns:x=
"http://schemas.microsoft.com/winfx/2006/xaml" 
Title=
"XamlOnly"

    Height="300" Width="300">

    <Grid>

      <StackPanel>

            <TextBlock Name="textBlock" Margin="5"

                TextAlignment="Center" Height="30"

                Text="{Binding ElementName=textBox,Path=Text}" />

            <TextBox Name="textBox" Margin="5" Width="200"

                TextAlignment="Center" Text="Hello, WPF!" />

            <Button Margin="5" Width="200"

                Content="Change Text Color">

                <Button.Triggers>

                    <EventTrigger RoutedEvent="Button.Click">

                        <BeginStoryboard>

                            <Storyboard>

                                <ColorAnimation

                                    Storyboard.TargetName="textBlock"
                                    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                    From="Black" To="Red" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </StackPanel>
   </Grid>
</Window>