Home > Client Technologies, Tutorials > Transforming grouped elements in Expression Blend

Transforming grouped elements in Expression Blend

December 23, 2009

I found this question about resizing elements on Stack Overflow and thought I’d share what I found with others. This also gives me a little more room to put together an answer.

jhubsharp is walking through the Eyes of Blend Drawing tutorial and has run into an issue when resizing grouped elements. In the tutorial, three ellipses are used to create an eyeball. Once they are grouped into a Grid the resizing behavior appears to have changed. Let’s take a look at what’s going on.

Group Selection in Blend

At this stage in the tutorial here’s the object tree:

  • Grid (LayoutRoot)
    • Ellipse
    • Grid
      • Ellipse
      • Ellipse
      • Ellipse


If you select the child Grid and drag the handles to resize, the Grid’s Height, Width may be changed. Additionally because the Grid is a child of another Grid the Blend Designer may change the Margin, HorizontalAlignment and VerticalAlignment properties.

The Blend Designer may also modify the Margin, HorizontalAlignment and VerticalAlignment properties of the child Ellipses so they maintain their position. The Blend Designer makes changes for you in the XAML behind the scenes to persist your visual design as much as possible.  A good example of this behavior is if you were to add a Grid Column, the child Ellipses would be set to Grid.ColumnSpan = 2, so they would continue to fill the same space.

If you select a single Ellipse in the child Grid, dragging the handles to resize may modify the Height, Width, alignment and Margin properties as expected. Not a lot of surprises here.

Now if you select multiple Ellipses, by holding Shift down and clicking the Ellipses or selecting them in the Object panel there is added functionality to be aware of. In the picture above (click to see a larger version), you can see I have added two rectangles, a red one and a green one.  When you select multiple elements, two handles appear on the element you select first (in this case I selected the larger white Ellipse).  Dragging the handle under the green rectangle will resize the whole group of elements.  Dragging the handle under the red rectangle will only resize the larger white Ellipse.

This may not be so obvious when the elements are small or closely positioned together. I know at first, I saw the two different behaviors and couldn’t figure out why it appeared to be randomly resizing the group or a single item.  This compounded with the fact that I wasn’t always choosing the same element first, added to the confusion.

Now that I am aware of the feature though, it makes it all the more useful.  Hopefully this explains jhubsharp’s issue and hopefully it may help you out as well.

Tags: ,
Comments are closed.
%d bloggers like this: