Xbox One ProgressRingStyle

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

    <Page.Resources>
        <SolidColorBrush x:Key="PrimaryUserColor" Color="#107C10" />
        <SolidColorBrush x:Key="SecondaryUserColor" Color="#102B14" />
        <SolidColorBrush x:Key="TertiaryUserColor" Color="#155715" />
        <SolidColorBrush x:Key="ForegroundColor" Color="#FFFFFFFF" />

        <x:Double x:Key="OutsideRadius">212</x:Double>
        <x:Double x:Key="InsideRadius">196</x:Double>

        <ExponentialEase x:Key="Exponent4" EasingMode="EaseInOut" Exponent="4" />

        <Style x:Key="ProgressRingStyle" TargetType="ProgressRing">
            <Setter Property="Foreground" Value="{ThemeResource ForegroundColor}" />
            <Setter Property="Height" Value="84" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="MinHeight" Value="20" />
            <Setter Property="MinWidth" Value="20" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressRing">
                        <Grid x:Name="RootGrid" Opacity="0">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ActiveStates">
                                    <VisualState x:Name="Inactive" />
                                    <VisualState x:Name="Active">
                                        <Storyboard SpeedRatio="1.5">
                                            <DoubleAnimation
                                                BeginTime="0:0:1.6"
                                                Duration="0:0:0.1"
                                                From="0"
                                                Storyboard.TargetName="RootGrid"
                                                Storyboard.TargetProperty="(UIElement.Opacity)"
                                                To="1" />
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:1.6" RepeatBehavior="Forever" Storyboard.TargetName="size1Rotate" Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="5" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.6" Value="355" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Duration="0:0:1.6" RepeatBehavior="Forever" Storyboard.TargetName="postion1Rotate" Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="-5" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.6" Value="180" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.1"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="size2Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.5" Value="355" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.1"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="postion2Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.5" Value="180" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.2"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="size3Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.4" Value="355" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.2"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="postion3Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.4" Value="180" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.3"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="size4Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.4" Value="355" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                BeginTime="0:0:0.3"
                                                Duration="0:0:1.6"
                                                RepeatBehavior="Forever"
                                                Storyboard.TargetName="postion4Rotate"
                                                Storyboard.TargetProperty="Angle">
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame EasingFunction="{StaticResource Exponent4}" KeyTime="0:0:1.4" Value="180" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Viewbox Stretch="Uniform">
                                <Grid>
                                    <Grid>
                                        <Grid.RenderTransform>
                                            <RotateTransform x:Name="postion4Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                        </Grid.RenderTransform>
                                        <Grid>
                                            <Grid.Clip>
                                                <RectangleGeometry Rect="212,0,212,424" />
                                            </Grid.Clip>
                                            <Path Fill="{StaticResource SecondaryUserColor}">
                                                <Path.Data>
                                                    <GeometryGroup FillRule="EvenOdd">
                                                        <GeometryGroup.Children>
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource InsideRadius}" RadiusY="{StaticResource InsideRadius}" />
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource OutsideRadius}" RadiusY="{StaticResource OutsideRadius}" />
                                                        </GeometryGroup.Children>
                                                    </GeometryGroup>
                                                </Path.Data>
                                                <Path.Clip>
                                                    <RectangleGeometry Rect="0,0,212,424">
                                                        <RectangleGeometry.Transform>
                                                            <RotateTransform x:Name="size4Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                                        </RectangleGeometry.Transform>
                                                    </RectangleGeometry>
                                                </Path.Clip>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                    <Grid>
                                        <Grid.RenderTransform>
                                            <RotateTransform x:Name="postion3Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                        </Grid.RenderTransform>
                                        <Grid>
                                            <Grid.Clip>
                                                <RectangleGeometry Rect="212,0,212,424" />
                                            </Grid.Clip>
                                            <Path Fill="{StaticResource TertiaryUserColor}">
                                                <Path.Data>
                                                    <GeometryGroup FillRule="EvenOdd">
                                                        <GeometryGroup.Children>
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource InsideRadius}" RadiusY="{StaticResource InsideRadius}" />
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource OutsideRadius}" RadiusY="{StaticResource OutsideRadius}" />
                                                        </GeometryGroup.Children>
                                                    </GeometryGroup>
                                                </Path.Data>
                                                <Path.Clip>
                                                    <RectangleGeometry Rect="0,0,212,424">
                                                        <RectangleGeometry.Transform>
                                                            <RotateTransform x:Name="size3Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                                        </RectangleGeometry.Transform>
                                                    </RectangleGeometry>
                                                </Path.Clip>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                    <Grid>
                                        <Grid.RenderTransform>
                                            <RotateTransform x:Name="postion2Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                        </Grid.RenderTransform>
                                        <Grid>
                                            <Grid.Clip>
                                                <RectangleGeometry Rect="212,0,212,424" />
                                            </Grid.Clip>
                                            <Path Fill="{StaticResource PrimaryUserColor}">
                                                <Path.Data>
                                                    <GeometryGroup FillRule="EvenOdd">
                                                        <GeometryGroup.Children>
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource InsideRadius}" RadiusY="{StaticResource InsideRadius}" />
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource OutsideRadius}" RadiusY="{StaticResource OutsideRadius}" />
                                                        </GeometryGroup.Children>
                                                    </GeometryGroup>
                                                </Path.Data>
                                                <Path.Clip>
                                                    <RectangleGeometry Rect="0,0,212,424">
                                                        <RectangleGeometry.Transform>
                                                            <RotateTransform x:Name="size2Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                                        </RectangleGeometry.Transform>
                                                    </RectangleGeometry>
                                                </Path.Clip>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                    <Grid>
                                        <Grid.RenderTransform>
                                            <RotateTransform x:Name="postion1Rotate" Angle="-5" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                        </Grid.RenderTransform>
                                        <Grid>
                                            <Grid.Clip>
                                                <RectangleGeometry Rect="212,0,212,424" />
                                            </Grid.Clip>
                                            <Path Fill="{StaticResource ForegroundColor}">
                                                <Path.Data>
                                                    <GeometryGroup FillRule="EvenOdd">
                                                        <GeometryGroup.Children>
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource InsideRadius}" RadiusY="{StaticResource InsideRadius}" />
                                                            <EllipseGeometry Center="212,212" RadiusX="{StaticResource OutsideRadius}" RadiusY="{StaticResource OutsideRadius}" />
                                                        </GeometryGroup.Children>
                                                    </GeometryGroup>
                                                </Path.Data>
                                                <Path.Clip>
                                                    <RectangleGeometry Rect="0,0,212,424">
                                                        <RectangleGeometry.Transform>
                                                            <RotateTransform x:Name="size1Rotate" CenterX="{StaticResource OutsideRadius}" CenterY="{StaticResource OutsideRadius}" />
                                                        </RectangleGeometry.Transform>
                                                    </RectangleGeometry>
                                                </Path.Clip>
                                            </Path>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Viewbox>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="#FF171717">
        <ProgressRing IsActive="True" Width="100" Height="100" Style="{StaticResource ProgressRingStyle}"/>
    </Grid>
</Page>