<Page
    x:Class="StoryboardExamples.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StoryboardExamples"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid">
        <Grid.Resources>
            <Style TargetType="Rectangle">
                <Setter Property="Fill" Value="Red"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Width" Value="100"/>
                <Setter Property="Height" Value="100"/>
            </Style>
            <Storyboard x:Key="FirstOneAnimation"
                        Storyboard.TargetName="FirstOne">
                <DoubleAnimation Duration="0:0:5"
                                    Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.X)"
                                    From="-300" To="300"/>
            </Storyboard>
            <Storyboard x:Key="SecondOneAnimation"
                        Storyboard.TargetName="SecondOne">
                <DoubleAnimation Duration="0:0:1"
                                 RepeatBehavior="Forever"
                                 AutoReverse="True"
                                 Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
                                 From="-300" To="300">
                    <DoubleAnimation.EasingFunction>
                        <BounceEase/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
            <Storyboard x:Key="ThirdOneAnimation"
                        Storyboard.TargetName="ThirdOne">
                <ColorAnimationUsingKeyFrames
                    Duration="0:0:5" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)">
                    <DiscreteColorKeyFrame KeyTime="0:0:0" Value="Blue"/>
                    <DiscreteColorKeyFrame KeyTime="0:0:2" Value="Green"/>
                    <DiscreteColorKeyFrame KeyTime="0:0:4" Value="Orange"/>
                    <DiscreteColorKeyFrame KeyTime="0:0:5" Value="Red"/>
                </ColorAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="FourthOneAnimation"
                        Storyboard.TargetName="FourthOne">
                <ObjectAnimationUsingKeyFrames
                    Duration="0:0:5" Storyboard.TargetProperty="(Rectangle.Visibility)">
                    <DiscreteObjectKeyFrame KeyTime="0:0:2">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Collapsed</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button HorizontalAlignment="Left" VerticalAlignment="Top"
                Margin="10" Content="Start" Click="Button_Click_1"/>
        <Rectangle x:Name="FirstOne">
            <Rectangle.RenderTransform>
                <TranslateTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="SecondOne" Grid.Row="1">
            <Rectangle.RenderTransform>
                <TranslateTransform/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="ThirdOne" Grid.Row="2"/>
        <Rectangle x:Name="FourthOne" Grid.Row="3"/>  
    </Grid>
</Page>
