<Window x:Class="Animation.AnimationPlayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Animation" Height="396" Width="360.8"
    >
  <Window.Triggers>    
      <EventTrigger SourceName="cmdStart" RoutedEvent="Button.Click">
        <BeginStoryboard Name="fadeStoryboardBegin">
          <!-- The SpeedRatio binding makes sure the initial speed matches the slider.
               The Slider's event handling code makes sure the speed is updated when
               the slider is moved. -->
          <Storyboard Name="fadeStoryboard" CurrentTimeInvalidated="storyboard_CurrentTimeInvalidated"
                      SpeedRatio="{Binding ElementName=sldSpeed,Path=Value}">
            <DoubleAnimation
                Storyboard.TargetName="imgDay"
                Storyboard.TargetProperty="Opacity"
                From="1" To="0" Duration="0:0:10" ></DoubleAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>

      <EventTrigger SourceName="cmdPause" RoutedEvent="Button.Click">
        <PauseStoryboard BeginStoryboardName="fadeStoryboardBegin"></PauseStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdResume" RoutedEvent="Button.Click">
        <ResumeStoryboard BeginStoryboardName="fadeStoryboardBegin"></ResumeStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdStop" RoutedEvent="Button.Click">
        <StopStoryboard BeginStoryboardName="fadeStoryboardBegin"></StopStoryboard>
      </EventTrigger>
      <EventTrigger SourceName="cmdMiddle" RoutedEvent="Button.Click">
        <SeekStoryboard BeginStoryboardName="fadeStoryboardBegin"
                        Offset="0:0:5"></SeekStoryboard>
      </EventTrigger>      
  </Window.Triggers>
  <Window.Resources>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Padding" Value="5"></Setter>
      <Setter Property="Margin" Value="1"></Setter>
    </Style>
  </Window.Resources>

  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid>
      <Image Source="night.jpg"></Image>
      <Image Source="day.jpg" Name="imgDay"></Image>
    </Grid>

    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">            
      <Button Name="cmdStart">Start</Button>
      <Button Name="cmdPause">Pause</Button>
      <Button Name="cmdResume">Resume</Button>
      <Button Name="cmdStop">Stop</Button>
      <Button Name="cmdMiddle">Move To Middle</Button>      
    </StackPanel>

    <TextBlock Grid.Row="2" Name="lblTime" HorizontalAlignment="Center">[[ stopped ]]</TextBlock>
    <Grid Grid.Row="3" Margin="5">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBlock>Speed:</TextBlock>
      <Slider Grid.Column="1" Name="sldSpeed"
              Minimum="0" Maximum="3" Value="1" TickPlacement="BottomRight" TickFrequency="0.1"
              ValueChanged="sldSpeed_ValueChanged"></Slider>
    </Grid>
    <ProgressBar Grid.Row="4" Margin="0,5,0,0" Height="10"  Name="progressBar" Minimum="0" Maximum="1"></ProgressBar>
  </Grid>
</Window>
