Moving and transforming objects

Visual Studio 2012

You can easily modify image, text, and vector objects in Blend for Visual Studio 2012 by repositioning, resizing, translating, scaling, rotating, skewing, flipping, and changing the center point of each object. You can modify objects by making changes on the artboard or by changing the properties in the Layout and Transform categories of the Properties panel. In addition, you can use the Brush Transform Brush Transform tool tool to modify only the brush properties of your image, text and vector objects.

When you use Selection 2ff91340-477e-4efa-a0f7-af20851e4daa in the Tools panel to select an object on the artboard, Blend displays a bounding box around the object, with handles that you can use to modify the object. You can also select more than one object at a time by holding down the Ctrl key, and the bounding box will appear around all of the objects in the selection. The following are quick tips for using handles, together with images that demonstrate what an object might resemble before and after you apply a transformation to it.

Modification

Before and after

Reposition

Moves an object along the X or Y or Z (three-dimensional objects only) axis.

To reposition an object, move your pointer over the object until the pointer changes to an arrow with a smaller four-directional arrow eff911a7-b891-4315-a86c-cc4cd088e647, and then drag the pointer to move the object. Hold down the Shift key to constrain the movement to the X or the Y plane as you reposition it.

Repositioning an object changes the properties of the object under Layout in the Properties panel. Repositioning changes just the initial position of the object. Repositioning does not apply a transform to the object unless you are modifying your object in a trigger or in an animation timeline, in which case repositioning changes the properties in the Translate tab 962807da-746d-41bd-878c-0f89500f3907 under Transform in the Properties panel.

For more information, see Reposition or translate an object.

Repositioning an object on the artboard

c7c8c2bc-c934-4dd5-a121-94d4ca82f294

Resize

Changes the height, width, and depth (three-dimensional objects only) of an object.

To resize an object, move your pointer over the corner handles or the midpoint handles of an object until the pointer becomes a double-ended arrow (5b735d0c-fdc1-4d8b-a592-0e762cc7c635, b1472e4f-1959-485d-901f-df5583a77bcb, ec88bf27-dad4-4869-9146-0c9647c29cdc, or 7d350cd4-6d4f-40bc-9d04-d46d2d54ebee), and then drag the pointer to change the size of the object. Hold down the Shift key to constrain the proportions of the object as you resize it. Hold down the Alt key to maintain the center point.

Resizing an object changes the properties of the object under Layout in the Properties panel. Resizing changes just the initial size of the object. Resizing does not apply a transform to the object unless you are modifying your object in a trigger or in an animation timeline, in which case resizing changes the properties in the Scale tab 7a93944e-a7f5-4607-babd-768bb5f56185 under Transform in the Properties panel.

For more information, see Resize or scale an object.

Resizing an object on the artboard

1bf7361c-1d19-47e0-981b-222d7a8d69d4

Rotate

Rotates an object around its center point.

To rotate an object, move your pointer over the corner handles of the object until the pointer becomes a rotation handle 888cbf6b-c442-424d-977d-61d942703c4a, and then drag the pointer to rotate the object. Hold down the Shift key as you rotate the object to rotate it in 15-degree increments. The position of the center point affects how the object is rotated. You can move the center point of the object by moving your pointer over the handle in the center of the object until the pointer becomes a four-directional arrow 9003164f-1dd4-4a3b-8a4c-21a70d4b3ffb, and then dragging the pointer. Moving the center point changes the properties in the Center Point tab 49772b0c-095e-450b-967e-75dc1858966f under Transform in the Properties panel.

Rotating an object changes the properties of the object in the Rotate tab 321b430b-5c8e-47dc-93f8-0e85ac32cca5 under Transform in the Properties panel. Rotating applies a transform to the object.

For more information, see Rotate an object and Change the center point of an object.

Rotating an object on the artboard

0ec39880-288d-4083-90f0-26b05c094977

Skew

Skews (shears) an object along the X or Y or Z (three-dimensional objects only) axis.

To skew an object, move your pointer over the midpoint handles of an object until the pointer becomes a divided double-ended arrow 2be41f49-8a61-4966-bf08-598f4253b610, and then drag the pointer to skew, or shear, the object. Hold down the Alt key to maintain the position of the center point (instead of maintaining the position of the opposite corner or edge).

Skewing an object changes the properties of the object in the Skew tab 90c478da-1e6b-4b59-8322-445053058a6d under Transform in the Properties panel. Skewing applies a transform to the object.

For more information, see Skew an object.

Skewing an object on the artboard

b5b43b8b-dd44-4d42-a0d2-f7fab35e6f33

Flip

Flips an object along the X or Y or Z (three-dimensional objects only) axis.

To flip an object, move your pointer over the corner handles or the midpoint handles of an object until the pointer becomes a double-ended arrow (5b735d0c-fdc1-4d8b-a592-0e762cc7c635, b1472e4f-1959-485d-901f-df5583a77bcb, ec88bf27-dad4-4869-9146-0c9647c29cdc, or 7d350cd4-6d4f-40bc-9d04-d46d2d54ebee), and then drag the pointer past the opposite side or corner. Hold down the Shift key to constrain the proportions of the object as you resize it. Hold down the Alt key to maintain the center point.

Flipping an object gives you the same results as selecting the buttons in the Flip tab 90c478da-1e6b-4b59-8322-445053058a6d under Transform in the Properties panel. Flipping applies a transform to the object that includes negative scale values.

For more information, see Flip an object.

Flipping an object on the artboard

8bfb0802-a741-429c-9608-03d706a3328c

You can modify objects with precision by entering specific values for the properties under Layout and Transform in the Properties panel. By using the Properties panel, you can easily control the details of your objects, such as their initial height, width, alignment, and margins, in addition to controlling transformations such as rotation, skew angle, flip angle, scale values, translation values, and center point.

Note Note

Most of the properties under Layout and Transform in the Properties panel use the Blend number editor. The number editor is activated by moving your pointer over the text box of the property, and then dragging when the numeric adjust cursor 99713193-615f-4ee2-a668-522b5572f389 appears so that you can scroll through values. You can also click in the text box of the property and use the Up Arrow and Down Arrow keys to adjust the value.

You can apply the same modifications to text objects that you can apply to image and vector objects.

Modification applied to a text object

f98cfe86-514a-42a0-b31d-57fa7e00e602

A transform defines how to map points from one coordinate space to another coordinate space. For example, if you translate an object, the transformation that is applied to the object moves the object from the initial X, Y, and Z (three-dimensional objects only) coordinates to the destination coordinates. If you scale an object, the transformation that is applied to the object resizes the object based on a percentage of the initial X, Y, and Z (three-dimensional objects only) values.

You can transform objects by entering specific values under Transform in the Properties panel, or by modifying the center point, rotation, skew angle, or flip angle of an object on the artboard. Transformations are automatically applied when modifying an object in an animation timeline or a trigger, even if you are repositioning or resizing the object on the artboard. This preserves the initial values of an object.

Transformation properties come in three categories:

  • RenderTransform    The transformation is applied after the layout pass is complete. Using the Selection tool to transform an object on the artboard modifies the RenderTransform properties.

    Note Note

    Using the RenderTransform properties is the ideal way to perform transformations on objects because of better application performance.

  • Projection    The transformation is applied after the layout pass is complete. Projection transformation creates the illusion of rotating an object in 3D space.

    For more information, see Transform an object in simulated 3D space. Projection transformation is available only in Microsoft Silverlight projects.

  • LayoutTransform    The transformation is applied in memory during layout, before the application is rendered on screen. Use the LayoutTransform properties when you want a parent object to adjust to the transformation applied to a child object. Layout transformation is available only in Windows Presentation Foundation (WPF) projects.

The Brush Transform tool Brush Transform tool modifies the RelativeTransform property of a brush, including the RelativeTransform for gradient and tile brushes. When you apply a transform to a the RelativeTransform property of a brush, that transform is applied to the brush before its output is mapped to the area.

The Brush Transform tool modifies the brush that is selected in the Brushes panel and applied to the object that is selected on the artboard.

To modify the transform of a brush that is applied to an object directly on the artboard, select the brush property in the Properties panel, and then select the Brush Transform tool Brush Transform tool in the Tools panel.

Tip Tip

With the object selected on the artboard, press B to select the Brush Transform tool.

An adorner (a blue border) appears around the object. With the object selected with the Brush Transform tool, you can now modify the selected object in the following ways:

  • To move a brush, drag anywhere inside the object. This corresponds to the Translate tab on the RelativeTransform box in the Properties panel.

    Transform a gradient
  • To rotate a brush, put your pointer outside any corner of the bounding outline around the object and drag when your pointer changes to a rotation handle 888cbf6b-c442-424d-977d-61d942703c4a. This corresponds to the Rotate tab on the RelativeTransform box in the Properties panel.

    Transform a gradient
  • To rescale either a tile brush or radial gradient brush, put your pointer on any handle on the side or corner of the object, and then drag. This corresponds to the Scale tab on the RelativeTransform box in the Properties panel.

    Transform a gradient
  • To skew a brush, put your pointer outside a side handle and drag when your pointer changes to skew handles 2be41f49-8a61-4966-bf08-598f4253b610. This corresponds to the Skew tab on the RelativeTransform box in the Properties panel.

    Transform a gradient

You can also flip a transform. In the Properties panel, in the Brushes category, click Show advanced options de239c9d-42ce-4f5e-83b9-5f9924c0431f. In the RelativeTransform box, click the Flip tab, and then click Flip X axis or Flip Y axis.

For more information about brush transforms, see Arranging objects and Transform a gradient or tile brush.

Sometimes, when you transform an object, parts of the object will be clipped (that is, parts will disappear outside of the bounding box). You can fix clipping problems in the following ways:

  • Clear the checkbox for the ClipToBounds property under Appearance in the Properties panel.

  • Use the properties in the LayoutTransform category instead of the RenderTransform under Transform in the Properties panel. This is particularly useful when transforming a visual brush.

  • Modify your object in the default timeline using the properties under Layout in the Properties panel before applying transformations or modifying the object in an animation timeline or trigger. This will resize and reposition the bounding box before transformations are applied.

If you want to purposely clip an object by using a shape or a path, you can create a clipping mask. For more information, see Apply, modify, or remove a clipping path.

Show: