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


Creating 2D Data-bound Applications with XAML and Expression : Page 2

Gain graphics and data-binding power you've only dreamed of with the new capabilities in the Windows Presentation Foundation and the new Expression tool.

Getting Started
To get started, fire up Expression, start a new project, and select a Windows EXE project type. Expression prepares a new application containing a single scene, called Scene1.xaml, as shown in Figure 3.

Figure 3. New EXE Application: Here's how a brand-new EXE application project looks in Expression, with a blank scene.
The application follows a Master/Details pattern. It will show a list of products on the left. When a user selects an item, it will show the details for that item on the right. To implement an application like this you use a splitter to break the scene into two independent panes. To do that, place a Grid control on the scene and then place a splitter inside the grid. The Grid control is visible in the controls contained in the Library Panel, simply select it and draw out the area that you want the Grid to occupy on the scene.

At the bottom of the screen you'll see a Timeline panel containing all the elements. Note that a new Grid has been added. Rename it to ProductGrid. When you select the grid, Expression draws a yellow border around it in the designer, and an additional blue border to the top and to the left.

Hover over the blue border with your mouse and a red bar will appear. This bar will be the location of your splitter. Set it to a place that you are happy with, and click on it to split the grid into two columns. See Figure 4 for an example.

Figure 4. Splitting the Grid: The figure shows the Expression designer after splitting the Grid into two columns or panes.
You add content to a pane using the ContentControl control, which acts as a parent to store a single control within the grid.
Author's Note: When you want to store more than one control in a ContentControl, store a Panel control within the ContentControl. The Panel can contain many child controls.
Drag the ContentControl onto the left pane of the Grid.

This ContentControl will form the container for the master list of products you saw earlier. As such it needs to fill its complete pane. At this point it's good to rename it something such as Master.

Resizing the ContentControl is a little different in Expression/XAML than you are used to in the Visual Studio.NET designer. You'll need to select the ContentControl and edit its layout properties. If you don't see a Layout panel near the tools on the right hand side of the screen, drop down the View menu, and select "Layout." To make the ContentControl fill its parent column, set the Width and Height to NaN, which means "Not a Number" (see Figure 5), its Alignments to Stretch, and its Margins all to zero pixels (see Figure 6).

Figure 5. Using the Layout Panel: The figure shows the Margin settings for the ContentControl that will contain the master list in the sample application.
Figure 6. Using the Layout Panel: The figure shows the Alignment and Margin settings for the ContentControl that will contain the master list in the sample application.
Figure 7. ContentControl Placement: The figure shows how the Expression designer should look after placing the Master and Details panes.

Next, Manually draw another ContentControl anywhere within the right hand (Details) side of the grid. Name this control Details. As a quick check of where you should be now, refer to Figure 7.

Set the Details control's layout for Size and Margin in the same way that you set the other one, except in this case, give it a left margin of 20 pixels. This will create a space between the two panes. You'll put a splitter control in this space which will handle all split and window resizing automatically for you at runtime (you'll see what this means later if you're a little lost now)

From the toolbox, select a GridSplitter control and draw it in the space between the Master and Details panes. It should fill in with a rectangle. Remember this is all XAML, so it is vector-graphic based. You can use the zoom tool at the bottom of the scene to zoom in and get more precision when drawing the splitter.

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