Silverlight provides the ultimate in flexibility when it comes to styling controls.  If you don’t like how something looks you can tweak the template in a tool like Expression Blend quickly and easily and get something completely different.  This post is geared towards those of you who may just be getting into Silverlight.  My goal is to demonstrate how easy it is to change controls using a simple example that I just went through on a client application.

Being able to change a control’s template comes in handy when you don’t like the built-in style used by the framework.  I’m working on a menu used in a client application and the disabled state of the HyperlinkButton control wasn’t looking too good.  I thought the control looked butt ugly and was unreadable in the disabled state.…just sayin’.  :-)  I wasn’t looking to do anything fancy, but did want to make it obvious that the control was disabled while still making it easy for the end user to read the text.  Here’s what the menu looked like when two HyperLinkButton controls were disabled using the built-in control template:

I don’t know about you, but “Edit Job” and “Job Plan” look pretty bad in my opinion.  They’re definitely disabled (or possibly just plain dead), but they could both look better.  As mentioned earlier, Silverlight allows any control to be changed by simply modifying the control’s template.  The easiest way to do this is to use Expression Blend although you can do it in Visual Studio 2008 by hand as well.  When the control to tweak is placed on the Blend design surface you can right-click on it and select Edit Template –> Edit a Copy:

From there you can give the new style a name, specify where it should be stored and then click OK:

Once the style is created you’ll be able to see it in Blend and locate an element named DisabledOverlay.  In my case this was the culprit of the ugliness. 

I ended up adjusting the Foreground color of the DisabledOverlay to black and set the Opacity to .4 using the properties window.  However, doing that isn’t quite enough.  The HyperlinkButton template places the DisabledOverlay TextBlock over the actual link content when the control is disabled.  That’s why you get the semi blurry effect because two pieces of text are showing.  I decided I wanted to hide the contentPresenter element when the control was disabled and just show the DisabledOverlay instead since it looked a lot cleaner.  Fortunately that’s quite easy to do.  Internally the control template uses the VisualStateManager to show and hide the DisabledOverlay.  I went into the disabled state and changed it to hide the contentPresenter.  That’s done by clicking on the States tab followed by the Disabled state:

Any changes you make to the contentPresenter are now tracked for that state so I clicked on contentPresenter and then set is Visibility property to Collapsed for the Disabled state:

Doing that modifies the disabled state.  Here’s what the XAML looks like (I cleaned it up slightly).  You can see that it causes the contentPresenter’s Visibility to be set to Collapsed:

<VisualState x:Name="Disabled">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
</VisualStateGroup>

From there I simply applied the style and newly created template to each HyperlinkButton control:

<HyperlinkButton Style="{StaticResource MenuHyperlinkButtonStyle}" Content="Job Plan" />

The end result is a menu that looks much better (in my opinion anyway) when the controls are disabled.  Here’s a before and after image:

Before:

After:

This is a really simple example of modifying control templates but you can literally tweak any aspect of a control to get things looking just like you want them to look.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.