Wednesday, March 19, 2014

XAML Rotate Image

Trying to spice up a select activity on a phone app.  I had a png image which I wanted to rotate 90'
upon selection.  Turns out that the API's for this are pretty straight forward.  I did this in the code behind wired up to the selectionchanged event.


XAML:

<Image x:Name="imgIcon" Tap="OnTap"/>


Code Behind:

OnTap(object sender, RoutedEventArgs e)
{

SelectEditIcon(imgIcon);

}

private void SelectEditIcon(Image image)
{
RotateTransform rt = new RotateTransform();
rt.Angle = 90;
image.RenderTransform = rt;
image.RenderTransformOrigin = new Point(0.5,0.5);
}


private void UnselectEditIcon(Image image)
{
RotateTransform rt = new RotateTransform();
rt.Angle = 360;
image.RenderTransform = rt;
image.RenderTransformOrigin = new Point(0.5,0.5);
}



Note:  It is important to define the point of rotation for the image if  you do not then it will not
rotate correctly.  This was done by using setting the Origin to X=0.5/ Y=0.5


source:
http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform(v=vs.110).aspx

No comments:

Post a Comment