A third way to handle Templated Buttons & Images

In yesterday’s blog post I suggested that there were two solutions to crating a templated button that used an image. One was to create a different template for each image (yuck) and the other was to create a custom temlpated button.

A third, and excellent alternative was suggested to me by email by Justin Angel, and that is to set the images as Resources in Expression Blend. Then, you can add buttons to your pages, and apply the template (which will control such things as how they behavior in response to a mouse over, and you can apply the Resource as a background.  Very nice.

Here is how I did it to get the effect I wanted.  (NB: this will all be shown in detail in a forthcoming video, and is summarized here very quickly):

1. 1. I copied the source code from the previous project to my new project as a starting point
2. I threw away the button templates
3. I added four stock photos to my project and one by one added them to the design surface, and clicked on them and then selected Tools –> Make Brush Resource –> Make Brush Resource and when presented with the dialog box gave each a name, and made it an application resource…

Thus I ended up with four resources, each usable as a background.

4. Next I created a single template for my button, but this time instead of making a template from scratch, a made a copy of the existing template.  A little spelunking and I was able to discard the cowl that made the background hard to see, and I changed the mouse-over behavior to bounce like a silly Mac-dock entry and I modified the pressed behavior as well.

   1: <vsm:VisualState x:Name="MouseOver">

   2:     <Storyboard AutoReverse="True" RepeatBehavior="Forever">

   3:        

   4:        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 

   5:           Storyboard.TargetName="Background" 

   6:             Storyboard.TargetProperty="(UIElement.RenderTransform).

   7:              (TransformGroup.Children)[3].(TranslateTransform.Y)">

   8:                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-10"/>

   9:                 <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>

  10:        </DoubleAnimationUsingKeyFrames>

  11:           <!-- you get the idea -->

  12:         <Storyboard.TargetName="CurvedBevel" 

  13:         <Storyboard.TargetName="Accent" 

  14:         <Storyboard.TargetName="contentPresenter" 

  15:     </Storyboard>

  16: </vsm:VisualState>

Finally, I added a stack panel to hold the buttons and added four regular buttons. For each one, I set its background to one of the resources (giving each a nice picture background) and dragged the template on (giving them all the templated changes) and then set the content (which I was able to do because buttons do have a contentPresenter) and the font, font color and font size.  The net effect was much cleaner than 4 templats and the only code that had to change at all was rewiring the 4 button event handlers.

A video on all this will be forthcoming as soon as I get back from vacation.

Thanks.