One of the things I talked about in my Part 7: Using Control Templates to Customize a Control's Look and Feel Digg tutorial was about how Silverlight and WPF allow developers and designers to completely customize the look and feel of controls.  This provides a tremendous amount of flexibility to sculpt the UI of an application and create exactly the user experience desired.

We could use the Control Template feature of Silverlight and WPF to customize the Send button and the ListBox structure in our chat application above to have a little more of a polished look and feel.  We could do this by creating "MessageHistory" and "SendButton" style resources that we store within the App.xaml file of our project.  Each of these style objects would then have a Control Template that overrides the look and feel of the control and changes its visual structure.

Note: the Blend 2.5 March preview release of Blend you have to define control templates in source-view.  In future preview releases you'll be able to use the designer to define them as well.  This feature is already available for WPF projects if you want to play with it - just create a WPF project to try it out.  

For example, the below ListBox Control Template could be used to remove the outer double border around the ListBox control and define a "flat" look with just a scroll-bar for the list container:

Figure 44

Applying this template to our ListBox would then cause it to render with a much flatter look around the edges:

Figure 45

We could get even fancier with our Button control template, and not only define a custom button shape - but also define various story-board animations to apply to the shape to provide custom UI behavior when it is in "MouseOver", "Pressed", or "Normal" states (these can all be encapsulated within the Style definition - meaning the page developer never has to-do anything to enable them):

Figure 46

Once we have our "MessageHistory" and "SendButton" style objects defined, it is easy to use Expression Blend to apply them to controls on the design-surface.  

Clicking on the "Resources" tool Window within Expression Blend lists all of the resource locations within our project:

Figure 47

We can expand the "App.xaml" node to see the styles that are available for us to use within it.  To apply a particular style to a control on the page, we can simply drag/drop it onto the control.  For example, here is what our send button control looks like before we apply the "SendButton" Style:

Figure 48

Dragging/dropping the SendButton style onto it will change it to our custom Control Template shape/structure:

Figure 49

Because our "SendButton" style has state animations defined within it, the button will change at runtime depending on how the end user interacts with it. 

By default the button will look like this:

Figure 50

When an end user moves the mouse over it the balloon will subtlety change to a lighter color:

Figure 51

When in the push down state the button will depress and its shadow will disappear:

Figure 52

When released the button will pop back up.

These subtle animations and interactivity gestures can add some really nice polish to an application.  Best of all, a designer can build and customize this functionality entirely themselves - the developer implementing the page functionality does not have to be involved nor write any code to enable it.

In future preview releases of Expression Blend 2.5 designers will be able to not only define the shape/structure of this button - but also define all of the animation transitions for it - entirely using the design surface (no source editing or coding required).