Il controllo RadioButton

Il controllo RadioButton consente di fornire all'utente un elenco di opzioni possibili, con solo una di esse selezionata contemporaneamente. È possibile ottenere lo stesso effetto, utilizzando meno spazio, con il controllo ComboBox, ma un set di pulsanti di scelta offre all'utente una panoramica migliore delle opzioni disponibili.

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>Yes</RadioButton>
		<RadioButton>No</RadioButton>
		<RadioButton IsChecked="True">Maybe</RadioButton>
	</StackPanel>
</Window>

Tutto ciò che facciamo è aggiungere un'etichetta con una domanda, quindi tre pulsanti di opzione, ognuno con una possibile risposta. Definiamo un'opzione predefinita utilizzando la proprietà IsChecked sull'ultimo RadioButton, che l'utente può modificare semplicemente facendo clic su uno degli altri pulsanti di opzione. Questa è anche la proprietà che dovresti usare da Code-behind per verificare se un RadioButton è selezionato o meno.

Raggruppamento di RadioButton

Se provi a eseguire l'esempio sopra, vedrai che, come promesso, solo un RadioButton può essere controllato allo stesso tempo. Ma cosa succede se vuoi più gruppi di RadioButton, ciascuno con la propria selezione individuale? Quì è dove entra in gioco la proprietà GroupName, che ti consente di specificare quali pulsanti radio appartengono ad un gruppo. Ecco un esempio:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonSample" Height="230" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton GroupName="ready">Yes</RadioButton>
		<RadioButton GroupName="ready">No</RadioButton>
		<RadioButton GroupName="ready" IsChecked="True">Maybe</RadioButton>

		<Label FontWeight="Bold">Male or female?</Label>
		<RadioButton GroupName="sex">Male</RadioButton>
		<RadioButton GroupName="sex">Female</RadioButton>
		<RadioButton GroupName="sex" IsChecked="True">Not sure</RadioButton>
	</StackPanel>
</Window>

Con la proprietà GroupName impostata su ciascuno dei pulsanti di opzione, è ora possibile effettuare una selezione per ciascuno dei due gruppi. Senza questa proprietà, sarebbe possibile solo una selezione per tutti e sei i pulsanti radio.

Contenuto personalizzato

Il RadioButton eredita dalla classe ContentControl, il che significa che può prendere il contenuto personalizzato e visualizzarlo accanto ad esso. Se si specifica solo una parte di testo, come nell'esempio precedente, WPF lo inserirà in un controllo TextBlock e lo visualizzerà, ma questa è solo una scorciatoia per semplificare le cose. Puoi utilizzare qualsiasi tipo di controllo al suo interno, come vedremo nel prossimo esempio:

<Window x:Class="WpfTutorialSamples.Basic_controls.RadioButtonCustomContentSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RadioButtonCustomContentSample" Height="150" Width="250">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Are you ready?</Label>
		<RadioButton>
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/accept.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Yes" Foreground="Green" />
			</WrapPanel>
		</RadioButton>
		<RadioButton Margin="0,5">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/cancel.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="No" Foreground="Red" />
			</WrapPanel>
		</RadioButton>
		<RadioButton IsChecked="True">
			<WrapPanel>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="0,0,5,0" />
				<TextBlock Text="Maybe" Foreground="Gray" />
			</WrapPanel>
		</RadioButton>
	</StackPanel>
</Window>

Per quanto riguarda il markup, questo esempio diventa un po 'pesante, ma il concetto è piuttosto semplice. Per ogni RadioButton, abbiamo un WrapPanel con un'immagine e una parte di testo al suo interno. Dal momento che ora prendiamo il controllo del testo usando un controllo TextBlock, questo ci permette anche di formattare il testo come vogliamo. Per esempio, ho cambiato il colore del testo in modo che corrisponda alla scelta. Un controllo Image (leggi di più su quelli successivi) viene utilizzato per visualizzare un'immagine per ogni scelta.

Nota come puoi cliccare ovunque sul RadioButton, anche sull'immagine o sul testo, per attivarlo, perché lo abbiamo specificato come contenuto del RadioButton. Se lo avessi inserito come pannello separato, accanto a RadioButton, l'utente dovrebbe fare clic direttamente sul cerchio rotondo del RadioButton per attivarlo, il che è meno pratico.