<Page
    x:Class="RainbowEightTransform.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:RainbowEightTransform"
    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}">
        <Viewbox>
            <Path StrokeThickness="50"
                  Margin="0 25 0 0">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="110 0">
                            <ArcSegment Size="90 90" Point="110 180" 
                                        SweepDirection="Clockwise" />
                            <ArcSegment Size="110 110" Point="110 400" 
                                        SweepDirection="Counterclockwise" />
                            <ArcSegment Size="110 110" Point="110 180" 
                                        SweepDirection="Counterclockwise" />
                            <ArcSegment Size="90 90" Point="110 0" 
                                        SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
                <Path.Stroke>
                    <LinearGradientBrush StartPoint="0 0" EndPoint="1 1"
                                         SpreadMethod="Repeat">
                        <LinearGradientBrush.RelativeTransform>
                            <TranslateTransform x:Name="translate" />
                        </LinearGradientBrush.RelativeTransform>
                        
                        <GradientStop Offset="0.00" Color="Red" />
                        <GradientStop Offset="0.14" Color="Orange" />
                        <GradientStop Offset="0.28" Color="Yellow" />
                        <GradientStop Offset="0.43" Color="Green" />
                        <GradientStop Offset="0.57" Color="Blue" />
                        <GradientStop Offset="0.71" Color="Indigo" />
                        <GradientStop Offset="0.86" Color="Violet" />
                        <GradientStop Offset="1.00" Color="Red" />
                    </LinearGradientBrush>
                </Path.Stroke>
            </Path>
        </Viewbox>
    </Grid>
    
    <Page.Triggers>
        <EventTrigger>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="translate"
                                     Storyboard.TargetProperty="Y"
                                     EnableDependentAnimation="True"
                                     From="0" To="-1.36" Duration="0:0:10"
                                     RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Page.Triggers>
</Page>
