Interruttori

  • Articolo

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.

Toggle switch, on

Toggle switch off

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.

    Toggle switch versus check box

    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

Importante

Le informazioni e gli esempi in questo articolo sono ottimizzati per le app che usano Windows App SDK e WinUI 3, ma sono generalmente applicabili alle app UWP che usano WinUI 2. Per informazioni ed esempi specifici della piattaforma, consultare le indicazioni di riferimento sulle API UWP.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o 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

Aprire l'app Raccolta WinUI 3 e visualizzare ToggleSwitch in azione.

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