Override ToggleButton Style

Question

Ho un ToggleButton nella mia finestra e sono in stile nel mio ResourceDictionary. Il motivo per cui è nel ResourceDictionary è perché ho parecchi o più ToggleButton che devono avere lo stesso aspetto.

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

Ora questo stile ToggleButton ha uno sfondo di default e anche quando "IsChecked" è vero, avrà sfondo diverso (come si può vedere sul mio codice XAML sopra).

Ora questi alternare pulsanti deve avere un'icona + testo combinati, come quello che ho fatto qui (scusate per il mio codice XAML zoppo)

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

La domanda è, come posso avere un'icona diversa quando il ToggleButton è spuntato (IsChecked = True)?

Ecco alcune immagini che potrebbero aiutare a capire la domanda

Normale ToggleButton Stile

IsChecked = True Style

Il mio obiettivo di progettazione è quello di avere un'icona diversa quando IsChecked = True

Answer 1

Aggiungere entrambe le immagini al modello di controllo e associare il numero Visibility proprietà per la proprietà IsChecked (utilizzare IValueConverter per convertire da vero/falso al valore enum appropriato Visibility).

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

ho usato due convertitori BoolToVisibleConverter e BoolToCollapsedConverter, ma si potrebbe anche utilizzare un ConverterParameter per ottenere la stessa cosa.