Das RadioButton-Steuerelement

Mit Hilfe des RadioButton-Kontrollobjekts kann dem Benutzer eine Liste mit Optionen angezeigt werden, von denen immer nur eine ausgewählt werden kann. Das gleiche kann mit dem ComboBox-Kontrollobjekt erreicht werden. Dieses braucht weniger Platz, aber das RadioButton-Kontrollobjekt gibt dem Benutzer einen besseren Überblick über die verfügbaren Optionen.

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

Wir fügen hier ein Label mit einer Frage hinzu, gefolgt von drei Radio-Buttons, jeder mit einer möglichen Antwort. Wir definieren eine Standard-Option mit Hilfe der Eigenschaft IsChecked auf dem letzten Radio-Button. Dies ist auch die Eigenschaft, mit der aus Code-Behind geprüft werden kann, ob ein Radio-Button ausgewählt ist. Der Benutzer kann die ausgewählte Aktion einfach durch Klicken auf einen der anderen Radio-Buttons ändern.

RadioButton-Gruppen

Wenn Sie das obige Bespiel ausführen, sehen Sie, dass wie versprochen nur ein Radio-Button gleichzeitig ausgewählt sein kann. Aber was, wenn Sie mehrere Gruppen von Radio-Buttons benötigen, die unabhängig voneinander ausgewählt werden können? Dies lässt sich mit der Eigenschaft GroupName erreichen, mit der bestimmt werden kann, welche Radio-Buttons zusammen gehören. Hier ein Beispiel:

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

Da die Eigenschaft GroupName für jeden der Radio-Buttons angegeben wurde, kann jetzt in beiden Gruppen jeweils eine Auswahl getroffen werden. Ohne diese Eigenschaft könnte nur einer aus allen sechs Radio-Buttons ausgewählt werden.

Maßgeschneiderte Inhalte

RadioButton erbt von der Klasse ContentControl. Deshalb kann er maßgeschneiderte Inhalte enthalten und anzeigen. Wenn Sie nur wie oben einen Text angeben, packt WPF ihn in einen TextBlock und zeigt ihn an, aber das ist nur eine Kurzform. Wie Sie im nächsten Beispiel sehen, können in einem RadioButton beliebige Kontrollobjekte verwendet werden:

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

Vom Markup her ist das Beispiel etwas komplex, aber das Prinzip ist einfach. Jeder RadioButton entählt ein WrapPanel mit einem Bild und einem Text. Da wir den Text jetzt mit einem TextBlock-Kontrollobjekt steuern, können wir ihn beliebig formatieren. In diesem Beispiel habe ich die Textfarbe an die Auswahl angepasst. Ein Image-Kontrollobjekt (dazu später mehr) wird verwendet, um zu jeder Option ein Bild anzuzeigen.

Beachten Sie, dass Sie irgendwo auf dem Radio-Button klicken können, auch auf dem Bild oder dem Text, weil diese als Inhalt des Radio-Buttons angegeben sind. Hätten Sie ihn in einen separaten Bereich neben dem Radio-Button gesetzt, müsste der Benutzer direkt auf den Radio-Button klicken.