exotribe

Say you are working on your new Silverlight 2.0 Beta 1 application. You know you are going to build some slick custom styles, but you do not have the styles ready yet. You want to proceed with your application development, but want to put in placeholders for the upcoming styles.

For this example, I'm going to borrow a bit of the sample code from WPF in Action with Visual Studio 2008. The sample code builds a simple calculator user interface, then proceeds restyle the buttons with a custom template.

First create the calculator user interface (see Page_step_one.xaml in the attached solution). The markup for the buttons looks like:

<Button Grid.Column="0" Grid.Row="2" Content="7" />

We know that when the new button style is ready, we are going place the style in the application resources with the key calcButtonStyle. So lets add the style to the button:

<Button Grid.Column="0" Grid.Row="2" Content="7"

        Style="{StaticResource calcButtonStyle}"/>

However, we have one problem. Visual Studio provides us with this error:

Cannot find a Resource with that Name/Key

So, we are stuck - we don't have the anticipated custom style yet, and therefore, we can't specify the style even though we know what the name will be.

Except, we can create an empty style place holder in the application's App.xaml:

<Application.Resources>
    <Style x:Key="calcButtonStyle" TargetType="Button" />
</Application.Resources>

Now we can go ahead and add the style tag to all of our buttons (see Page.xaml in the attached solution).

When we are ready, we can add the completed style to the application resources, and not have to change any markup in Page.xaml.

The attached solution contains the custom calc button style used to produce this screen shot.

The attached code is by no means complete (for starters, there is not logic that implements any calculator functions). The custom control template does not provide storyboards for the button states (Normal State, MouseOver State, Pressed State, or Disabled State). For a more complete button control template example read Corrina Barber's blog entry on Silverlight 2 Control Skins

Published May 4, 2008

Technorati Tags: Silverlight 2.0 Silverlight Styles

Attachment	Size
StyleLater.zip	5.74 KB

Trackback URL for this post:

http://www.exotribe.com/trackback/70