The CheckBox control

Controlul CheckBox permite utilizatorului final sa comute o optiune intre selectat sau deselectat, de obicei reflectand o valoare Booleana in codul din spate. Hai sa incepem direct cu un exemplu, in cazul in care nu sunteti siguri cum arata un CheckBox:

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>Enable feature ABC</CheckBox>
		<CheckBox IsChecked="True">Enable feature XYZ</CheckBox>
		<CheckBox>Enable feature WWW</CheckBox>
	</StackPanel>
</Window>

Dupa cum puteti vedea, CheckBox-ul este foarte usor de folosit. In cel de-al doilea CheckBox, folosesc proprietatea IsChecked pentru a-l avea selectat in mod implicit, dar inafara de asta, nici o alta proprietate nu e necesara pentru a-l folosi. Proprietatea IsChecked ar trebui folosita si in codul din spate in cazul in care vreti sa verificati daca un anume CheckBox este selectat.

Custom content

Controlul CheckBox mosteneste clasa ContentControl, ceea ce inseamna ca poate avea un continut customizat langa el/ Daca specifici o bucata de text, asa cum am facut in exemplul de mai sus, WPF il va pune intr-un control TextBlock si il va afisa, insa, aceasta modalitate este doar o scurtatura pentru a face lucrurile mai usoare pentru tine. Poti folosi orice tip de control in interiorul lui, asa cum vom vedea in exemplul urmator:

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxSample" Height="140" Width="250">
    <StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Green" FontWeight="Bold">ABC</Run>
			</TextBlock>
		</CheckBox>
		<CheckBox IsChecked="True">
			<WrapPanel>
				<TextBlock>
					Enable feature <Run FontWeight="Bold">XYZ</Run>
				</TextBlock>
				<Image Source="/WpfTutorialSamples;component/Images/question.png" Width="16" Height="16" Margin="5,0" />
			</WrapPanel>
		</CheckBox>
		<CheckBox>
			<TextBlock>
				Enable feature <Run Foreground="Blue" TextDecorations="Underline" FontWeight="Bold">WWW</Run>
			</TextBlock>
		</CheckBox>
	</StackPanel>
</Window>

Asa cum poti vedea in exemplu, poti face aproape orice vrei cu continutul. In fiecare dintre cele trei CheckBox-uri, fac cate ceva diferit cu textul, iar in cel din mijloc adaug chiar si un control Image. Specificand un control ca si continut, in loc de un simplu text, putem controla mult mai mult cum arata, iar aspectul interesant este ca indiferent de partea din conținutul pe care faceți clic, CheckBox-ul se va activa si va comuta intre selectat si deselectat.

The IsThreeState property

Asa cum am mentionat, CheckBox-ul, de obicei, corespunde unei valori booleane, ceea ce inseamna ca are doar doua stari : true sau false (selectat sau deselectat). Totusi, din moment ce tipul de date boolean ar putea fi si null, permitand efectiv o a treia opțiune ( true, false sau null), control CheckBox poate avea si acest caz. Setand proprietatea IsThreeState true, CheckBox-ul va primi si o a treia stare numita "starea nedeterminata".

O tehnica uzuala pentru aceasta este sa avem un CheckBox de tipul "Activeaza tot", care sa controleze un set de CheckBox-copii si sa afiseze starile lor colective. Exemplul nostru arata cum poti crea o lista de caracteristici care pot fi comutate intre selectat si deselectat, cu un CheckBox comun "Activeaza tot" pus deasupra.

<Window x:Class="WpfTutorialSamples.Basic_controls.CheckBoxThreeStateSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="CheckBoxThreeStateSample" Height="170" Width="300">
	<StackPanel Margin="10">
		<Label FontWeight="Bold">Application Options</Label>
		<StackPanel Margin="10,5">
			<CheckBox IsThreeState="True" Name="cbAllFeatures" Checked="cbAllFeatures_CheckedChanged" Unchecked="cbAllFeatures_CheckedChanged">Enable all</CheckBox>
			<StackPanel Margin="20,5">
				<CheckBox Name="cbFeatureAbc" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature ABC</CheckBox>
				<CheckBox Name="cbFeatureXyz" IsChecked="True" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature XYZ</CheckBox>
				<CheckBox Name="cbFeatureWww" Checked="cbFeature_CheckedChanged" Unchecked="cbFeature_CheckedChanged">Enable feature WWW</CheckBox>
			</StackPanel>
		</StackPanel>
	</StackPanel>
</Window>

using System;
using System.Windows;

namespace WpfTutorialSamples.Basic_controls
{
	public partial class CheckBoxThreeStateSample : Window
	{
		public CheckBoxThreeStateSample()
		{
			InitializeComponent();
		}


		private void cbAllFeatures_CheckedChanged(object sender, RoutedEventArgs e)
		{
			bool newVal = (cbAllFeatures.IsChecked == true);
			cbFeatureAbc.IsChecked = newVal;
			cbFeatureXyz.IsChecked = newVal;
			cbFeatureWww.IsChecked = newVal;
		}

		private void cbFeature_CheckedChanged(object sender, RoutedEventArgs e)
		{
			cbAllFeatures.IsChecked = null;
			if((cbFeatureAbc.IsChecked == true) && (cbFeatureXyz.IsChecked == true) && (cbFeatureWww.IsChecked == true))
				cbAllFeatures.IsChecked = true;
			if((cbFeatureAbc.IsChecked == false) && (cbFeatureXyz.IsChecked == false) && (cbFeatureWww.IsChecked == false))
				cbAllFeatures.IsChecked = false;
		}

	}
}

Aceast exemplu merge in doua directii : daca selectezi sau deselectezi CheckBox-ul "Activeaza tot", atunci toate CheckBox-urile copii, fiecare reprezentand o caracteristica a aplicatiei in exemplul nostru, va fi ori selectat ori deselectat. De asemenea, merge si in sens opus. Daca selectezi sau deselectezi un copil CheckBox, aceasta actiune va afecta starea CheckBox-ului "Activeaza tot" : Daca sunt toti selectati sau deselectati, atunci CheckBox-ul "Activeaza tot" va avea aceeasi stare - altfel valoarea va si nula, lucru ce forteaza CheckBox-ul in starea nedeterminata.

Acest comportament poate fi observat in captura de ecran de mai sus si poate fi realizat prin subscrierea la evenimentele Checked sau Unchecked ale controlului CheckBox. In exemplele din viata reala, probabil că ați bind-ui valorile, insa acest exemplu arată elementele de bază in folosirea proprietatii IsThreeState pentru a crea un efect de "Activeaza tot".