RadioButton kontrollen

RadioButton kontrollen giver dig mulighed for at vise en liste med mulige indstillinger, hvor kun en af dem kan være valgt ad gangen. Du opnår samme effekt med mindre pladsforbrug med ComboBox kontrollen, men et sæt alternativknapper synes at give et bedre overblik over de indstillinger, der er.

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

Alt, hvad vi gør, er at tilføjet en Label kontrol med et spørgsmål og derefter tre alternativknapper, hver med et muligt svar. Vi definerer et standardalternativ ved at bruge IsChecked egenskaben på den sidste RadioButton, hvilket brugeren kan ændre simpelthen ved at klikke på en af de andre alternativknapper. Dette er også den egenskab, du ønsker at bruge fra code-behind for at kontrollere, om en RadioButton af markeret eller ej.

RadioButton grupper

Hvis du prøver at køre eksemplet ovenfor, vil du, som lovet, se, at kun en RadioButton kan være markeret ad gangen. Men hvad hvis du ønsker flere grupper af alternativknapper hver med deres egen individuelle markering? Her er det, at GroupName egenskaben kommer i spil, hvilket giver dig mulighed for at angive hvilke alternativknappere, der hører sammen. Her er et eksempel:

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

Med GroupName egenskaben sat på hver af alternativknapperne, kan en markering nu laves for hver af de tro grupper. Uden den kan der kun være en markering for alle seks alternativknapper.

Brugerdefineret indhold

RadioButton kontrollen nedarver fra ContentControl klassen, hvilket betyder, at den kan tage brugerdefinret indhold og vise ved sidden af den. Hvis du angiver et stykke tekst, som jeg gjorde i eksemplet ovenfor, vil WPF putte det ind i en TextBlock kontrol og vise det, men det er kun en genvej for at gøre tingene nemt. Du kan bruge en hvilken som helst type kontrol inde i den, som vi vil se i det næste eksempel:

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

Med hensyn til markup er dette eksempel en smule tungt, men konceptet er ret simpelt. For hver RadioButton har ve en WrapPanel med et billede og en smule tekst indeni. Siden vi nu tager kontrol over teksten med en TextBlock kontrol, kan vi formattere teksten fuldstændig, som vi ønsker. I dette eksempel har jeg ændret tekstfarven til at matche valgmuligheden. En Image kontrool (læs mere om dem senere) er brugt til at vise et billede for hver valgmulighed.

Bemærk hvorledes, du kan klikke overalt på RadioButton kontrollen - selv på billedet eller teksten - for at slå den til fordi, vi har angivet det som indhold på RadioButton. Hvis du havde placeret det som et separat panel ved siden af RadioButton kontrollen, ville brugeren være nødt til at klikke direkte på den runde cirkel på RadioButton kontrollen for at akttivere den, hvilket er mindre praktisk.