Use of WrapPanel Tool in Expression Blend 4

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">
    </WrapPanel>
</Grid>

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"/>

</WrapPanel>

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"/>

</WrapPanel>

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"/>

</WrapPanel>

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

Summary

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