RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Code-Free User-Interface Design with Expression Blend : Page 2

Find out how easy user-interface design is with Microsoft's new, full-featured design tool.

Creating the User Interface
First, launch Microsoft Expression Blend and create a new project. There are two types of projects you can create using Expression Blend:
  • Standard Windows application
  • Control Library
You can also choose the language you want to use for the project. At the moment, only Visual C# and Visual Basic are supported.

This article will focus on building a standard Windows application. Choose the Standard Application (.exe) project type and name the project SimpleAnimation. Click OK.

The project will now be created and you will see the environment as shown in Figure 1. You can view your project in two different workspaces:

  • Design Workspace
  • Animation Workspace
The Design Workspace is shown in Figure 1 with the various parts of the workspace labeled.

Figure 1. Design Workspace: Expression Blend in the Design Workspace view.
Figure 2. Animation Workspace: Expression Blend in the Animation Workspace view.

The Animation Workspace rearranges the various panels and places the Interaction panel at the bottom of the page so that it has a bigger area of focus. You can switch to the Animation Workspace by selecting Window—>Animation Workspace (or press F7). Figure 2 shows Expression Blend in Animation Workspace view.

The Project section shows the various files in your projects. Note that the UI of the window is generated using XAML code (Windows1.xaml) and the business logic is stored in a code-behind file (Window1.xaml.cs). Double-clicking on the code-behind file will launch Visual Studio 2005.

Now, add some controls to the window. First, you'll add an image to the window and then you'll perform some simple animation on it.

Select the Canvas panel in the Toolbox and double-click it to add an instance to the window. A Canvas panel acts as a container for other controls/panels.

Once the Canvas panel is added to the window, add an Image control onto the Canvas panel. To do so, click on the Asset Library item in the Toolbox and the Asset Library window will open (see Figure 3). Tick the Show All checkbox and double-click on the Image control.

The Image control now appears in the Toolbox. Double-click on the Image control in the Toolbox to add it to the window.

Figure 3. Add an Image Control: Select the Image control from the Asset Library.
Figure 4. The Canvas Panel: Drag and drop the Image control onto the Canvas panel.

If you observe the Objects and Timeline window, you will notice that the Image control is on the same level as the Canvas panel (see left of Figure 4). To ensure that the Image control is contained within the Canvas panel, drag and drop it into the Canvas panel, as seen on the right of Figure 4.

Next, set the Image control to display a picture. To do so, select the Image control in the Objects and Timeline window and click the Properties Inspector window. Click the “…” button next to the Source drop down list and select an image.

After resizing on the Canvas panel and Image control, the window should look like Figure 5.

So far, you've been building the UI of the application visually using drag and drop. The XAML code is automatically generated as you build the UI. To view the XAML code, click on the XAML tab located on the Artboard (see Figure 10).

Figure 5. The Results: The finished look of the UI.
Figure 6. The XAML Code: Viewing the XAML code in the Artboard.

If you prefer, you can always build the UI by writing XAML code directly into the editor. The following is the XAML code for the UI that you've just built:

Figure 7. The Results: Your application with the image.

   Width="391" Height="308">
   <Grid x:Name="LayoutRoot">
      <Canvas HorizontalAlignment="Left" 
         Margin="19,24,0,116" Width="130">
         <Image Width="131" Height="131" Canvas.Top="1" 
Press F5 to test view your application now. Figure 7 shows the window with the image displayed.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date