Toggle button - change icon on click

Question

I have an app in WPF. I am using entypo icons and i decalred one as a resource:

<Grid.Resources>
  <iconPacks:Entypo x:Key="PlayIcon" Width="50" Height="30" Kind="ControllerPlay"></iconPacks:Entypo>                              
</Grid.Resources>

Let's say I have two icons like this ( play/pause icon) and I want to change between them when the user clicks on ToggleButton. I came up with something like this, but unfortunately, it's not working:

<ToggleButton>
   <Image>
      <Image.Style>
          <Style TargetType="{x:Type Image}">
             <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
                 Value="true">
                    <Setter Property="Source"
                     Value="{StaticResource PauseIcon}" />
                 </DataTrigger>
                 <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}"
                  Value="false">
                     <Setter Property="Source"
                      Value="{StaticResource PlayIcon}" />
                 </DataTrigger>
              </Style.Triggers>
            </Style>
       </Image.Style>
   </Image>
</ToggleButton>

Could anyone tell me if I can achieve it like this (with slight modifications) or point me into right direction?

Answer 1

You can't set the Source of an Image to a PackIconEntypo. Set the Content property of the ToggleButton instead:

<ToggleButton>
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="{StaticResource PlayIcon}" />
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter Property="Content" Value="{StaticResource PauseIcon}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>