XAML Change the image source inside a Togglebutton

Question

I'm trying to change the image source (in XAML only) when the Togglebutton "IsPressed" is true. But when iam trying to bind that property via the ''Image.Trigger'' it's not working.

This is what I have right now and the image is showing exactly like I want it to.

<ToggleButton x:Name="pbStations"
              Template="{StaticResource ContentOnlyTemplateToggleButton}">
  <StackPanel Orientation="Horizontal">
    <Image Source="/Sprites/Misc/ExpanderButtonClose.png"
           Margin="2"
           Stretch="Uniform"
           x:Name="img">
    </Image>
    <TextBlock Text="STATIONS"
               x:Name="tbStations"
               Style="{StaticResource tbTriggerGray}" />
  </StackPanel>
</ToggleButton>

This is what I have tried that doesn't work:

<ToggleButton x:Name="pbStations"
              Template="{StaticResource ContentOnlyTemplateToggleButton}">
  <StackPanel Orientation="Horizontal">
    <Image Source="/Sprites/Misc/ExpanderButtonClose.png"
           Margin="2"
           Stretch="Uniform"
           x:Name="img">
      <Image.Triggers>
        <DataTrigger Binding="{Binding ElementName=pbStations,Path=IsPressed}"
                     Value="True">
          <Setter TargetName="img"
                  Property="Image.Source"
                  Value="/Sprites/Misc/ExpanderButtonOpen.png" />
        </DataTrigger>
      </Image.Triggers>
    </Image>
    <TextBlock Text="STATIONS"
               x:Name="tbStations"
               Style="{StaticResource tbTriggerGray}" />
  </StackPanel>
</ToggleButton>

Answer 1

Try to set triggers for Image inside the style for that Image. Here is the code

<ToggleButton x:Name="pbStations"
              Template="{StaticResource ContentOnlyTemplateToggleButton}">
    <StackPanel Orientation="Horizontal">
        <Image Margin="2"
               Stretch="Uniform"
               x:Name="img">
        <Image.Style>
          <Style TargetType="Image">
            <Style.Triggers>                                  
              <DataTrigger 
                    Binding="{Binding ElementName=pbStations,Path=IsPressed}"
                    Value="True">        
                <Setter Property="Source"
                        Value="/Sprites/Misc/ExpanderButtonOpen.png" />   
              </DataTrigger>
              <DataTrigger 
                    Binding="{Binding ElementName=pbStations,Path=IsPressed}"
                    Value="False">        
                <Setter Property="Source"
                        Value="/Sprites/Misc/ExpanderButtonClose.png" />   
              </DataTrigger>
            </Style.Triggers>
      </Style>
     </Image.Style>
        </Image>
        <TextBlock Text="STATIONS"
                   x:Name="tbStations"
                   Style="{StaticResource tbTriggerGray}" />
    </StackPanel>
</ToggleButton>

I moved all your image-setting logic in 2 data triggers. The reason is for WPF engine will evaluate your Image's Source property after executing DataTrigger so DataTrigger's Setter will have lower priority than setting Source property for the image by hand.

Note that IsPressed only True when you hold your left mouse button down but when you release it IsPressed will became False. There is IsChecked property for ToggleButton class that can store state.

Answer 2

Use WinRT tool kit.

An overview of UI Controls from Win RT XAML Toolkit