Use of StackPanel and Radio Button in Expression Blend

Step 1

Open Expression Blend 4 -> select Silverlight-> select Silverlight Application -> change Name and Location accordingly -> hit OK, a Blank Window appears in the ArtBoard.

Step 2

Select Layout Root from Object and Timeline Window and Fill Background Color accordingly using Solid Color Brush Tool from the Property Panel as shown below: 

Step 3

Select ToolBox -> StackPanel as shown below:

Step 4

Draw StackPanel and manage Background color, Orientation, Alignment, Margin and Width & Height as shown below:

Step 5

Select ToolBox -> TextBlock, draw a TextBlock, manage Background Color, Width & Height, Alignment, Orientation, Margin, Font Family and Font Size as shown below:







Step 6

Follow Steps 3-4 to draw a StackPanel as shown below:



Step 7

Select ToolBox -> Button, draw Buttons, manage Width & Height, Alignment and Margin as shown below:

Step 8

Follow Step 3, draw StackPanel, manage Width & Height, Margin, Alignment and Background Color as shown below:

Step 9

Follow Step 8 and draw 2 more StackPanels as shown below:

Step 10

Follow Step 5, draw 3 TextBlocks and Insert them in the StackPanels Step-By-Step as shown below:

Note: Here, we can draw a TextBlock separately along with a StackPanel separately and by using the Groupinto Property group them as shown below:

Step 11

Follow Steps 4 and 7, draw 2 StackPanels and 2 Buttons for Previous and Next as shown below:

Step 12

To Run the application in a browser hit F5 or Ctrl+F5 or select Project Menu -> Run Project and see the results after each and every step as shown below:

Summary

This article provides the knowledge about designing using StackPanel to manage the Layout of the screen.