ToggleButton EventTriggerBehavior- binding image to background of togglebutton - xaml

Question

i have the following code in my xaml :
<ToggleButton x:Name="play" Command="{Binding OnPlayButton}" CommandParameter="{Binding ElementName=media , Mode=TwoWay}" HorizontalAlignment="Left" Margin="573,638,0,0" VerticalAlignment="Top" Height="50" Width="50">
<Image Name="MyImage" Source="Images/Control/Play.png"/>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Checked">
<core:ChangePropertyAction PropertyName="MyImage" Value="{Binding Source=Images/Control/Pause.png}" />
</core:EventTriggerBehavior>
<core:EventTriggerBehavior EventName="Unchecked">
<core:ChangePropertyAction PropertyName="MyImage" Value="{Binding Source=Images/Control/Play.png}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ToggleButton>
What i'm trying to achieve is change the background of the togglebutton to pause.png when its clicked and change it to play.png when clicked again. I'm getting exception in the xaml , is this the correct way ?

Answer 1

You are almost there with Behaviors. But PropertyName is Not Image It is Source. And TargetObject is MyImage
Your code should be something like below.
<ToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" IsChecked="True">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Checked">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyImage}" PropertyName="Source" Value="Images/Control/Pause.png" />
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="Unchecked">
<Core:ChangePropertyAction TargetObject="{Binding ElementName=MyImage}" PropertyName="Source" Value="Images/Control/Play.png"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<Image x:Name="MyImage" Source="Images/Control/Play.png" Width="100" Height="100"/>
</ToggleButton>
Good Luck.

Answer 2

You can't use PropertyName="MyImage" as "MyImage" is the name of a control, not a property of ToggleButton!
The easiest way to do what you want is to add the two images one after the other and change visibility according to the control state:
<ToggleButton x:Name="play">
<Image Source="Images/Control/Play.png" Visibility="{Binding IsChecked, ElementName=play, Converter={StaticResource BooleanToVisibilityConverter}" />
<Image Source="Images/Control/Stop.png" Visibility="{Binding IsChecked, ElementName=play, Converter={StaticResource InverterBooleanToVisibilityConverter}" />
</ToggleButton>
On the example above I'm using two converter instances for something that converts a bool value to a Visibility value. You can write your own or just use a 3rd party one like the BooleanToVisibilityConverter from Cimbalino Toolkit.