Creating A Form – Level 100

(click on the image to see other Mini-tutorials)

Turing Page [Novice: 4]  FAQ  Table of Contents

In Novice Page 3 we were about to create a form.  Here is  the form we’ll create:

Layout Is Easiest In Expression Blend

To create this form, I’ll begin by opening Expression Blend 3 and creating a new Silverlight Application,

If you’ve not reconfigured Blend it will open with numerous panels, some tabbed, some open as shown here:

A Quick Tour of Expression Blend

On the far left is the toolbar a small piece of which is shown here. Notice that some of the controls have a tiny white triangle next to them. Clicking on the triangle opens up related tools.

In the second image I’ve clicked on the triangle next to button and opened a panel with controls related to button.

Next to the toolbox are a number of tabbed panels including  Projects, Assets, States and Parts, below which is the Objects and Timeline Panel 

Note that the files in the Blend project are identical to the files in a Visual Studio project and you can and will have these files open in both applications at the same time.

In the center of the screen is the Design Surface otherwise known as the Art board. 

Also note the tiny control in the upper left corner of the Art-board that lets you switch between a grid and a canvas. Also note that surrounding the grid area (white) is a border (blue). You can use the border area to create rows and columns very quickly, as you’ll see in just a moment.

Expression Blend allows you to work in a WYSIWYG environment, but it also produces Xaml that corresponds to everything you do on the design surface. You can switch to split mode to see both the design and the Xaml.

In fact, every visible object in Silverlight is a CLR object that can be created in three ways:

1. In Code (as you’ll see much later in the book)

2. In Xaml (the markup language that we’ll be talking about quite a bit in this chapter)

3. By Drag and Drop into the design surface.

The design surface and the Xaml are two reflections of the exact same information. Dragging a control onto the design surface generates Xaml, and modifying the Xaml will be reflected on the Design surface.

The far upper right has three tabs:  the properties window where you set the properties of any object on the design surface,  Resources and  Data.

Xaml

XAML is the markup language for Silverlight. Think of it as HTML on steroids.

Xaml is an XML markup language (and thus is highly toolable; that is, it works very well with tools like Expression Blend and Visual Studio).

Xaml is highly expressive and can be used to describe not only layout (where to place controls) and standard forms-based controls (buttons, etc.) as well as graphics (ellipses, rectangles, etc.) but can also be used to declare transformations and animations of those objects, and much more.

Creating a Form for Data Input

Our goal is to create a simple form for data input, in which users will enter information about their favorite book.

We’ll build the form using the methodology of successive approximation also known by the technical term Get it working and keep it working. To tackle this, we’ll divide the work into three stages: laying out the controls, wiring up the events, and then, in subsequent chapters, connecting the data to data objects.

Layout Panels

There are quite a number of layout panels available, though the most common are

· Panel – the abstract base class for other, more specialized panels

· Canvas – Used for absolute positioning

· Stack Panel – For stacking objects on top of or next to one another

· Tab Panel – for tabbed layouts

· Docking Panel – for docking objects to the top, bottom or sides of your panel

· Grid – Probably the most frequently used panel. The grid allows you to create rows and columns and fill each “cell” with other controls.

Visual Studio and Expression Blend create a Grid panel for you by default. A grid is very much like an HTML Table, but a bit more powerful.

Creating Rows And Columns

Let’s start in the art board in Expression. To ensure that we have a grid, first hover over the small button at the top left corner. It will tell you if you are in Grid or Canvas mode; you want Grid.

You can now designate where you want your rows and columns. While hovering over the border a yellow line is drawn to show where your row will be created.

If you click, the line turns blue and the row is written to the Xaml.

The small open-lock symbol indicates that the rows are using relative spacing rather than absolute.

Looking At The Xaml Produced

To see the markup produced by drawing these lines, click on the “split” option on the small bar to the right of the art-board

Split mode can be a big help in relating the Xaml to the design.

(click on image to see larger version)

Creating The Rows and Putting In The Prompts

Looking at the image of the form at the top of this entry, you can see that you’ll need 11 rows. Go ahead and click on the left margin about 10 or 11 times, creating somewhat evenly spaced rows. Then move to the border on top, and click to create a pair of columns. 

As you add controls you can adjust the relative heights of each row (or the width of each column) to fit.

Start filling in the cells by adding the prompts for each row. Begin on the second row and reserve the first row for the title.

Adding Prompts

Click on TextBlock in the toolbox

Then drag with the mouse down to create a TextBlock in the left cell of the second row. Don’t worry about size or placement, you’ll fix that in the properties window.

With that in place, click next to it and then turn to the Properties window.  Name the TextBlock FullNamePrompt and set the alignments, margins and font size as shown here:

Once this is set, copy the control in the Objects and Timeline panel and then paste half a dozen copies,

The advantage of making these copies, and then editing each in the properties window is that you preserve the Alignments and Margins, font and font size; you then only have to set the name, text and row for each.

(A better solution is to use a style, which we’ll get to later in this series, and which you can read about now here or see a video about styles here).

Adding the Input Controls

When you’ve set all your prompts on the left side, it is time to add the input controls on the right.  The first five entry rows are TextBoxes,

[Note that entry is done with a TextBox and the prompts are TextBlocks – the two words are very similar but the controls are quite different]

Drag the first TextBox into place, and set its alignment to right and bottom), set the left margin to 5 and the other three to zero, and finally, set its with to 150 and its height to 25.

Next make four copies, and adjust their name and row for the next four data entry fields.

Date Picker

The sixth entry row, DateOfEntry) will get a DatePicker. To create one, click on the Chevron, which opens the advanced controls, and click on DatePicker,

This control has a lot of flexibility in its display; much of which can be set in the properties window,

For now, though, we’ll go with the defaults as shown.

Radio Buttons, Check Boxes and Stack Panels

The input for Level is three Radio Buttons. You can find a complete write up of using Radio Buttons here, but the key things to know are that you want all the Radio Buttons to share the same GroupName (so that they are mutually exclusive), you want one to have IsChecked clicked and, most important, you’ll want to put all the radio buttons into a stack panel. The stack panel will have its alignment set to stretch with no margins and its orientation set to horizontal.

Similarly the versions input is a pair of check boxes, and they too sit in a stack panel.

ListBox and ListBoxItems

Finally, the Tags are chosen from a ListBox (for now). To add the ListBox open the Chevron and drag the ListBox into place, and for now you can hardwire the choices by clicking on the Items collection and adding ListBoxItems.

(Click on the image to see a larger version)

Save everything. Keep Blend open, but also open this same project in Visual Studio

Take a look at the markup  in MainPage.xaml, you should find that the structure and syntax of Xaml is pretty easy to pick up when you compare the Xaml to the WYSIWYG design. 

Pretty Xaml

I find it much easier to read the Xaml if each property is on a line by itself. To accomplish that, open Tools->Options and click on the arrow next to Text Editor. Then open up Xaml and Formatting and click on General to set the rule that formatting should be done when you paste from clipboard or complete a tag and click on Spacing to set the rule that each attribute should be on a line of its own; as shown in the following composite image:

The Xaml that is produced becomes easier to handle, though it takes up a lot more room, as shown in the following small excerpt:

   1: <TextBox x:Name="Topic"

   2:          Height="25"

   3:          HorizontalAlignment="Left"

   4:          Margin="5,0,0,0"

   5:          VerticalAlignment="Bottom"

   6:          Width="150"

   7:          Grid.Column="1"

   8:          Grid.Row="7"

   9:          TextWrapping="Wrap" />

  10: <ListBox x:Name="Tags"

  11:          HorizontalAlignment="Left"

  12:          Margin="8,0,0,0"

  13:          Width="125"

  14:          Grid.Column="1"

  15:          Grid.Row="9"

  16:          BorderThickness="1,5">

  17:     <ListBoxItem  x:Name="Silverlight"

  18:                   VerticalAlignment="Bottom"

  19:                   FontFamily="Georgia"

  20:                   Content="Silverlight" />

  21:     <ListBoxItem x:Name="Expression"

  22:                  Content="Expression" />

  23:     <ListBoxItem x:Name="VisualStudio"

  24:                  Content="Visual Studio"

  25:                  IsSelected="True" />

  26:     <ListBoxItem x:Name="Blogs"

  27:                  Content="Blogs" />

  28: </ListBox>

  29: <StackPanel x:Name="ButtonsStack"

  30:             Margin="0"

  31:             Grid.Column="1"

  32:             Grid.Row="8"

  33:             Orientation="Horizontal">

  34:     <RadioButton x:Name="Level100"

  35:                  Margin="5,0,0,0"

  36:                  VerticalAlignment="Bottom"

  37:                  Content="100"

  38:                  GroupName="Levels"

  39:                  HorizontalAlignment="Left" />

  40:     <RadioButton x:Name="Level300"

  41:                  Height="17"

  42:                  Margin="5,0,0,0"

  43:                  Width="40"

  44:                  Content="300"

  45:                  d:LayoutOverrides="Height"

  46:                  HorizontalAlignment="Left"

  47:                  VerticalAlignment="Bottom"

  48:                  IsChecked="True"

  49:                  GroupName="Levels" />

  50:     <RadioButton x:Name="Level400"

  51:                  Height="17"

  52:                  HorizontalAlignment="Left"

  53:                  Margin="5,0,0,0"

  54:                  VerticalAlignment="Bottom"

  55:                  Width="40"

  56:                  Content="400"

  57:                  d:LayoutOverrides="Height"

  58:                  GroupName="Levels" />

  59: </StackPanel>

Your form is ready to go. Click Control-F5 to test it.