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

狂风中的少年 提交于 2020-01-15 12:14:13

问题


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


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


来源:https://stackoverflow.com/questions/39953056/trying-to-rotate-a-circle-continuously-in-clockwise-direction-in-uwp-xaml

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!