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:
Applying this template to our ListBox would then cause it to
render with a much flatter look around the edges:
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
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
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:
Dragging/dropping the SendButton style onto it
will change it to our custom Control Template shape/structure:
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:
When an end user moves the mouse over it the
balloon will subtlety change to a lighter color:
When in the push down state the button will depress and its
shadow will disappear:
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).