Personalizzazione dello stato di attivazione/disattivazione di un pulsante di attivazione in wpf

Question

Desidero personalizzare lo stato di attivazione/disattivazione del pulsante di attivazione in wpf. Voglio impostare un'immagine sul pulsante di attivazione quando è attiva e impostare un'altra immagine quando è disattivata. Per farlo, ho pensato di utilizzare i trigger. Questo è il modo ho finito per fare,

<Window ...> 
    <Window.Resources> 
     <Image x:Key="OnImage" Source="C:\ON.jpg" /> 
     <Image x:Key="OffImage" Source="C:\OFF.jpg" /> 
     <Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton"> 
      <Style.Triggers> 
       <Trigger Property="IsChecked" Value="True"> 
        <Setter Property="Content" Value="{StaticResource OnImage}" /> 
       </Trigger> 
       <Trigger Property="IsChecked" Value="False"> 
        <Setter Property="Content" Value="{StaticResource OffImage}" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <ListBox> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       ... 
       <ToggleButton IsChecked="{Binding Status}" Width="100" Height="35" Style="{StaticResource OnOffToggleImageStyle}" /> 
       ... 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
</Window> 

È possibile che questo frammento sembra funziona bene solo per i due elementi nella casella di riepilogo. Se più di un articolo ha il valore di legame, lo stato è vero, non funziona (funziona solo per uno di questi elementi). Per favore dimmi se sto procedendo nella direzione corretta. Dimmi anche altri modi per ottenere questo.

Answer 1

Il problema è dovuto al fatto che si utilizzano le risorse Image. Lo Image nelle risorse è un'istanza concreta di un controllo. Può essere solo in un posto alla volta. Quindi, quando si dispone di più di un elemento nella lista ...

Questo dovrebbe funzionare per voi:

<Style x:Key="OnOffToggleImageStyle" TargetType="ToggleButton"> 
<Style.Triggers> 
    <Trigger Property="IsChecked" Value="True"> 
    <Setter Property="Content"> 
     <Setter.Value> 
     <Image Source="C:\ON.jpg" /> 
     </Setter.Value> 
    </Setter> 
    </Trigger> 
    <Trigger Property="IsChecked" Value="False"> 
    <Setter Property="Content"> 
     <Setter.Value> 
     <Image Source="C:\OFF.jpg" /> 
     </Setter.Value> 
    </Setter> 
    </Trigger> 
</Style.Triggers> 
</Style> 

Si noti che è possibile migliorare le prestazioni di questo utilizzando un ImageSource per ciascun file di immagine nel vostro risorse, quindi fare riferimento a questo nel Image. Ciò significa che ogni immagine viene caricata solo una volta dal disco, anziché 2 * N volte (dove N è il numero di elementi nell'elenco.)

Answer 2

This answer ti aiuterà. Lì ho preso un ToggleButton e lo ho disegnato per apparire come ToggleButton in un TreeView (la parte +/- per espandere i nodi di compressione). Dovrai solo cambiare i percorsi che disegnano i segni - e +, per mostrare invece le tue immagini.

Qui viene personalizzato per te, basta mettere un'immagine chiamata "on.jpg" e un'altra chiamata "off.jpg" nella directory C: \, e dovrebbe funzionare semplicemente copiando/incollando nella finestra:

<Window.Resources> 
     <SolidColorBrush x:Key="GlyphBrush" Color="#444" /> 
     <ControlTemplate x:Key="toggleButtonTemplate" TargetType="ToggleButton"> 
      <Grid 
       Width="15" 
       Height="13" 
       Background="Transparent"> 
       <Image x:Name="ExpandImage" 
         Source="C:\off.jpg" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" 
         Margin="1,1,1,1" />      
      </Grid> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsChecked" 
        Value="True"> 
        <Setter Property="Source" 
         TargetName="ExpandImage" 
         Value="C:\on.jpg"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
     <Style x:Key="toggleButtonStyle" TargetType="ToggleButton"> 
      <Setter Property="Template" Value="{StaticResource toggleButtonTemplate}" /> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <ToggleButton Style="{StaticResource toggleButtonStyle}" /> 
    </Grid> 

Answer 3

Come ha detto Drew Noakes, nel mio snippte c'erano solo due immagini. Quindi solo due elementi funzionavano correttamente. Ho risolto questo problema con il seguente snippet.

<ToggleButton 
    Grid.Row="0" Grid.Column="2" Grid.RowSpan="2" 
    VerticalAlignment="Center" HorizontalAlignment="Center" 
    IsChecked="{Binding Status}" 
    Width="100" Height="35"> 
    <ToggleButton.Resources> 
    <Image x:Key="OnImage" Source="C:\ON.jpg" /> 
    <Image x:Key="OffImage" Source="C:\OFF.jpg" /> 
    </ToggleButton.Resources> 
    <ToggleButton.Style> 
    <Style TargetType="ToggleButton"> 
     <Style.Triggers> 
     <Trigger Property="IsChecked" Value="True"> 
      <Setter Property="Content" Value="{StaticResource OnImage}"> 
      </Setter> 
     </Trigger> 
     <Trigger Property="IsChecked" Value="False"> 
      <Setter Property="Content" Value="{StaticResource OffImage}"> 
      </Setter> 
     </Trigger> 
     </Style.Triggers> 
    </Style> 
    </ToggleButton.Style> 
</ToggleButton> 

Semplice, ho spostato i trigger nel modello di dati. Non so se questa è la risposta corretta tu '. Sembra funzionare

Answer 4

Ecco un ToggleButton con 3 immagini e un pop-up:

1. Un immagine quando IsChecked = false.
2. Un'immagine per quando IsChecked = true.
3. Un'immagine per quando IsMouseOver = true.

Le immagini vengono memorizzate in risorse come BitmapImage per evitare di modificare Visual sui trigger.

I file di immagine devono essere aggiunti alle risorse e quindi i file aggiunti alla cartella "Resoruces" nel progetto devono essere contrassegnati come BuildAction = Risorsa.

Si applica inoltre un'opacità al controllo Immagine quando ToggleButton IsEnabled = false;

Codice:

<ToggleButton 
     x:Name="btnToggleImage" 
     Margin="5" 
     Width="50"    
     Height="50" 
     > 
     <ToggleButton.Resources> 
      <BitmapImage x:Key="imgNormal" UriSource="/YOURPROJECTNAME;component/Resources/YourUncheckedImage.png"/> 
      <BitmapImage x:Key="imgHover" UriSource="/YOURPROJECTNAME;component/Resources/YourHoverImage.png"/> 
      <BitmapImage x:Key="imgChecked" UriSource="/YOURPROJECTNAME;component/Resources/YourCheckedImage.png"/> 
     </ToggleButton.Resources> 

     <ToggleButton.Style> 
      <Style TargetType="ToggleButton"> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="ToggleButton"> 
          <Image 
           x:Name="PART_Image" 
           Source="{StaticResource imgNormal}" 
           /> 
          <ControlTemplate.Triggers> 
           <Trigger Property="IsChecked" Value="true"> 
            <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgChecked}"/> 
           </Trigger> 
           <Trigger Property="IsMouseOver" Value="true"> 
            <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource imgHover}"/> 
           </Trigger> 
           <Trigger Property="IsEnabled" Value="false"> 
            <Setter TargetName="PART_Image" Property="Opacity" Value="0.6"/> 
           </Trigger> 
          </ControlTemplate.Triggers> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </ToggleButton.Style> 
    </ToggleButton>   

    <Popup 
     x:Name="popup1" 
     PlacementTarget="{Binding ElementName=btnToggleImage}" 
     PopupAnimation="Slide" 
     IsOpen="{Binding ElementName=btnToggleImage, Path=IsChecked, Mode=TwoWay}" 
     StaysOpen="False" 
     MinWidth="{Binding ElementName=btnToggleImage, Path=Width}"> 
     <Grid Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"> 
      <!--<ItemsPresenter/>--> 
      <Label Content="Hello Wolrd!"/> 
     </Grid> 
    </Popup>