Animate Fill.RadiusY : Shape Animation « Windows Presentation Foundation « C# / CSharp Tutorial






<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>
WPF Animate Fill Radius Y








24.114.Shape Animation
24.114.1.Animate EndPointAnimate EndPoint
24.114.2.Animate StartPointAnimate StartPoint
24.114.3.Animate Ellipse RadiusY, RadiusXAnimate Ellipse RadiusY, RadiusX
24.114.4.Animate Width and Height of a EllipseAnimate Width and Height of a Ellipse
24.114.5.Animate Width and Height of a RectangleAnimate Width and Height of a Rectangle
24.114.6.Width and Height animationWidth and Height animation
24.114.7.An animated Ellipse traces the outline of rendered text by using the path geometry of the text.An animated Ellipse traces the outline of rendered text by using the path geometry of the text.
24.114.8.Animate Fill.RadiusYAnimate Fill.RadiusY