Anular ToggleButton Style

Question

Tengo un ToggleButton en mi ventana y tengo un estilo en mi ResourceDictionary. La razón por la que está en ResourceDictionary es porque tengo varios o más ToggleButton pronto, que tiene que tener el mismo aspecto.

<Style x:Key="Standardbutton" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="FontSize" Value="18" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="Background"> 
     <Setter.Value> 
      <ImageBrush ImageSource="Resources/Standard_Button_Normal.png" /> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Height" Value="56" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ToggleButton"> 
       <Border Name="border" BorderThickness="0" Padding="0,0" BorderBrush="DarkGray" CornerRadius="0" Background="{TemplateBinding Background}"> 
        <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" Name="content" Margin="15,0,0,0"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsChecked" Value="True"> 
         <Setter Property="Background"> 
          <Setter.Value> 
           <ImageBrush ImageSource="Resources/Standard_Button_Pressed.png" /> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="Foreground"> 
          <Setter.Value> 
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="#FFF9CE7B" Offset="0"/> 
            <GradientStop Color="#FFE88C41" Offset="1"/> 
           </LinearGradientBrush> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Ahora este estilo ToggleButton tiene un fondo por defecto y también cuando "IsChecked" es verdadera, tendrá diferentes antecedentes (como se puede ver en mi código XAML anterior).

Ahora bien, estos botones de alternar tiene que tener icono + texto combinados, como lo que hice aquí (lo siento por mi código XAML cojo)

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Resources/scan_26x26.png" /> 
     <TextBlock Text="Scan"/> 
    </StackPanel> 
</ToggleButton> 

La pregunta es, ¿cómo puedo tener un icono diferente cuando el ToggleButton está marcado (IsChecked = True)?

Estas son algunas imágenes que podrían ayudar a entender la pregunta

normal ToggleButton Estilo

IsChecked = True Style

Mi objetivo de diseño es tener un icono diferente cuando IsChecked = True

Answer 1

Agregue ambas imágenes a la plantilla de control, y añada su Visibility propiedad a la propiedad IsChecked (use IValueConverter para convertir de verdadero/falso al valor de enum Visibility apropiado).

<ToggleButton Style="{DynamicResource Standardbutton}" Margin="0,0,0,4"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="Resources/scan_26x26.png" 
       Visibility="{Binding 
        RelativeSource={RelativeSource AncestorType=ToggleButton}, 
        Path=IsChecked, 
        Converter={StaticResource BoolToVisibleConverter}}" /> 
     <Image Source="Resources/anotherimage.png" 
        Visibility="{Binding 
        RelativeSource={RelativeSource AncestorType=ToggleButton}, 
        Path=IsChecked, 
        Converter={StaticResource BoolToCollapsedConverter}}" /> 
     <TextBlock Text="Scan"/> 
    </StackPanel> 
</ToggleButton> 

que utiliza dos convertidores BoolToVisibleConverter y BoolToCollapsedConverter, pero también se puede utilizar un ConverterParameter a lograr lo mismo.