Pulsanti di opzione

I pulsanti di opzione, detti anche radio button, consentono agli utenti di selezionare un'opzione da una raccolta di due o più opzioni che si escludono a vicenda, ma correlate. I pulsanti di opzione vengono sempre usati nei gruppi e ogni opzione è rappresentata da un pulsante di opzione nel gruppo.

Nello stato predefinito non è selezionato alcun pulsante di opzione in un gruppo RadioButtons. Ovvero, tutti i pulsanti di opzione vengono cancellati. Tuttavia, dopo che un utente ha selezionato un pulsante di opzione, l'utente non può deselezionare il pulsante per ripristinare il gruppo al suo stato iniziale svuotato.

Il comportamento singolare di un gruppo RadioButtons lo distingue dalle caselle di controllo , che supportano la selezione multipla e la deselezionazione o la cancellazione.

Questo è il controllo giusto?

Usare i pulsanti di opzione per consentire agli utenti di selezionare tra due o più opzioni che si escludono a vicenda.

Usare i pulsanti di opzione radio quando gli utenti devono visualizzare tutte le opzioni prima di effettuare una selezione. I pulsanti di opzione enfatizzano ugualmente tutte le opzioni, il che significa che alcune opzioni potrebbero attirare più attenzione di quanto sia necessario o desiderato.

A meno che tutte le opzioni non meritino la stessa attenzione, considerare l'uso di altri controlli. Ad esempio, per consigliare una singola opzione migliore per la maggior parte degli utenti e nella maggior parte delle situazioni, usare una casella combinata per visualizzare tale opzione migliore come opzione predefinita.

Se ci sono solo due opzioni possibili che possono essere espresse chiaramente come una singola scelta binaria, come on/off o sì/no, combinarle in un'unica casella di controllo o interruttore a levetta . Ad esempio, usare una singola casella di controllo per "Accetto" anziché due pulsanti di opzione per "Accetto" e "Non sono d'accordo".

Non usare due radio button per una singola scelta binaria.

Usare invece una casella di controllo:

Quando gli utenti possono selezionare più opzioni, utilizzare caselle di controllo.

Quando le opzioni degli utenti si trovano all'interno di un intervallo di valori (ad esempio, 10, 20, 30, ... 100), usare un controllo slider .

Se sono presenti più di otto opzioni, usare una casella combinata .

Se le opzioni disponibili sono basate sul contesto corrente di un'app oppure possono variare in modo dinamico, usare un controllo elenco.

Consigli

• Assicuratevi che lo scopo e lo stato corrente di un gruppo di pulsanti di opzione sia esplicito.
• Limitare l'etichetta di testo del pulsante radio a una singola riga.
• Se l'etichetta di testo è dinamica, valutare il modo in cui il pulsante verrà ridimensionato automaticamente e cosa accadrà a qualsiasi oggetto visivo intorno a esso.
• Usa il tipo di carattere predefinito, a meno che le linee guida del marchio non ti dicano diversamente.
• Non inserire due gruppi radiobuttoni affiancati. Quando due gruppi di pulsanti di opzione si trovano uno accanto all'altro, può essere difficile per gli utenti determinare quali pulsanti appartengono a quali gruppi.

Panoramica dei pulsanti di opzione

RadioButtons vs RadioButton

Esistono due modi per creare gruppi di pulsanti di opzione: RadioButtons e RadioButton.

• Consigliamo il controllo RadioButtons . Questo controllo semplifica il layout, gestisce lo spostamento tramite tastiera e l'accessibilità e supporta l'associazione a un'origine dati.
• È possibile usare gruppi di singoli controlli RadioButton.

L'accesso alla tastiera e il comportamento di navigazione sono stati ottimizzati nel controllo RadioButtons . Questi miglioramenti consentono sia all'accessibilità che agli utenti con alimentazione da tastiera di spostarsi nell'elenco delle opzioni più rapidamente e facilmente.

Oltre a questi miglioramenti, il layout visivo predefinito dei singoli pulsanti di opzione in un gruppo RadioButtons è stato ottimizzato tramite impostazioni automatizzate di orientamento, spaziatura e margine. Questa ottimizzazione elimina il requisito di specificare queste proprietà, perché potrebbe essere necessario usare un controllo di raggruppamento più primitivo, ad esempio StackPanel o Grid.

Esplorazione di un gruppo RadioButtons

Il controllo RadioButtons ha un comportamento di spostamento speciale che consente agli utenti della tastiera di spostarsi nell'elenco più rapidamente e più facilmente.

Focus della tastiera

Il controllo RadioButtons supporta due stati:

• Nessun pulsante di opzione selezionato
• È selezionato un pulsante di opzione

Le sezioni successive descrivono il comportamento del focus del controllo in ogni stato.

Nessun pulsante di opzione selezionato

Quando non viene selezionato alcun pulsante di opzione, il primo pulsante di opzione nell'elenco mette a fuoco.

Nota

L'elemento che riceve il focus della scheda dalla navigazione iniziale della scheda non è selezionato.

Elenco senza messa a fuoco della scheda, non selezionato

Elenco con focus iniziale sulla tab, senza selezione

Un pulsante di opzione è selezionato

Quando un utente entra nell'elenco in cui è già selezionato un pulsante di opzione, il pulsante di opzione selezionato ottiene la messa a fuoco.

Elenco senza focus su tab

Elenco con messa a fuoco iniziale sulla scheda

Spostamento tramite tastiera

Per altre informazioni sui comportamenti generali di spostamento tramite tastiera, vedere Interazioni tramite tastiera - Navigazione.

Quando un elemento in un gruppo di RadioButtons ha già il focus, l'utente può usare i tasti freccia per navigare tra gli elementi del gruppo. I tasti freccia Su e Giù passano all'elemento logico "next" o "previous", come definito nel markup XAML. I tasti di direzione sinistra e destra si spostano nello spazio.

Spostamento all'interno di layout a colonna singola o a riga singola

In un layout a colonna singola o a riga singola, lo spostamento tramite tastiera comporta il comportamento seguente:

a colonna singola

I tasti freccia SU e Freccia GIÙ si spostano tra gli elementi.
i tasti freccia sinistra e freccia destra non eseguono alcuna operazione.

a riga singola

I tasti freccia Sinistra e Su passano all'elemento precedente e i tasti di direzione destra e giù passano all'elemento successivo.

Spostamento all'interno di layout a più colonne e a più righe

In un layout griglia multicolonna multi-riga, lo spostamento tramite tastiera comporta questo comportamento:

tasti freccia sinistra/destra

I tasti freccia sinistra e destra spostano il fuoco orizzontalmente tra gli elementi di una riga.

Quando il focus è sull'ultimo elemento di una colonna e viene premuto il tasto freccia Destra o Sinistra, il focus si sposta all'ultimo elemento della colonna successiva o precedente (se presente).

tasti freccia su/giù

I tasti freccia su e giù spostano il focus verticalmente tra gli elementi di una colonna.

Quando lo stato attivo si trova sull'ultimo elemento di una colonna e viene premuto il tasto freccia GIÙ, lo stato attivo viene spostato sul primo elemento della colonna successiva (se presente). Quando lo stato attivo si trova sul primo elemento di una colonna e viene premuto il tasto freccia SU, lo stato attivo si sposta sull'ultimo elemento della colonna precedente (se presente)

Per altre informazioni, vedere Interazioni tramite tastiera.

Confezionamento

Il gruppo RadioButtons non esegue il wrapping dello stato attivo dalla prima riga o colonna all'ultima o dall'ultima riga o colonna al primo. Ciò è dovuto al fatto che, quando gli utenti usano un'utilità per la lettura dello schermo, un senso di limite e una chiara indicazione dell'inizio e della fine vengono persi, il che rende difficile per gli utenti con problemi visivi di spostarsi nell'elenco.

Il controllo RadioButtons non supporta anche l'enumerazione, perché il controllo deve contenere un numero ragionevole di elementi (vedere Si tratta del controllo corretto?).

La selezione segue lo stato attivo

Quando si usa la tastiera per spostarsi tra gli elementi in un gruppo di RadioButtons, mentre il focus passa da un elemento all'altro, l'elemento appena messo a fuoco viene selezionato e l'elemento che aveva il focus in precedenza viene deselezionato.

Prima della navigazione tramite tastiera

Focus e selezione prima della navigazione tramite tastiera.

Dopo la navigazione tramite tastiera

Focus e selezione dopo la navigazione tramite tastiera, dove il tasto freccia giù sposta il focus sul pulsante di opzione 3, lo seleziona e deseleziona il pulsante di opzione 2.

È possibile spostare l'attenzione senza modificare la selezione, usando i tasti Ctrl+freccia per spostarsi. Dopo che il focus viene spostato, è possibile usare la barra spaziatrice per selezionare l'elemento attualmente selezionato.

Navigazione con gamepad e telecomando

Se usi un gamepad o un telecomando per spostarti tra i pulsanti radio, il comportamento "la selezione segue lo stato attivo" è disabilitato e l'utente deve premere il pulsante "A" per selezionare il pulsante radio che ha attualmente lo stato attivo.

Comportamento di accessibilità

Nella tabella seguente viene descritto come l'Assistente vocale gestisce un gruppo RadioButtons e cosa viene annunciato. Questo comportamento dipende dal modo in cui un utente ha impostato le preferenze di dettaglio dell'Assistente vocale.

Azione	Annuncio del Narratore
Il focus si sposta su un elemento selezionato	"nome, RadioButton, selezionato, x di N"
Il focus passa a un elemento non selezionato (se si passa con i tasti di direzione CTRL o il game pad xbox, che indica che la selezione non segue il focus.	"nome, RadioButton, non selezionato, x di N"

Nota

Il nome che l'Assistente vocale annuncia per ogni elemento è il valore della proprietà associata AutomationProperties.Name se disponibile per l'elemento; in caso contrario, è il valore restituito dal metodo ToString dell'elemento.

x è il numero dell'elemento corrente. N è il numero totale di elementi nel gruppo.

Creare un gruppo di RadioBottoni WinUI

• API importanti: classe RadioButtons, proprietà SelectedItem, proprietà SelectedIndex, evento SelectionChanged, classe RadioButton, proprietà IsChecked, evento Checked

Apri l'app Galleria WinUI 3 e osserva il RadioButton in azione

L'app WinUI 3 Gallery include esempi interattivi della maggior parte dei controlli, delle funzionalità e delle caratteristiche di WinUI 3. Ottenere l'app dal di Microsoft Store o ottenere il codice sorgente in GitHub

Il controllo RadioButtons usa un modello di contenuto simile a un ItemsControl. Ciò significa che è possibile:

• Puoi popolare la raccolta aggiungendo elementi direttamente alla raccolta Items oppure associando i dati alla relativa proprietà ItemsSource.
• Utilizzare le proprietà SelectedIndex o SelectedItem per ottenere e impostare l'opzione selezionata.
• Gestisci l'evento SelectionChanged per agire quando si sceglie un'opzione.

In questo caso si dichiara un semplice controllo RadioButtons con tre opzioni. La proprietà Intestazione è impostata per assegnare al gruppo un'etichetta e la proprietà SelectedIndex è impostata per fornire un'opzione predefinita.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged">
    <x:String>Red</x:String>
    <x:String>Green</x:String>
    <x:String>Blue</x:String>
</RadioButtons>

Il risultato è simile al seguente:

Per eseguire un'azione quando l'utente seleziona un'opzione, è necessario gestire l'evento SelectionChanged. In questo caso, si modifica il colore di sfondo di un elemento border denominato "ExampleBorder" (<Border x:Name="ExampleBorder" Width="100" Height="100"/>).

private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (ExampleBorder != null && sender is RadioButtons rb)
    {
        string colorName = rb.SelectedItem as string;
        switch (colorName)
        {
            case "Red":
                ExampleBorder.Background = new SolidColorBrush(Colors.Red);
                break;
            case "Green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "Blue":
                ExampleBorder.Background = new SolidColorBrush(Colors.Blue);
                break;
        }
    }
}

Consiglio (or Suggerimento, if the context is advice or suggestion)

È anche possibile ottenere l'elemento selezionato dalla proprietà SelectionChangedEventArgs.AddedItems. Sarà presente un solo elemento selezionato, in corrispondenza dell'indice 0, quindi è possibile ottenere l'elemento selezionato nel modo seguente: string colorName = e.AddedItems[0] as string;.

Stati di selezione

Un pulsante di opzione ha due stati: selezionato o deselezionato. Quando si seleziona un'opzione in un gruppo di RadioButtons, è possibile recuperarne il valore dalla proprietà SelectedItem e dalla relativa posizione nell'insieme dalla proprietà SelectedIndex. Un pulsante di opzione può essere cancellato se un utente seleziona un altro pulsante di opzione nello stesso gruppo, ma non può essere cancellato se l'utente lo seleziona nuovamente. Tuttavia, è possibile cancellare un gruppo di pulsanti di opzione a livello di codice impostandolo SelectedItem = nullo SelectedIndex = -1. L'impostazione di SelectedIndex su qualsiasi valore non compreso nell'intervallo della raccolta Items non comporta alcuna selezione.

Contenuto dei pulsanti di opzione

Nell'esempio precedente è stato popolato il controllo RadioButtons con stringhe semplici. Il controllo ha fornito i pulsanti di opzione e ha usato le stringhe come etichetta per ognuna di esse.

Tuttavia, è possibile popolare il controllo RadioButtons con qualsiasi oggetto . In genere, si vuole che l'oggetto fornisca una rappresentazione di stringa che può essere usata come etichetta di testo. In alcuni casi, un'immagine potrebbe essere appropriata al posto del testo.

In questo caso, gli elementi SymbolIcon vengono usati per popolare il controllo.

<RadioButtons Header="Select an icon option:">
    <SymbolIcon Symbol="Back"/>
    <SymbolIcon Symbol="Attach"/>
    <SymbolIcon Symbol="HangUp"/>
    <SymbolIcon Symbol="FullScreen"/>
</RadioButtons>

È anche possibile usare singoli controlli radiobutton per popolare gli elementi RadioButtons. Questo è un caso speciale che verrà discusso più avanti. Visualizza i controlli di RadioButton in un gruppo di RadioButtons.

Un vantaggio della possibilità di usare qualsiasi oggetto è che è possibile associare il controllo RadioButtons a un tipo personalizzato nel modello di dati. La sezione successiva illustra questa operazione.

Associazione dati

Il controllo RadioButtons supporta il data binding alla relativa proprietà ItemsSource. In questo esempio viene illustrato come associare il controllo a un'origine dati personalizzata. L'aspetto e la funzionalità di questo esempio sono gli stessi dell'esempio di colore di sfondo precedente, ma in questo caso i pennelli di colore vengono archiviati nel modello di dati anziché essere creati nel gestore eventi SelectionChanged.

<RadioButtons Header="Background color"
              SelectedIndex="0"
              SelectionChanged="BackgroundColor_SelectionChanged"
              ItemsSource="{x:Bind colorOptionItems}"/>

public sealed partial class MainPage : Page
{
    // Custom data item.
    public class ColorOptionDataModel
    {
        public string Label { get; set; }
        public SolidColorBrush ColorBrush { get; set; }

        public override string ToString()
        {
            return Label;
        }
    }

    List<ColorOptionDataModel> colorOptionItems;

    public MainPage1()
    {
        this.InitializeComponent();

        colorOptionItems = new List<ColorOptionDataModel>();
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Red", ColorBrush = new SolidColorBrush(Colors.Red) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Green", ColorBrush = new SolidColorBrush(Colors.Green) });
        colorOptionItems.Add(new ColorOptionDataModel()
            { Label = "Blue", ColorBrush = new SolidColorBrush(Colors.Blue) });
    }

    private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var option = e.AddedItems[0] as ColorOptionDataModel;
        ExampleBorder.Background = option?.ColorBrush;
    }
}

Controlli RadioButton in un gruppo di RadioButton

È possibile usare singoli controlli RadioButton per popolare gli elementi RadioButtons. È possibile eseguire questa operazione per ottenere l'accesso a determinate proprietà, ad esempio AutomationProperties.Name; o si potrebbe avere codice RadioButton esistente, ma si vuole sfruttare il layout e lo spostamento di RadioButtons.

<RadioButtons Header="Background color">
    <RadioButton Content="Red" Tag="red" AutomationProperties.Name="red"/>
    <RadioButton Content="Green" Tag="green" AutomationProperties.Name="green"/>
    <RadioButton Content="Blue" Tag="blue" AutomationProperties.Name="blue"/>
</RadioButtons>

Quando si usano i controlli RadioButton in un gruppo di RadioButtons, il controllo RadioButtons sa come presentare il RadioButton, in modo da non terminare con due cerchi di selezione.

Tuttavia, esistono alcuni comportamenti di cui tenere conto. È consigliabile gestire lo stato e gli eventi sui singoli controlli o su RadioButtons, ma non entrambi, per evitare conflitti.

Questa tabella mostra gli eventi e le proprietà correlati in entrambi i controlli.

RadioButton	Pulsanti di opzione
Selezionato, Non selezionato, Clicca	ModificaSelezione
IsChecked	ElementoSelezionato, IndiceSelezionato

Se si gestiscono eventi in un singolo RadioButton, ad esempio Checked o Unchecked, e si gestisce anche l'evento RadioButtons.SelectionChanged, verranno attivati entrambi gli eventi. L'evento RadioButton si verifica per primo e quindi si verifica l'evento RadioButtons.SelectionChanged, che potrebbe causare conflitti.

Le proprietà IsChecked, SelectedIteme SelectedIndex rimangono sincronizzate. Una modifica a una proprietà aggiorna le altre due.

La proprietà RadioButton.GroupName viene ignorata. Il gruppo viene creato dal controllo RadioButtons.

Definizione di più colonne

Per impostazione predefinita, il controllo RadioButtons dispone verticalmente i pulsanti di opzione in una singola colonna. È possibile impostare la proprietà MaxColumns per consentire al controllo di disporre i pulsanti radio in più colonne. Quando si esegue questa operazione, vengono disposti in ordine principale di colonna, in cui gli elementi vengono inseriti dall'alto verso il basso, quindi da sinistra a destra.

<RadioButtons Header="RadioButtons in columns" MaxColumns="3">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
    <x:String>Item 6</x:String>
</RadioButtons>

Consiglio

Per disporre gli elementi in una singola riga orizzontale, impostare MaxColumns uguale al numero di elementi nel gruppo.

Creare un gruppo RadioButton personalizzato

Importante

È consigliabile usare il controllo RadioButtons per raggruppare RadioButton elementi.

I pulsanti di opzione funzionano in gruppi. È possibile raggruppare singoli controlli RadioButton in uno dei due modi seguenti:

• Inserirli all'interno dello stesso contenitore padre.
• Impostare la proprietà GroupName su ogni pulsante di opzione allo stesso valore.

In questo esempio il primo gruppo di pulsanti di opzione viene raggruppato in modo implicito nello stesso pannello dello stack. Il secondo gruppo è diviso tra due pannelli dello stack, quindi GroupName viene usato per raggrupparli in modo esplicito in un singolo gruppo.

<StackPanel>
    <StackPanel>
        <TextBlock Text="Background" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 1 - implicit grouping -->
        <StackPanel Orientation="Horizontal">
            <RadioButton Content="Green" Tag="green" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="Yellow" Tag="yellow" Checked="BGRadioButton_Checked"/>
            <RadioButton Content="White" Tag="white" Checked="BGRadioButton_Checked"
                         IsChecked="True"/>
        </StackPanel>
    </StackPanel>

    <StackPanel>
        <TextBlock Text="BorderBrush" Style="{ThemeResource BaseTextBlockStyle}"/>
        <!-- Group 2 - grouped by GroupName -->
        <StackPanel Orientation="Horizontal">
            <StackPanel>
                <RadioButton Content="Green" Tag="green" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
                <RadioButton Content="Yellow" Tag="yellow" GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked" IsChecked="True"/>
                <RadioButton Content="White" Tag="white"  GroupName="BorderBrush"
                             Checked="BorderRadioButton_Checked"/>
            </StackPanel>
        </StackPanel>
    </StackPanel>
    <Border x:Name="ExampleBorder"
            BorderBrush="#FFFFD700" Background="#FFFFFFFF"
            BorderThickness="10" Height="50" Margin="0,10"/>
</StackPanel>

private void BGRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.Background = new SolidColorBrush(Colors.Yellow);
                break;
            case "green":
                ExampleBorder.Background = new SolidColorBrush(Colors.Green);
                break;
            case "white":
                ExampleBorder.Background = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

private void BorderRadioButton_Checked(object sender, RoutedEventArgs e)
{
    RadioButton rb = sender as RadioButton;

    if (rb != null && ExampleBorder != null)
    {
        string colorName = rb.Tag.ToString();
        switch (colorName)
        {
            case "yellow":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.Gold);
                break;
            case "green":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.DarkGreen);
                break;
            case "white":
                ExampleBorder.BorderBrush = new SolidColorBrush(Colors.White);
                break;
        }
    }
}

Questi due gruppi di controlli RadioButton hanno un aspetto simile al seguente:

Pulsanti di opzione in due gruppi

Stati dei pulsanti di opzione

Un pulsante di opzione ha due stati: selezionato o deselezionato. Quando viene selezionato un pulsante di opzione, la sua proprietà IsChecked è true. Quando un pulsante di opzione viene cancellato, la relativa proprietà IsChecked è false. Un pulsante di opzione può essere cancellato se un utente seleziona un altro pulsante di opzione nello stesso gruppo, ma non può essere cancellato se l'utente lo seleziona nuovamente. Tuttavia, è possibile cancellare un pulsante di opzione a livello di codice impostando la relativa proprietà IsChecked su false.

Elementi visivi da considerare

La spaziatura predefinita dei singoli controlli RadioButton è diversa dalla spaziatura fornita da un gruppo di RadioButtons. Per applicare la spaziatura RadioButtons ai singoli controlli RadioButton, usare un valore Margin di 0,0,7,3, come illustrato di seguito.

<StackPanel>
    <StackPanel.Resources>
        <Style TargetType="RadioButton">
            <Setter Property="Margin" Value="0,0,7,3"/>
        </Style>
    </StackPanel.Resources>
    <TextBlock Text="Background"/>
    <RadioButton Content="Item 1"/>
    <RadioButton Content="Item 2"/>
    <RadioButton Content="Item 3"/>
</StackPanel>

Le immagini seguenti mostrano la spaziatura ottimale dei pulsanti di opzione in un gruppo.

Nota

Se usi un controllo RadioButtons WinUI, la spaziatura, i margini e l'orientamento sono già ottimizzati.

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. Vedi le informazioni di riferimento sulle API UWP per informazioni ed esempi specifici della piattaforma.

Questa sezione contiene informazioni necessarie per usare il controllo in un'app UWP o WinUI 2.

Il controllo RadioButtons per le app UWP è incluso nell'ambito di WinUI 2. Per altre info, incluse le istruzioni di installazione, vedi WinUI 2. Le API per questi controlli esistono sia negli spazi dei nomi Windows.UI.Xaml.Controls che Microsoft.UI.Xaml.Controls.

• API UWP: classe RadioButton, Proprietà IsChecked, evento Checked
• API WinUI 2 : classe RadioButtons, proprietà SelectedItem, proprietà SelectedIndex, evento SelectionChanged
• Aprire l'app della Galleria WinUI 2 e vedere il RadioButton in azione. L'app Galleria WinUI 2 include esempi interattivi della maggior parte dei controlli, delle caratteristiche e delle funzionalità di WinUI 2. Ottieni l'app dal Microsoft Store o ottieni il codice sorgente dal GitHub.

Esistono due modi per creare gruppi di pulsanti di opzione.

• A partire da WinUI 2.3, consigliamo il controllo RadioButtons . Questo controllo semplifica il layout, gestisce lo spostamento tramite tastiera e l'accessibilità e supporta l'associazione a un'origine dati.
• È possibile usare gruppi di singoli controlli RadioButton. Se l'app non usa WinUI 2.3 o versione successiva, questa è l'unica opzione.

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

Per usare il codice in questo articolo con WinUI 2, usa un alias in XAML (usiamo muxc) per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto. Per altre informazioni, vedi Introduzione a WinUI 2.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:RadioButtons />

Argomenti correlati

• pulsanti
• Interruttori a levetta
• caselle di controllo
• elenchi e caselle combinate
• dispositivi di scorrimento
• classe RadioButtons
• RadioButton Classe