Stili per il focus nei controlli e FocusVisualStyle

Articolo
12/19/2024

Windows Presentation Foundation (WPF) fornisce due meccanismi paralleli per modificare l'aspetto visivo di un controllo quando ottiene il focus della tastiera. Il primo meccanismo consiste nell'usare setter di proprietà per proprietà quali IsKeyboardFocused all'interno dello stile o del modello applicato al controllo. Il secondo meccanismo consiste nel fornire uno stile separato come valore della proprietà FocusVisualStyle; lo "stile di visualizzazione dello stato attivo" crea una struttura ad albero visuale separata per uno strumento decorativo che disegna sopra il controllo, invece di modificare la struttura ad albero visuale del controllo o di un altro elemento dell'interfaccia utente sostituendola. Questo argomento illustra gli scenari in cui ognuno di questi meccanismi è appropriato.

Lo scopo dello stile visivo di focalizzazione

La funzionalità dello stile di visualizzazione dello stato attivo offre un "modello a oggetti" comune per introdurre feedback visivo all'utente in base alla navigazione tramite tastiera a qualsiasi elemento dell'interfaccia utente. Ciò è possibile senza applicare un nuovo modello al controllo o conoscere la composizione del modello specifica.

Tuttavia, poiché la funzionalità dello stile di visualizzazione dello stato attivo funziona senza conoscere i modelli di controllo, il feedback visivo che può essere visualizzato per un controllo utilizzando uno stile di visualizzazione dello stato attivo è necessariamente limitato. La funzione consiste in realtà nel sovrapporre un albero visivo diverso (un decoratore) sopra l'albero visivo creato dal rendering di un controllo tramite il suo modello. Questa struttura ad albero visuale separata viene definita usando uno stile che riempie la proprietà FocusVisualStyle.

Comportamento predefinito dello stile visivo del focus

Gli stili visivi del focus agiscono solo quando l'azione è stata avviata dalla tastiera. Qualsiasi azione del mouse o modifica del focus a livello di codice disabilita la modalità per gli stili di visualizzazione del focus. Per altre informazioni sulle differenze tra le modalità di messa a fuoco, vedere Panoramica della messa a fuoco.

I temi per i controlli includono un comportamento predefinito dello stile di visualizzazione dello stato attivo che diventa lo stile di visualizzazione dello stato attivo per tutti i controlli nel tema. Questo stile del tema è identificato dal valore della chiave statica FocusVisualStyleKey. Quando dichiari il tuo stile visivo di stato attivo a livello di applicazione, sostituisci il comportamento predefinito di stile dei temi. In alternativa, se definisci l'intero tema, devi usare questa stessa chiave per definire lo stile per il comportamento predefinito per l'intero tema.

Nei temi, lo stile visivo predefinito è in genere molto semplice. Di seguito è riportata un'approssimazione approssimativa:

<Style x:Key="{x:Static SystemParameters.FocusVisualStyleKey}">
  <Setter Property="Control.Template">
    <Setter.Value>
      <ControlTemplate>
        <Rectangle StrokeThickness="1"
          Stroke="Black"
          StrokeDashArray="1 2"
          SnapsToDevicePixels="true"/>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Quando usare gli stili di visualizzazione "focus"

Concettualmente, l'aspetto degli stili di visualizzazione dello stato attivo applicati ai controlli deve essere coerente tra i controlli. Un modo per garantire coerenza è cambiare lo stile visivo del focus solo se si sta componendo un intero tema, in cui ogni controllo definito nel tema riceve lo stesso stile visivo del focus o una variante di uno stile correlato visivamente da un controllo all'altro. In alternativa, puoi usare lo stesso stile (o stili simili) per applicare uno stile a ogni elemento attivabile da tastiera in una pagina o in un'interfaccia utente.

L'impostazione della proprietà FocusVisualStyle su stili di controllo individuali che non fanno parte di un tema non è l'uso previsto per gli stili visivi di messa a fuoco. Ciò è dovuto al fatto che un comportamento visivo incoerente tra i controlli può causare un'esperienza utente confusa in termini di messa a fuoco della tastiera. Se si prevedono comportamenti specifici dei controlli per lo stato attivo della tastiera che sono deliberatamente non uniformi all'interno di un tema, un approccio molto migliore consiste nell'usare i trigger negli stili per le singole proprietà dello stato di input, come IsFocused o IsKeyboardFocused.

Gli stili di visualizzazione del focus agiscono esclusivamente per la tastiera. Pertanto, gli stili visivi di messa a fuoco sono un tipo di funzionalità di accessibilità. Se vuoi modificare l'interfaccia utente per qualsiasi tipo di stato attivo, sia con mouse, tastiera, o a livello di codice, non dovresti usare gli stili visivi dello stato attivo; dovresti invece utilizzare setter e trigger negli stili o nei modelli che lavorano sul valore delle proprietà generali dello stato attivo, come IsFocused o IsKeyboardFocusWithin.

Come creare uno stile visivo di focus

Lo stile che crei per un focus visivo dovrebbe sempre avere la caratteristica TargetType su Control. Lo stile dovrebbe essere composto principalmente da un ControlTemplate. Non specificate il tipo di destinazione come il tipo a cui viene assegnato lo stile visivo dello stato attivo per il FocusVisualStyle.

Poiché il tipo di destinazione è sempre Control, è necessario applicare uno stile utilizzando le proprietà comuni a tutti i controlli, impiegando le proprietà della classe Control e delle relative classi di base. È consigliabile creare un modello che funzioni correttamente come sovrimpressione a un elemento dell'interfaccia utente e che non nasconderà le aree funzionali del controllo. In genere, ciò significa che il feedback visivo dovrebbe comparire al di fuori dei limiti del controllo, oppure come effetti temporanei o non invadenti che non ostacoleranno il test di attivazione sul controllo in cui viene applicato lo stile visivo di messa a fuoco. Le proprietà che è possibile usare nell'associazione di modelli utili per determinare il ridimensionamento e il posizionamento del modello di sovrimpressione includono ActualHeight, ActualWidth, Margine Padding.

Alternative all'uso di uno stile visivo di messa a fuoco

Per le situazioni in cui l'uso di uno stile visivo per lo stato attivo non è appropriato, sia perché si sta stilizzando solo singoli controlli o perché si desidera un maggiore controllo sul modello del controllo, esistono molte altre proprietà e tecniche accessibili che possono creare un comportamento visivo in risposta ai cambiamenti dello stato attivo.

I trigger, i setter e i setter di eventi vengono descritti in dettaglio in Applicazione di stili e modelli. La gestione degli eventi indirizzati viene descritta in Panoramica degli eventi indirizzati.

ÈFocalizzataLaTastiera

Se sei particolarmente interessato allo stato attivo della tastiera, la proprietà di dipendenza IsKeyboardFocused può essere utilizzata per una proprietà Trigger. Un trigger di proprietà in uno stile o in un modello è una tecnica più appropriata per definire un comportamento dello stato attivo della tastiera molto specifico per un singolo controllo e che potrebbe non corrispondere visivamente al comportamento dello stato attivo della tastiera per altri controlli.

Un'altra proprietà di dipendenza simile è IsKeyboardFocusWithin, che potrebbe essere appropriata da usare se si desidera evidenziare visivamente che lo stato attivo della tastiera si trova da qualche parte all'interno della composizione o all'interno dell'area funzionale del controllo. Ad esempio, è possibile posizionare un trigger IsKeyboardFocusWithin in modo che un pannello che raggruppa diversi controlli venga visualizzato in modo diverso, anche se il focus della tastiera potrebbe puntare più precisamente su un singolo elemento all'interno di tale pannello.

È anche possibile usare gli eventi GotKeyboardFocus e LostKeyboardFocus (oltre ai relativi equivalenti di anteprima). È possibile usare questi eventi come base per un EventSetteroppure è possibile scrivere gestori per gli eventi nel file code-behind.

Altre proprietà del Focus

Se si desidera che tutte le possibili cause della modifica dello stato attivo generino un comportamento visivo, è consigliabile basare un setter o un trigger sulla proprietà di dipendenza IsFocused oppure in alternativa sugli eventi GotFocus o LostFocus utilizzati per un EventSetter.

Condividi tramite