how to parametrize button style in WPF xaml - wpf

Question

I'm trying to create a template button with a specific effect that can receive 2 background images as parameters (for button pushed and released). this template is implemented in a user control library :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SwitchesLibrary">
<Style x:Key="PushButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Border x:Name="ButtonPressedOnClick" Opacity="0" CornerRadius="5" Background="{DynamicResource ButtonPressed}" BorderThickness="1">
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ButtonPressedOnClick" Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="1.0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder" Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="0.0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{DynamicResource ButtonReleased}"/>
</Style>
I use it in another user control library, but i don't know how to send the parameters {DynamicResource ButtonReleased} and {DynamicResource ButtonPushed}
:
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/SwitchesLibrary;component/PushButton.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Button Name="ButtonA" Style="{StaticResource PushButton, ButtonPressed="Images/PushButtons/A_Pushed.png", ButtonReleased="Images/PushButtons/A_Released.png"}" HorizontalAlignment="Left" Height="44" VerticalAlignment="Top" Width="42" Click="ButtonA_Click" Margin="69,112,0,0"/>

Answer 1

The closest solution to 'parameterizing' a Style would be to override the image resources in the Button itself, but this would be rather verbose and cumbersome to do more than a few times:
<Button Style="{StaticResource PushButton}">
<Button.Resources>
<ImageBrush x:Key="ButtonPressed"
ImageSource="Images/PushButtons/A_Pushed.png" />
<ImageBrush x:Key="ButtonReleased"
ImageSource="Images/PushButtons/A_Released.png" />
</Button.Resources>
</Button>
If this is something you're going to use more than a couple times, it's worth investing a little more time upfront to make your image button easier to use. Wouldn't it be more convenient to type this instead?
<l:ImageButton NormalImage="Images/PushButtons/A_Released.png"
PressedImage="Images/PushButtons/A_Pushed.png" />
If you like the look of that, then the first step would be to write a simple ImageButton class and define dependency properties for the images representing the various button states:
public class ImageButton : Button
{
public static readonly DependencyProperty NormalImageProperty =
DependencyProperty.Register(
"NormalImage",
typeof(ImageSource),
typeof(ImageButton),
new PropertyMetadata(default(ImageSource)));
public ImageSource NormalImage
{
get { return (ImageSource)GetValue(NormalImageProperty); }
set { SetValue(NormalImageProperty, value); }
}
public static readonly DependencyProperty PressedImageProperty =
DependencyProperty.Register(
"PressedImage",
typeof(ImageSource),
typeof(ImageButton),
new PropertyMetadata(default(ImageSource)));
public ImageSource PressedImage
{
get { return (ImageSource)GetValue(PressedImageProperty); }
set { SetValue(PressedImageProperty, value); }
}
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(
typeof(ImageButton),
new FrameworkPropertyMetadata(typeof(ImageButton)));
}
}
The second step is to define a default style for your ImageButton. To do this, create a Themes\Generic.xaml resource dictionary in the project where ImageButton is declared. Make sure the Build Action is set to 'Page' in the Properties pane. Implement your default style here, for example:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="clr-namespace:TestApp">
<Style TargetType="l:ImageButton"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="l:ImageButton">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Image x:Name="image"
Source="{TemplateBinding NormalImage}"
Stretch="None"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="image"
Property="Source"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedImage}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Check your project's AssemblyInfo.cs file and make sure you have an attribute like this (and add it if you don't):
[assembly: ThemeInfo(
// Where theme specific resource dictionaries are located
// (used if a resource is not found in the page, or application
// resource dictionaries)
ResourceDictionaryLocation.None,
// Where the generic resource dictionary is located
// (used if a resource is not found in the page, app, or
// any theme specific resource dictionaries)
ResourceDictionaryLocation.SourceAssembly
)]
And now you're ready to go!
<l:ImageButton NormalImage="Images/PushButtons/A_Released.png"
PressedImage="Images/PushButtons/A_Pushed.png" />