trying to rotate a circle continuously in clockwise direction in UWP xaml - xaml

Question

I have implemented the structure that is rotating continuously in clockwise direction and now want to implement small circle attached along with it which should also rotate along the same direction in which pointed structure is rotating. Code for that are given below.
XAML
<Grid Name="mainGridView">
<Grid.Background>
<ImageBrush ImageSource="Assets/info_bg.png"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition x:Name="rowDefSubjectHeadingGrid" Height="1*"/>
<RowDefinition x:Name="rowDefSubjectListGrid" Height="4.4*"/>
<RowDefinition x:Name="rowDefButtonGrid" Height="1*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#339FFE">
<Image Source="Assets\ic_nytra_logo.png" HorizontalAlignment="Left" Stretch="Fill" Width="84" Height="72"
Margin="10,0,0,0"/>
<Image Source="Assets\ic_setting.png" HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="Uniform" Width="49" Height="49"
Margin="0,10,15,0"/>
</Grid>
<Grid Grid.Row="1">
<Image Stretch="Uniform" Name="Display" HorizontalAlignment="Center" Source="Assets/ic_out_circle.png" Width="230">
<Image.Projection>
<PlaneProjection/>
</Image.Projection>
</Image>
</Grid>
<Grid Grid.Row="2" Background="#339FFE">
</Grid>
</Grid>
CS
public sealed partial class MainPage : Page
{
private Storyboard rotation = new Storyboard();
public MainPage()
{
this.InitializeComponent();
DoubleAnimation animation = new DoubleAnimation();
animation.From = 0.0;
animation.To = 360.0;
// animation.BeginTime = TimeSpan.FromSeconds(1);
animation.RepeatBehavior = RepeatBehavior.Forever;
animation.Duration = TimeSpan.FromSeconds(15);
Storyboard.SetTarget(animation, Display);
Storyboard.SetTargetProperty(animation, "(UIElement.Projection).(PlaneProjection.Rotation" + "Z" + ")");
rotation.Children.Clear();
rotation.Children.Add(animation);
rotation.Begin();
}
}
Image given below

Answer 1

i got the solution
<Grid x:Name="ImageGrid" Grid.Row="1">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<Ellipse VerticalAlignment="Center" Margin="10,-266,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,-240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="245,-134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="285,2,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="254,134,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="147,240,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Ellipse VerticalAlignment="Center" Margin="10,286,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,252,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-239,146,0,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-266,10,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-232,-122,10,10" Fill="Orange" Height="47" Width="47" StrokeThickness="5" />
<Ellipse VerticalAlignment="Center" Margin="-130,-238,10,0" Fill="#E84C3D" Height="47" Width="47" StrokeThickness="5"/>
<Image x:Name="ImageBlock" Source="Assets/ic_out_circle.png" HorizontalAlignment="Center" Stretch="Uniform" Width="230">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard x:Name="SpinAnimation">
<DoubleAnimation To="0" From="360" RepeatBehavior="Forever" Duration="0:0:5" Storyboard.TargetName="ImageGrid"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>