MSDN Magazine - August 2008 - (Page 69)

RotateTransform allows you to rotate an element by a specified angle around a specified center point. You set the angle of rotation by using the Angle property to set the number of degrees that you want to rotate the item. To orient yourself, consider the horizontal vector pointing to the right to be 0 degrees, and rotation takes place clockwise, so the vertical vector pointing down is the result of a 90-degree rotation. You set the center of transformation using the CenterX and CenterY properties to specify the coordinates of the pivot. These default to 0.0, which makes the default rotation pivot the upperleft corner of the container. In this example XAML, a TextBlock is rotated using a RenderTransform that contains a RotateTransform specifying a 45-degree rotation: Rotating with the RotateTransform Property Figure 1 Using the RotateTransform Property As you can see in Figure 1, the text is being rotated around a center point at (0,0)—at the upper-left corner of the screen. This XAML shows how to use CenterX and CenterY to rotate around a different point. In this case, the rotation is done around the (100,200) point: Figure 2 Rendering the Rectangle Scaling with the ScaleTransform Property The ScaleTransform property is used to change the size of an object based on the horizontal axis, the vertical axis, or both axes. When scaling an object, you need to specify at least one of the axes around which you want to scale, and by how much you want to scale against that axis. You use the ScaleX property to scale the object on the horizontal axis, the x-axis, and the ScaleY to scale it on the vertical axis, the yaxis. These are set to a double value, which represents the value by which you multiply the object’s current size on the specified axis. Therefore, values greater than 1 will stretch the object by that multiple. For example, using a ScaleX value of 2 will double the size of the object horizontally. Values less than 1, but greater than 0, will shrink the object. Using a setting of 0.5, for instance, will reduce the size of the object by half along the specific dimension. For example, this XAML creates a red rectangle 96 pixels wide by 88 pixels high: Figure 2 demonstrates what this object looks like when it is rendered in Silverlight. To apply a ScaleTransform to this object, you use a RenderTransform and specify the transform to be a ScaleTransform. Here’s the XAML: msdnmagazine.com If you’re coding along at home, you’ll see that the rectangle increased in size horizontally to the right using this ScaleTransform. This was because the center of scaling was not specified. You can specify it with the CenterX property for horizontal scaling or the CenterY property for vertical scaling. These specify the coordinate of the center of scaling. Note that this coordinate is relative to the upper-left corner of the rectangle. Also, the coordinate default is 0, meaning that scaling will take place to the right on the horizontal axis and downward on the vertical axis. If you set the CenterX property to a positive value (for example, 50), the scaling will be around the X point, 50 pixels to the right of the leftmost side of the rectangle. This will make it look like the rectangle has moved a number of pixels to the left of the one where the CenterX hasn’t been changed (the number depends on the size of the scaling factor). This is because the stretching is centered on that point, pushing the left side of the rectangle to the left as well as pushing the right side to the right. You’ll get similar effects by setting the ScaleY and CenterY values in the same way: August 2008 69 http://msdnmagazine.com

Table of Contents Feed for the Digital Edition of MSDN Magazine - August 2008

MSDN Magazine - August 2008 Toolbox CLR Inside Out Basic Instincts Cutting Edge Patterns in Practice Data 2.0 - Expose And Consume Data In A Web Services World Biztalk EDI - Build A Robust EDI Solution With BizTalk Server Silverlight - Create Animations With XAML And Expression Blend Write On! - Create Web Apps You Can Draw On With Silverlight 2 Wicked Code - Craft Custom Controls For Silverlight 2 Team System Foundations Windows With C++ Concurrent Affairs Going Places { End Bracket }

MSDN Magazine - August 2008

For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.