<Window x:Class="SoundAndVideo.SynchronizedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="SynchronizedAnimation" Height="300" Width="300" Name="DocumentRoot"
    >

  <Window.Resources>
    <Storyboard x:Key="Board" SlipBehavior="Slip" CurrentTimeInvalidated="storyboard_CurrentTimeInvalidated">

      <MediaTimeline Source="sq3gm1.mid"
       Storyboard.TargetName="media" />
      
      <StringAnimationUsingKeyFrames 
           Storyboard.TargetName="lblAnimated" Storyboard.TargetProperty="(Label.Content)"
           FillBehavior="HoldEnd">


        <DiscreteStringKeyFrame Value="First note..." KeyTime="0:0:3.4" />
        <DiscreteStringKeyFrame Value="Introducing the main theme..." KeyTime="0:0:5.8" />
        <DiscreteStringKeyFrame Value="Irritating bass begins..." KeyTime="0:0:28.7" />
        <DiscreteStringKeyFrame Value="Modulation!" KeyTime="0:0:53.2" />
        <DiscreteStringKeyFrame Value="Back to the original theme." KeyTime="0:1:8" />

      </StringAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName="ellipse"
                 Storyboard.TargetProperty="Opacity" BeginTime="0:0:29.36" RepeatBehavior="30x"
                 >        
        <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
        <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.64" />
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </Window.Resources>
  <Window.Triggers>
    <EventTrigger RoutedEvent="MediaElement.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard Name="mediaStoryboard" Storyboard="{StaticResource Board}">
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
  
  <StackPanel Margin="10">
   


    <MediaElement Name="media" MediaOpened="media_MediaOpened" ></MediaElement>
    <Label Name="lblAnimated">Starting...</Label>
    <Slider Name="sliderPosition" ValueChanged="sliderPosition_ValueChanged"></Slider>

    <Ellipse Margin="10" Fill="Blue" Width="20" Height="20" Name="ellipse" Opacity="0"></Ellipse>
    <TextBlock Name="lblTime">[[ not started ]]</TextBlock>
  </StackPanel>
</Window>
