Silverlight - Passing values into a style element - silverlight

Question

So I've been playing around with Silverlight's button styling and, personal feelings about just how much effort you have to put in to do a simple on/off state, I was wondering if anyone could tell me how to change what I've got so far so that I could use any images for the on and off states, and not have 7 x 60 lines of XAML for each button.
<UserControl x:Class="Reader.LanguageSelection"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="1280">
<UserControl.Resources>
<Style x:Key="btnLangStyle" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-28" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLangEn_off" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-30" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnLang_en" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image x:Name="btnLangEn_off" Margin="27,24,-27,-24" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
<Image x:Name="btnLangEn_on" Margin="33,23,-33,-23" Opacity="0" Source="Resources/Images/btnLangEn_off.png" Stretch="Fill" RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Canvas Width="1280" Height="800">
<Button x:Name="btnLangEn" Width="93" Height="63" Click="btnLangEn_Click" Canvas.Left="417" Canvas.Top="463" Style="{StaticResource btnLangStyle}" />
<Button x:Name="btnLangEs" Width="93" Height="63" Content="Español" Click="btnLangEs_Click" Canvas.Left="503" Canvas.Top="576" />
<Button x:Name="btnLangDe" Width="93" Height="63" Content="Deutsch" Click="btnLangDe_Click" Canvas.Left="768" Canvas.Top="463" />
<Button x:Name="btnLangFr" Width="93" Height="63" Content="French" Click="btnLangFr_Click" Canvas.Left="593" Canvas.Top="463" />
<Button x:Name="btnLangIt" Width="93" Height="63" Content="Italian" Click="btnLangIt_Click" Canvas.Left="682" Canvas.Top="576" />
<Button x:Name="btnLangDa" Width="93" Height="63" Content="Danish" Click="btnLangDa_Click" Canvas.Left="593" Canvas.Top="686" />
</Canvas>
</Grid>
The images named btnLangEn_off and btnLangEn_on are obviously specific to one type of button, but I need a way of applying that style to all of my buttons, telling the style which images to render for each state.
Thanks,
Greg.

Answer 1

Per my comments here is an example that I worked up. Note that I have not tested this so it may not work perfectly, but you should get the general idea.
CodeBehind
public partial class CustomButton : Button
{
public static readonly DependencyProperty OnImageProperty =
DependencyProperty.Register("OnImageSource",
typeof (ImageSource),
typeof (CustomButton),
new PropertyMetadata(null));
public static readonly DependencyProperty OffImageProperty =
DependencyProperty.Register("OffImageSource",
typeof (ImageSource),
typeof (CustomButton),
new PropertyMetadata(null));
public CustomButton()
{
InitializeComponent();
Binding offBinding = new Binding
{
Source = this,
Path = new PropertyPath(OffImageProperty)
};
OffImage.SetBinding(Image.SourceProperty, offBinding);
Binding onBinding = new Binding
{
Source = this,
Path = new PropertyPath(OffImageProperty)
};
OnImage.SetBinding(Image.SourceProperty, onBinding);
}
public ImageSource OffImageSource
{
get { return (ImageSource) GetValue(OffImageProperty); }
set { SetValue(OffImageProperty, value); }
}
public ImageSource OnImageSource
{
get { return (ImageSource) GetValue(OnImageProperty); }
set { SetValue(OnImageProperty, value); }
}
}
XAML
<Button x:Class="CustomButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Button.Resources>
<Image x:Name="OffImage"
Margin="27,24,-27,-24"
Opacity="0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
<Image x:Name="OnImage"
Margin="33,23,-33,-23"
Opacity="0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
</Button.Resources>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background"
Value="#FF1F3B53" />
<Setter Property="Foreground"
Value="#FF000000" />
<Setter Property="Padding"
Value="3" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9"
Offset="0" />
<GradientStop Color="#FF8399A9"
Offset="0.375" />
<GradientStop Color="#FF718597"
Offset="0.375" />
<GradientStop Color="#FF617584"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-28"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-25"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="OffImage"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-30"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
<DoubleAnimation Duration="0"
To="-20"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="OnImage"
d:IsOptimized="True" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>