You must Sign In to post a response.
  • Category: Silverlight

    How to rotate image smooth in silverlight


    Are you looking for a way to rotate image in Silverlight ? then read this thread to know how to rotate it



    I build a project in silverlight. In project, I have an image and I want to rotate it clock wise till 7 seconds smoothly. How could i do this. please solve my issue as soon as possible.

    XAML code is:
    <Grid x:Name="LayoutRootNew" Grid.Row="0" Grid.ColumnSpan="3" Grid.RowSpan="3" Margin="11,40,0,0" VerticalAlignment="Top">


    <Grid.Projection>
    <PlaneProjection RotationX="-51"/>
    </Grid.Projection>


    <Image Name="imgArrow1" Source="@../../Images/circle31mar.png" Stretch="Uniform" UseLayoutRounding="True" Height="340" Width="340" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Image.Projection>
    <PlaneProjection x:Name="Image1Projection" CenterOfRotationX="0.5" CenterOfRotationY="0.5" />
    </Image.Projection>
    <Image.RenderTransform>
    <RotateTransform x:Name="Prize_ListWheel_Rotate"
    Angle="0" />
    </Image.RenderTransform>

    </Image>
    <Image Name="imgArrow2" Source="@../../Images/FRRingNew3.png" Margin="0,0,0,0" Height="222" Width="225" HorizontalAlignment="Center">
    <Image.Projection>
    <PlaneProjection x:Name="Image1Projection2" CenterOfRotationX="0.5" CenterOfRotationY="0.5" />
    </Image.Projection>
    </Image>

    </Grid>


    .cs code is:

    _n = gameDataBO.FRRndNumber; //Animation for red black Wheel
    SessionManager.newrandom = _n;



    // _n = SessionManager.rnno;

    //-new work start-


    randomnumber = _n;
    animanglerot = 360.0 / Convert.ToDouble(itextmaxcount);
    anglesteps = Convert.ToInt64((itextmaxcount * 2 * numberofrotations - 38) * anglefactor);







    //new work end-




    imgArrow1.RenderTransformOrigin = new Point(0.5, 0.5);
    imgArrow1.RenderTransform = new RotateTransform();

    da = new DoubleAnimation();

    da.From = 0;
    da.To = -anglesteps; //-360.00 * 1.9;// -(360.00 / 38.00);
    anglesteps = anglesteps - 1;
    Prize_ListWheel_Rotate.Angle += animanglerot / anglefactor;
    //myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 300); // 100 Milliseconds
    //myDispatcherTimer.Start();
    da.Duration = TimeSpan.FromSeconds(2);

    SineEase be = new SineEase();

    be.EasingMode = EasingMode.EaseIn;
    // da.EasingFunction = be;

    _nRing = gameDataBO.FRRingRndNumber; //Animation for Ring
    SessionManager.newringrandom = _nRing;
    _nRing = SessionManager.ringno;
    imgArrow2.RenderTransformOrigin = new Point(0.5, 0.5);

    imgArrow2.RenderTransform = new RotateTransform();
    da2 = new DoubleAnimation();
    da2.From = 0;
    da2.To = 360.00 * 1;// +(360.00 / 38.00);
    da2.Duration = TimeSpan.FromSeconds(2);
    // da2.EasingFunction = be;


    _netRotation = (_n + _nRing);

    if (_netRotation > 38)
    {
    _netRotation = (_netRotation % 38);
    }

    _finalAngle = _netRotation * (360.00 / 38.00);

    Storyboard.SetTarget(da, imgArrow1.RenderTransform);



    Storyboard.SetTarget(da2, imgArrow2.RenderTransform);


    Storyboard.SetTargetProperty(da, new PropertyPath(RotateTransform.AngleProperty));

    Storyboard.SetTargetProperty(da2, new PropertyPath(RotateTransform.AngleProperty));
    sb1 = new Storyboard();


    sb1.Children.Add(da);

    sb1.Children.Add(da2);

    sb1.Begin();

    SessionManager.newsession = 0;



    This works but roration is not smooth. i want to rotate my image as smooth. Please provide C# code for rotation.
  • #745132
    I am not expert at Silverlight but i think following code will works for you, see below snippet

    <StackPanel HorizontalAlignment="Left">
    <TextBlock>Center X</TextBlock>
    <Slider
    Name="RTX" Minimum="0.0" Maximum="116" />
    <TextBlock>Center Y</TextBlock>
    <Slider
    Name="RTY" Minimum="0.0" Maximum="800"/>
    <TextBlock>Angle</TextBlock>
    <Slider
    Name="Angle" Minimum="0.0" Maximum="360" />
    </StackPanel>

    <Image Source="{Binding ImagePath}" Name="image1">
    <Image.RenderTransform>
    <RotateTransform Angle="{Binding ElementName=Angle,Path=Value}"
    CenterX="{Binding ElementName=RTX, Path=Value}"
    CenterY="{Binding ElementName=RTY, Path=Value}"/>
    </Image.RenderTransform>
    </Image>

    see below link it may help you more
    http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx

    Thanks
    Koolprasd2003
    Editor, DotNetSpider MVM
    Microsoft MVP 2014 [ASP.NET/IIS]


  • Sign In to post your comments