尝试将圆与主圆一起旋转，文本在旋转时应始终处于恒定位置

Question

尝试将红色圆圈与主圆圈一起旋转，并且红色圆圈内的文字在旋转时应始终处于恒定位置。下面是代码

 <Grid x:Name="ImageGrid">
        <Grid.Projection>
            <PlaneProjection/>
        </Grid.Projection>
        <Grid x:Name="1grid" Margin="10,-176,10,10" Height="37" Width="37">            
            <Ellipse VerticalAlignment="Center"  Fill="#E84C3D" Height="37" Width="37" StrokeThickness="5" Stroke="#E84C3D"/>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="I"/>            
        </Grid>        
        <Image  x:Name="ImageBlock" Source="Assets/ic_out_circle.png" Height="150" HorizontalAlignment="Center"
               Stretch="Uniform" Width="230">              
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="SpinAnimation">
                            <DoubleAnimation To="360" From="0" Duration="0:0:7" Storyboard.TargetName="ImageGrid"
                Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
                        </Storyboard>                         
                    </BeginStoryboard>
                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>

参考图片

Answer 1

下面是解决方案

<Grid x:Name="ImageGrid">
        <Grid.Projection>
            <PlaneProjection/>
        </Grid.Projection>
        <Grid x:Name="grid" Margin="10,-176,10,10" Height="37" Width="37">
            <Grid.Projection>
                <PlaneProjection/>
            </Grid.Projection>
            <Ellipse x:Name="grd" VerticalAlignment="Center"  Fill="#E84C3D" Height="37" Width="37" StrokeThickness="5" Stroke="#E84C3D"/>
            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="VIII"/>           
              </Grid>        
        <Image  x:Name="ImageBlock" Source="Assets/ic_out_circle.png" Height="150" HorizontalAlignment="Center"
               Stretch="Uniform" Width="230">              
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                    <BeginStoryboard>
                        <Storyboard x:Name="SpinAnimation">
                            <DoubleAnimation RepeatBehavior="Forever" To="0" From="360" Duration="0:0:7" Storyboard.TargetName="ImageGrid"
                Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
                        </Storyboard>                            
                    </BeginStoryboard>

                    <BeginStoryboard>
                    <Storyboard x:Name="SpinAnimation1">
                            <DoubleAnimation RepeatBehavior="Forever" To="360" From="0" Duration="0:0:7" Storyboard.TargetName="grid"
                Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"/>
                    </Storyboard>
                    </BeginStoryboard>

                </EventTrigger>
            </Image.Triggers>
        </Image>
    </Grid>

尝试将圆与主圆一起旋转，文本在旋转时应始终处于恒定位置

trying to rotate the circle along with main circle and text should always be in constant position while rotating

xaml

uwp

uwp-xaml