Reader Level:

Use of WrapPanel Tool in Expression Blend 4

By Sonia Bhadouria Vishvkarma on Sep 03, 2012
Today we are going to see the use of the WrapPanel Tool.

Step 1

Open Expression Blend 4 -> Select WPF -> WPF Application -> change the Name and Location accordingly, hit Ok, a blank Window appears.

Step 2

Select Wrap Panel Tool from the ToolBox located to the Left Side of the Workspace, draw Wrap Panel, manage the width & height, background color, margin and alignment. Have a look at the coding also as shown below:


<Grid x:Name="LayoutRoot">
WrapPanel Margin="10" Background="#FF86FAFD">

Step 3

Now, select any image, copy & paste the image into the WPF Application located to the top-left corner of the Workspace. Insert the image at the Artboard, manage the width & height, margin and alignment. Have a look at the coding also as shown below:



<WrapPanel Margin="10" Background="#FF86FAFD">

    <Image Height="100" Source="1339136130_Me.png" VerticalAlignment="Top" Width="100" Margin="10"/>


Step 4

Select the Rectangle Tool from the Toolbox, draw a rectangle, manage the width & height, margin, alignment, background color, StrokeColor and StrokeThickness. Have a look at the coding also as shown below:


<WrapPanel Margin="10" Background="#FF86FAFD">

    <Rectangle Fill="#FF8D8DFF" Stroke="#FFFF4545" Height="130" Width="168" Margin="0,100,0,0"StrokeThickness="3"/>


Note: We can insert a rectangle and image into the Wrap-Panel using the Group-Into Property. Have a look at the Object and Timeline Window as shown below:


Step 5

Select Rectangle at Artboard, see the points to the left side and top. When we move the cursor to the points a Rectangle Box appears with a plus sign. Stretch the plus sign towards the Inner Side and the Rectangle Shape is changed to a circle and see the changes in the coding also as shown below:



<WrapPanel Margin="10" Background="#FF86FAFD">

    <Rectangle Fill="#FF8D8DFF" Stroke="#FFFF4545" Height="130" Width="168" Margin="0,100,0,0" StrokeThickness="3"RadiusY="70.5" RadiusX="70.5"/>


Note: When we stretch the plus sign towards the Inner-Side the RadiusY and RadiusX are added to the coding as shown above.


Through this article we have sen the New Type of use of Points in Expression Blend 4.