I need to use an image as the background on a button based on the status of a boolean property. The way I'm trying to do it is by having two different styles, Style1 and Style2 and use one depending on the status of the property but I'm getting an error.
Here are the styles...
<Window.Resources>
/// Animations to animate background images on hover<Storyboard x:Key="MouseOverStoryboard" Duration="00:00:00.5"><DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00.3" /><DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3" /></Storyboard><Storyboard x:Key="MouseLeaveStoryboard" Duration="00:00:00.5"><DoubleAnimation Storyboard.TargetName="image1" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.3" /><DoubleAnimation Storyboard.TargetName="image2" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00.3" /></Storyboard>
/// STYLE1<Style x:Key="Style1" TargetType="{x:Type Button}"><Style.Setters><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Image x:Name="image1" Source="Images/image1.png" Stretch="None" /><Image x:Name="image2" Source="Images/image1-hover.png" Stretch="None" Opacity="0" /><ContentPresenter /></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><StopStoryboard BeginStoryboardName="MouseLeaveStoryboard" /><BeginStoryboard Name="MouseOverStoryboard" Storyboard="{StaticResource MouseOverStoryboard}" /></Trigger.EnterActions><Trigger.ExitActions><StopStoryboard BeginStoryboardName="MouseOverStoryboard" /><BeginStoryboard Name="MouseLeaveStoryboard" Storyboard="{StaticResource MouseLeaveStoryboard}" /></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style.Setters></Style>
/// STYLE2<Style x:Key="Style2" TargetType="{x:Type Button}"><Style.Setters><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Image x:Name="image1" Source="Images/image2.png" Stretch="None" /><Image x:Name="image2" Source="Images/image2-hover.png" Stretch="None" Opacity="0" /><ContentPresenter /></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><StopStoryboard BeginStoryboardName="MouseLeaveStoryboard" /><BeginStoryboard Name="MouseOverStoryboard" Storyboard="{StaticResource MouseOverStoryboard}" /></Trigger.EnterActions><Trigger.ExitActions><StopStoryboard BeginStoryboardName="MouseOverStoryboard" /><BeginStoryboard Name="MouseLeaveStoryboard" Storyboard="{StaticResource MouseLeaveStoryboard}" /></Trigger.ExitActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style.Setters></Style> </Window.Resources>
Here I'm appying the Styles based on the status of the SomeBooleanProperty, but I'm getting an error.
<Button x:Name="MyButton" Command="{Binding ButtonCommand}"><Button.Style><Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}"><Style.Triggers><DataTrigger Binding="{Binding SomeBooleanProperty}" Value="True"><Setter Property="Style" Value="{StaticResource Style1}" /></DataTrigger><DataTrigger Binding="{Binding SomeBooleanProperty}" Value="True"><Setter Property="Style" Value="{StaticResource Style2}" /></DataTrigger></Style.Triggers></Style></Button.Style></Button>
Error Message
Style object is not allowed to affect the Style property of the object to which it applies.
Any idea how to apply a background image to a button based on the status of a boolean property?