Come si cambia sfondo per un pulsante MouseOver in WPF?

Ho un pulsante sulla mia pagina con questo XAML:

  

Ma quando metto il mouse sul mio pulsante, lo sfondo del pulsante si trasforma in sfondo grigio di default.
Qual è il problema?

Questa è l’immagine del pulsante prima e dopo il mouseover:
Prima:
Prima
Dopo:
Dopo

Per rimuovere il comportamento predefinito di MouseOver sul Button è necessario modificare il ControlTemplate . Cambiare la tua definizione di Style con il seguente dovrebbe fare il trucco:

  

EDIT: È in ritardo di alcuni anni, ma in realtà sei in grado di impostare il pennello del bordo all’interno del bordo che è lì dentro. Idk se è stato sottolineato, ma non sembra che fosse …

Questo ha funzionato bene per me.

Stile del bottone

           

Pulsante

  

Gli appunti

  • Il pulsante mostra una piccola croce blu, molto simile a quella usata per chiudere una finestra.
  • Impostando lo sfondo della griglia su “Trasparente”, si aggiunge un più forte, il che significa che se il mouse è ovunque sopra il pulsante, allora funzionerà. Ometti questo tag e il pulsante si illuminerà solo se il mouse si trova su una delle linee vettoriali nell’icona (questo non è molto utilizzabile).

Voglio solo condividere il mio stile pulsante dal mio ResourceDictionary che ho usato. Puoi cambiare liberamente lo sfondo di onHover ai trigger di stile. ” ColorAnimation To = * il tuo BG desiderato (es. # FFCEF7A0)”. Il pulsante BG tornerà automaticamente al suo BG originale dopo lo stato mouseOver. Puoi anche impostare la velocità della transizione.

Dizionario delle risorse

  

tutto ciò che devi fare è chiamare lo stile.

Esempio di implementazione

  

Una risposta leggermente più difficile che utilizza ControlTemplate e ha un effetto di animazione (adattato da https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing- controllo )

Nel tuo dizionario delle risorse definisci un modello di controllo per il tuo pulsante come questo:

                             

nel tuo XAML puoi utilizzare il modello qui sopra per il tuo pulsante come di seguito:

Definisci il tuo pulsante

  

Spero che sia d’aiuto

Tutte le risposte finora implicano la completa sostituzione del comportamento predefinito del pulsante con qualcos’altro. Tuttavia, IMHO è utile e importante capire che è ansible modificare solo la parte che ti interessa , modificando il modello predefinito esistente per un elemento XAML.

In caso di gestione dell’effetto hover su un pulsante WPF, la modifica dell’aspetto in un elemento Button WPF è causata da un Trigger nello stile predefinito per il Button , che si basa sulla proprietà IsMouseOver e imposta le proprietà Background e BorderBrush dell’elemento Border livello superiore nel modello di controllo. Lo sfondo dell’elemento Button si trova sotto lo sfondo dell’elemento Border , pertanto la modifica della proprietà Button.Background non impedisce di visualizzare l’effetto hover.

Con qualche sforzo, potresti sovrascrivere questo comportamento con il tuo setter, ma poiché l’elemento che devi influenzare è nel modello e non direttamente accessibile nel tuo XAML, quell’approccio sarebbe difficile e IMHO eccessivamente complesso.

Un’altra opzione potrebbe essere quella di utilizzare l’elemento grafico come Content per il Button anziché come Background . Se hai bisogno di contenuti aggiuntivi sull’elemento grafico, puoi combinarli con una Grid come object di livello superiore nel contenuto.

Tuttavia, se vuoi letteralmente disabilitare completamente l’effetto hover (piuttosto che nasconderlo), puoi utilizzare Visual Studio XAML Designer:

  1. Durante la modifica di XAML, seleziona la scheda “Progettazione” .
  2. Nella scheda “Progettazione” , trova il pulsante per il quale desideri disabilitare l’effetto.
  3. Fai clic con il pulsante destro del mouse su questo pulsante e scegli “Modifica modello / Modifica una copia …” . Selezionare nel prompt dove si desidera posizionare la nuova risorsa del modello. Questo sembrerà non fare nulla, ma in realtà il Designer avrà aggiunto nuove risorse dove l’hai detto, e ha cambiato l’elemento del pulsante per fare riferimento allo stile che utilizza tali risorse come modello di pulsante.
  4. Ora puoi modificare questo stile. La cosa più semplice è cancellare o commentare (ad es. Ctrl + E , C ) l’elemento ... . Ovviamente, puoi apportare qualsiasi modifica al modello che desideri a quel punto.

Quando hai finito, lo stile del pulsante sarà simile a questo:

                                                     

(Nota: è ansible omettere le qualifiche dello spazio dei nomi p: XML nel codice effettivo … Fornisco qui solo perché il formattatore del codice XML Overflow dello stack viene confuso da

elementi che non hanno un nome completo con lo spazio dei nomi XML .)

Se si desidera applicare lo stesso stile ad altri pulsanti, è sufficiente fare clic con il pulsante destro del mouse e selezionare “Modifica modello / Applica risorsa” e selezionare lo stile appena aggiunto per il primo pulsante. Puoi persino rendere quello stile lo stile predefinito per tutti i pulsanti, utilizzando le normali tecniche per applicare uno stile predefinito agli elementi in XAML.