Styles and Templates
I’m about to release a tutorial and a few videos on Styles and Templates. To set the stage, I wanted to discuss one aspect of templating in Silverlight that is in some ways revolutionary.
The designers of the Silverlight 2 control libraries established from the outset that there would be an absolute decoupling of the control logic (as implemented by event handlers) from the User Interface. This allows the UI to be dictated entirely by Tempolates, (and the Visual State Machine) and in turn that allows templates to be written entirely in Xaml and to consist of a combination of graphic primitives and story boards (transitions).
This means that every control is lookless.
The appearance of all the controls in the toolbox is just the appearance provided by the “out of the box” template assigned to it by the control creator. It has no more intrinsic validity than any other skin you might put on the control.
Say what?
That means you are absolutely and 100% free to use the button as is, or to make it look like a dog, and have it bark when pressed. Or, consider the images shown here. Both sets show buttons being before and after being clicked. Other than aesthetics and convention, there is nothing that makes one set more correct than the other.
The Possible States are Defined and Embedded in Metadata
Both “looks” are equally valid, and both buttons send exactly the same click event. Since the designer of the out of the box button was kind enough to embed all the button’s state information in the button’s meta-data (e.g., “I have the states Normal, MouseOver, MouseDown, Disabled, Focus and NotFocused), and since Expression Blend reads that meta data and makes editing the appearance and behavior astonishingly easy, it is not only valid to change it to a round, spinning, dipping shape, it is (to be honest) fun.
Three Ways To Modify Controls
As you will see in the tutorial to be release within the next day or so, I distinguish among three ways to modify the look of a control:
1. “In line” attributes
2. Style objects
3. Templates
In Line Attributes
Very briefly, the first of these we all do all the time. This is as simple as adding such UI controlling attributes as HorizontalAlignment="Left" to the Xaml. It is fielder’s choice as to whether you set these attributes directly in Xaml or let Blend set them for you as you create your UI
Styles
The second is a more formal approach in which you create a Style object that can be applied to multiple controls to provide a uniform look to controls used in the same way. The cannonical example is TextBlocks used as labels.
You might decide that all labels in your application will be
- Foreground=”Black”
- FontFamily=”Verdana”
- FontSize=”18”
- VerticalAlignment=”Bottom”
- HorizontalAlignment=”Right”
- Margin=”10,0,15,0”
Rather than having to repeat this for every TextBlock you can create a style (in the .xaml page or for the entire application in App.xaml) and then apply the style to each TextBlock used as a label like this:
<TextBlock x:Name="ProgMtl" Text="Pregressive Metal"
Grid.Row="2" Grid.Column="0" Style="{StaticResource LabelStyle}" />
<TextBlock x:Name="JazzLbl" Text="Jazz"
Grid.Row="2" Grid.Column="0" Style="{StaticResource LabelStyle}" />
In previous documents I showed how to set Styles by hand, but Blend makes this so easy and so much less error prone I’ve stopped hand-coding Styles.
Tempaltes
Templates is the big enchelada. With the advent of the Visual state Machine, and the use of storyboards for transitions between states (giving a much more natural look to your application) templates simultaneously free you to create the most dramatic and impressive changes to your application while virtually (but not literally) forcing you to use a tool like Blend to do so (you can hand-code anything if you are patient enough).
Much more on the details of Templates to come.