Now that we have the core layout of our chat application defined, let's add some controls to it and start to customize how it looks.

We'll start by selecting the root Grid layout panel and customize its background color to be a blue gradient.  One easy approach we can use to select a particular control is to use the "Interaction" panel and then click the control we want to select within it:

Figure 19

We can then use the "Brushes" property panel to customize a blue LinearGradient brush for the background of our Grid

Figure 20

Once we have this set we'll work on the bottom of our chat window, and add a "Send" button to it:

Figure 21

For our chat message textbox we'll use a standard textbox.  But to add a little more pizzazz we'll first add a border control with a "RoundRadius" of 5 and a Background and BorderBrush like so:

Figure 22

We'll then embed our TextBox within the Border control. 

Important Tip: To nest the TextBox within the Border control using the design-surface, we'll want to double-click the Border control within the interaction window.  This will set it as the active insertion control in the design surface, and highlight it in yellow like below:

Figure 23

We can then use the control toolbox to select a TextBox control and add it into the Border control.  We'll set the TextBox's background and border brush to pick up the nice curved look from the parent Border control:

Figure 24

The XAML markup generated by Blend will look like below (notice how the TextBox is nested under the Border control - it wouldn't have been if the Border hadn't been the active insertion control):

Figure 25

We can repeat the above process for the header row as well, and embed a TextBlock within a Border control and add a image control to the right column to create UI like so:

Figure 26

The XAML markup generated by Blend looks like below:

Figure 27

Last but by no means least, we'll add another Border control in our center row and add a ListBox control inside it.  We'll configure the Border control to stretch across both columns in our Grid, and customize its background and foreground colors.  We'll then put some test message inside the ListBox as placeholder text (we'll customize the UI and databind real values later):

Figure 28

The XAML markup generated by Blend looks like below:

Figure 29

And now when we run the application we have a basic chat IM client (with hard coded values) running in the browser.  As we resize the browser the application will automatically flow and resize to fit the window.

Figure 30

We still have a bunch of UI work to-do to make our IM client look less lame, but at least we now have something up and running.