WPF - Hide/Show Image Based on Expander IsExpanded

Question

I would like to show an image if the expander is collapsed and hide it when it's expanded. I tried the following but it doesn't work. Is there a way to do so without using a converter?

<Image x:Name="fgImage" Source="Resources/Images/MissingImage.png" Margin="0,96,258,-75" Height="110" VerticalAlignment="Top" HorizontalAlignment="Right" Width="110">
 <Image.Style>
  <Style TargetType="Image">
   <Setter Property="Visibility" Value="Visible"/>
    <Style.Triggers>
     <DataTrigger Binding="{Binding ElementName=orderDetailsExpander, Path=IsExpanded}">
      <Setter Property="Visibility" Value="Collapsed"/>
     </DataTrigger>
    </Style.Triggers>
   </Style>
  </Image.Style>
 </Image>

Answer 1

your DataTrigger must be like that

<DataTrigger Binding="{Binding ElementName=orderDetailsExpander, Path=IsExpanded}" Value="True">

all the Image property

<Image x:Name="fgImage" Source="Resources/Images/MissingImage.png" Margin="0,96,258,-75" Height="110" VerticalAlignment="Top" HorizontalAlignment="Right" Width="110">
 <Image.Style>
  <Style TargetType="Image">
   <Setter Property="Visibility" Value="Visible"/>
    <Style.Triggers>
     <DataTrigger Binding="{Binding ElementName=orderDetailsExpander, Path=IsExpanded}" Value="True">
      <Setter Property="Visibility" Value="Collapsed"/>
     </DataTrigger>
    </Style.Triggers>
   </Style>
  </Image.Style>
 </Image>