Kontrolka RadioButton

Kontrolka RadioButton (przycisk radiowy – jego nazwa wzięła się od przycisków w radiu, gdzie wciśnięcie jednego przycisku wypychało poprzedni) daje użytkownikowi listę możliwych opcji, gdzie tylko jedna może być wybrana. Ten sam efekt można osiągnąć dzięki kontrolce ComboBox – przy okazji osiągając bardziej kompaktowe rozmiary. Jednak zestaw przycisków radiowych daje użytkownikowi lepszy wgląd w to, jakie opcje ma do wyboru.

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

Wszystko co zrobiliśmy to dodaliśmy Label'a z pytaniem oraz trzy przyciski radiowe, każdy z możliwą odpowiedzią. Zdefiniowaliśmy również domyślnie wybraną opcję przez użycie właściwości IsChecked na ostatnim RadioButton'ie, którą użytkownik może zmienić poprzez kliknięcie na jeden z pozostałych przycisków. Jest to również właściwość, której będziesz używał z kodu za-widokiem aby sprawdzić, czy RadioButton został wybrany, czy też nie.

Grupowanie przycisków

Gdy uruchomisz przykład powyżej zobacz, jak obiecałem, że tylko jeden RadioButton może być wybrany w danym momencie. Co jednak, gdy potrzebujesz kilka grup przycisków radiowych, każda z osobno wybieranymi przyciskami? Aby uzyskać taki efekt potrzebujemy właściwości GroupName, która pozwala nam zdefiniować, które przyciski współpracują ze sobą. Oto przykład:

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

Dzięki właściwości GroupName, określonej na każdym z przycisków radiowym, zaznaczenie może być dokonane oddzielnie dla każdej z dwóch grup. Bez tego tylko jeden przycisk mógłby zostać wybrany z wszystkich sześciu.

Własna zawartość

Klasa RadioButton dziedziczy po klasie ContentControl co oznacza, że może ona obsługiwać niemalże dowolną zawartość . Kiedy we właściwości Content wpiszemy zwykły tekst, to WPF umieści go i wyświetli za pomocą kontrolki TextBlock – taki skrót aby uczynić programowanie prostszym. Można korzystać z dowolnego typu kontrolek wewnątrz RadioButton'a, co zobaczymy w poniższym przykładzie:

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

Jeśli chodzi o ilość znaczników, to jest ich tutaj trochę, jednak sama koncepcja jest prosta. Każdy z RadioButton'ów został wypełniony WrapPanel'em z obrazkiem i tekstem. Ponieważ teraz kontrolujemy tekst za pomocą TextBox'a możemy również ustawić formatowanie tekstu w dowolny sposób. W przykładzie zmieniłem kolor czcionki, tak aby pasował do wyboru. Kontrolkę Image (więcej o niej w dalszej części kursu) została użyta do wyświetlenia obrazka dla każdej z możliwych opcji.

Zauważ, że możesz kliknąć w dowolne miejsce RadioButton'a, nawet na obraz czy tekst aby go aktywować. Dziej się tak ponieważ te elementy zostały zdefiniowane jako zawartość przycisku. Jeśli umieściłbyś etykietę jako osobny panel obok RadioButton'a, wtedy użytkownik musiałby klikać bezpośrednio w okrągłe kółeczko należące do przycisku radiowego aby go aktywować, co nie jest zbyt praktycznym rozwiązaniem.