Interruttori a levetta

L'interruttore Attiva/Disattiva rappresenta un interruttore fisico che consente agli utenti di attivare o disattivare opzioni, come un interruttore della luce. Usare gli interruttori Attiva/Disattiva per presentare agli utenti due sole opzioni che si escludano a vicenda (ad esempio on/off), in cui la scelta di un'opzione determina risultati immediati.

Per creare un interruttore Attiva/Disattiva, usare la classe ToggleSwitch.

Questo è il controllo giusto?

Usare un interruttore attiva/disattiva per le operazioni binarie che diventano effettive subito dopo che l'utente inverte l'interruttore attiva/disattiva.

Considera l'interruttore Attiva/Disattiva come un interruttore fisico per un dispositivo: attivalo o disattivalo quando si desidera abilitare o disabilitare l'azione eseguita dal dispositivo.

Per rendere l'interruttore Attiva/Disattiva facile da comprendere, etichettarlo con una o due parole, preferibilmente sostantivi che descrivano la funzionalità che controlla. Ad esempio, "Wi-Fi" o "Luci della cucina".

Scelta tra interruttore a levetta e casella di controllo

Per alcune azioni, potrebbe funzionare un interruttore attiva/disattiva o una casella di controllo. Per decidere quale controllo funzionerebbe meglio, seguire questi suggerimenti:

• Usare un interruttore attiva/disattiva per le impostazioni binarie quando le modifiche diventano effettive immediatamente dopo che l'utente le modifica.

  

  In questo esempio, grazie all'interruttore attiva/disattiva è chiaro che le luci della cucina sono impostate su "On" (Attiva). Ma con la casella di controllo, l'utente deve pensare se le luci sono accese ora o se deve selezionare la casella per accendere le luci.

• Usare le caselle di controllo per le voci facoltative (opzionali).

• Usare una casella di controllo quando l'utente deve eseguire passaggi aggiuntivi per rendere effettive le modifiche. Ad esempio, se l'utente deve fare clic su un pulsante "submit" (invia) o "next" (successivo) per applicare le modifiche, usare una casella di controllo.

• Usare le caselle di controllo quando l'utente può selezionare diversi elementi correlati a una singola impostazione o funzionalità.

Recommendations

• Utilizzare le etichette predefinite On e Off quando possibile; sostituirle solo quando è necessario affinché il funzionamento dell'interruttore abbia senso. Se si sostituiscono, usare una sola parola che descriva in modo più accurato l'interruttore. In generale, se le parole "On" e "Off" non descrivono l'azione associata a un interruttore a levetta, potrebbe essere necessario un altro comando.
• Evitare di sostituire le etichette On e Off (Attiva e Disattiva) a meno che non sia necessario; attenersi alle etichette predefinite, a meno che la situazione non richieda etichette personalizzate.

Creare un interruttore attiva/disattiva

La Raccolta WinUI 3 ti consente di esplorare e sfogliare esempi interattivi di controlli, caratteristiche e funzionalità di WinUI 3. Ottenere l'app da Microsoft Store o ottenere il codice sorgente in GitHub.

Ecco come creare un interruttore attiva/disattiva semplice. Questo codice XAML crea l'interruttore mostrato in precedenza.

<ToggleSwitch x:Name="lightToggle" Header="Kitchen Lights"/>

Ecco come creare lo stesso commutatore nel codice.

ToggleSwitch lightToggle = new ToggleSwitch();
lightToggle.Header = "Kitchen Lights";

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(lightToggle);

Ison

L'interruttore può essere acceso o spento. Utilizzare la proprietà IsOn per determinare lo stato dell'opzione. Quando l'opzione viene usata per controllare lo stato di un'altra proprietà binaria, è possibile usare un'associazione come illustrato di seguito.

<StackPanel Orientation="Horizontal">
    <ToggleSwitch x:Name="ToggleSwitch1" IsOn="True"/>
    <ProgressRing IsActive="{x:Bind ToggleSwitch1.IsOn, Mode=OneWay}" 
                  Width="130"/>
</StackPanel>

Attivato

In altri casi, è possibile gestire l'evento Toggled per rispondere alle modifiche nello stato.

Questo esempio mostra come aggiungere un gestore eventi Toggled in XAML e nel codice. L'evento Toggled viene utilizzato per attivare o disattivare un indicatore di avanzamento e modificarne la visibilità.

<ToggleSwitch x:Name="toggleSwitch1" IsOn="True"
              Toggled="ToggleSwitch_Toggled"/>

Ecco come creare lo stesso commutatore nel codice.

// Create a new toggle switch and add a Toggled event handler.
ToggleSwitch toggleSwitch1 = new ToggleSwitch();
toggleSwitch1.Toggled += ToggleSwitch_Toggled;

// Add the toggle switch to a parent container in the visual tree.
stackPanel1.Children.Add(toggleSwitch1);

Ecco il gestore per l'evento Toggled.

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    ToggleSwitch toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch != null)
    {
        if (toggleSwitch.IsOn == true)
        {
            progress1.IsActive = true;
            progress1.Visibility = Visibility.Visible;
        }
        else
        {
            progress1.IsActive = false;
            progress1.Visibility = Visibility.Collapsed;
        }
    }
}

Etichette On/Off

Per impostazione predefinita, l'interruttore include le etichette letterali "On" e "Off", che vengono localizzate automaticamente. È possibile sostituire queste etichette impostando le proprietà OnContent e OffContent.

In questo esempio vengono sostituite le etichette On/Off con le etichette Show/Hide (Mostra/Nascondi).

<ToggleSwitch x:Name="imageToggle" Header="Show images"
              OffContent="Show" OnContent="Hide"
              Toggled="ToggleSwitch_Toggled"/>

È anche possibile usare contenuto più complesso impostando le proprietà OnContentTemplate e OffContentTemplate.

Articoli correlati

• Classe ToggleSwitch
• Pulsanti di opzione
• Interruttori a levetta
• Caselle di controllo