尝试在UWP xaml中以顺时针方向连续旋转圆圈

Question

我已经实现了顺时针方向连续旋转的结构，现在想要实现与它一起连接的小圆圈，它也应该沿着尖头结构旋转的相同方向旋转。代码如下。

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();
    } 
}

下面的图片

Answer 1

我得到了解决方案

<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>