Search code examples
xamluwpwin-universal-appbehavioreventtrigger

ToggleButton EventTriggerBehavior- binding image to background of togglebutton


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 ?


Solution

  • 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.