ControlTemplate to button with images - Silverlight for WP7 - silverlight

Question

I have a ControlTemplate which targets a button control. The ControlTemplate has two images for the normal and pressed states, one for each. I want to use this ControlTemplate in 8 different buttons in the screen, each one with a diferent image in front of it.
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates1">
<VisualState x:Name="Pressed1">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal1"/>
<VisualState x:Name="Disabled1"/>
<VisualState x:Name="MouseOver1"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates1">
<VisualState x:Name="Focused1"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates"/>
<VisualStateGroup x:Name="FocusStates"/>
</VisualStateManager.VisualStateGroups>
<Image x:Name="image" Source="source1" />
<Image x:Name="image1" Source="source2" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
How can I put a third image inside the template that can receive a different source for each button?
Something like this:
<Button Template="{StaticResource ButtonControlTemplate1}" thirdImage="source_to_third_image"/>

Answer 1

Why not just use the Content property for your third image?
Your ControlTemplate will look like this:
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
<Grid>
...
<ContentPresenter Content="{TemplateBinding Content}" />
<Image x:Name="image" Source="source1" />
<Image x:Name="image1" Source="source2" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
And your button declaration will look like this:
<Button>
<Image Source="source3" />
</Button>
Then you just need to add a relevant visual state.

Answer 2

From what I understand in your question, you're looking to implement attached properties.
Since the button itself does not carry properties for three separate image sources (you could hack around the Content property, but that would be a pain), you will need to implement those and simply perform standard binding from your template.