Animate GradientStop and Button control : Color 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>
            
              <ColorAnimation
                Storyboard.TargetName="ellipse"
                Storyboard.TargetProperty="Fill.GradientStops[2].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>
WPF Animate Gradient Stop And Button Control








24.109.Color Animation
24.109.1.Animate RadialGradientAnimate RadialGradient
24.109.2.Animate OpacityAnimate Opacity
24.109.3.Animate GradientStop and Button controlAnimate GradientStop and Button control
24.109.4.Animate the Color of a Brush with Indirect Property TargetingAnimate the Color of a Brush with Indirect Property Targeting
24.109.5.Opacity AnimationOpacity Animation
24.109.6.Animate the background colorAnimate the background color
24.109.7.Animate the brush's RadiusX property.Animate the brush's RadiusX property.