Interruttori

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.

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

Considerare l'interruttore Attiva/Disattiva come un interruttore fisico per un dispositivo: attivare o disattivare quando di 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 attiva/disattiva 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 ("nice to have").

• 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à.

Consigli

• Usare le etichette predefinite On e Off quando è possibile; sostituirle solo quando è necessario per rendere appropriato all'interruttore Attiva/Disattiva. 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 Attiva/Disattiva, potrebbe essere necessario un altro controllo.
• 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.

Piattaforma UWP e WinUI 2

Le API per questo controllo sono presenti nello spazio dei nomi Windows.UI.Xaml.Controls.

È consigliabile usare la versione più recente di WinUI 2 per ottenere gli stili e i modelli più recenti per tutti i controlli.

Creare un interruttore attiva/disattiva

L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub

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

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

Ecco come creare lo stesso interruttore attiva/disattiva 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>

Toggled

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 gestito per attivare o disattivare un anello di stato e modificarne la visibilità.

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

Ecco come creare lo stesso interruttore attiva/disattiva 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 attiva/disattiva include le etichette On e Off letterali, 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.

Scaricare il codice di esempio

• Esempio di Raccolta WinUI: visualizza tutti i controlli XAML in un formato interattivo.

Articoli correlati

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