Reader Level:
ARTICLE

Use of StackPanel and Radio Button in Expression Blend

Posted by Sonia Bhadouria Vishvkarma Articles | Expression Studio August 24, 2012
Today we are going to design a Quiz contest Screen in Expression Blend 4.
  • 1
  • 0
  • 3636

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: 

1.png

Step 3

Select ToolBox -> StackPanel as shown below:

2.png

Step 4

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

3a.png

3b.png

Step 5

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

4a.png

4b.png

4c.png

Step 6

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

5.png

Step 7

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

6a.png

6b.png

6c.png

Step 8

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

7.png

Step 9

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

8.png

Step 10

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

9.png

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

10.png

Step 11

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

11.png

12.png

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:

13a.png

13b.png

Summary

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

COMMENT USING

Trending up