Groping Elements in Expression Blend Silverlight

Introduction

Sometimes in Expressing Blend we need to tie multiples images and/or arts together to copy or to move along or to resize them. Copying arts one by one is really quite difficult; even when you wish to resize all arts at the same ratio then "grouping" will be most effective. Almost every good drawing applications support a grouping feature, such as Photoshop, Auto-Cad, Adobe Flash all have this feature. Why does Blend not have it? Exactly, Blend assists us in these tasks and makes them easier.

Please note that grouping the elements also modifies the XAML markup. Let's create a sample project and demonstrate this.

Follow the steps:

Step 1

Create a brand new Expression Blend application.

Step 2

Draw some new arts (ellipse, rectangle, path etc.) in Blend.

Step 3

While pressing the Ctrl key, click on every element that you will be wishing to group or you may select entire element by pressing Ctrl+A, but that is not always right.

Step 4

Once done then select Object > Group Into > Grid [try yourself all one by one].  Now all the selected elements are part of a new Grid. Notice all selected elements now appear under Grid type rectangle.

Step 5

Now select the bottom right corner and try to resize it and move it. You will notice that the grouped elements act like a group (single art).

XAML Code before Grouping

<UserControl

          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

          x:Class="SilverlightApplication2.MainPage"

          Width="640" Height="480">

 

          <Grid x:Name="LayoutRoot" Background="White">

                   <Path Data="M113.5,72.5 C113.5,112.2645 88.204086,144.5 57,144.5 C25.795912,144.5 0.5,112.2645 0.5,72.5 C0.5,52.855808 28.077543,42.916111 55.985287,42.680897 C84.569443,42.439987 113.5,52.379688 113.5,72.5 z" Fill="#FFF4F4F5" Margin="243,169.177,280,120" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>

                   <Path Data="M88,302 L112,248" Fill="#FFF4F4F5" Height="86" Margin="297,83.177,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" HorizontalAlignment="Left" Width="4"/>

                   <Ellipse Fill="#FFF4F4F5" Margin="277,209,319,181" Stroke="Black"/>

                   <Rectangle Fill="#FFF4F4F5" Height="33" Margin="211,51,253,0" Stroke="Black" VerticalAlignment="Top"/>

          </Grid>

</UserControl>

XAML Code after Grouping

<UserControl

          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

          x:Class="SilverlightApplication2.MainPage"

          Width="640" Height="480">

 

          <Grid x:Name="LayoutRoot" Background="White">

                   <Grid Margin="211,51,253,120">

                             <Path Data="M113.5,72.5 C113.5,112.2645 88.204086,144.5 57,144.5 C25.795912,144.5 0.5,112.2645 0.5,72.5 C0.5,52.855808 28.077543,42.916111 55.985287,42.680897 C84.569443,42.439987 113.5,52.379688 113.5,72.5 z" Fill="#FFF4F4F5" Margin="32,118.177,27,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>

                             <Path Data="M88,302 L112,248" Fill="#FFF4F4F5" Height="86" Margin="86,32.177,86,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top"/>

                             <Ellipse Fill="#FFF4F4F5" Margin="66,0,66,61" Stroke="Black" Height="90" VerticalAlignment="Bottom"/>

                             <Rectangle Fill="#FFF4F4F5" Height="33" Stroke="Black" VerticalAlignment="Top"/>

                   </Grid>

          </Grid>

</UserControl>

Please note that, when we group controls it adds a <Grid> just after LayoutRoot and changes some margins of shapes. In the above code you can see the difference.

HAVE A HAPPY CODING!!