El control CheckBox

El control CheckBox permite al usuario final alternar una opción entre encendido o apagado. Usuarlmente refleja un valor Boolean en el code-behind. Vamos a ver el ejemplo, en caso que no estés seguro como se ve 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>

Como puedes ver, el CheckBox es muy fácil de usar. En el segundo CheckBox utilicé la propiedad IsChecked para marcarlo por defecto, pero no son necesarias más propiedades para usarlo. La propiedad IsChecked también se puede usar desde el code-behind para determinar si un CheckBox está marcado o no.

Contenido Personalizado

El control CheckBox hereda de la clase ContentControl, lo que significa que puede tomar contenido personalizado y mostrarlo junto a él. Si especificas un trozo de texto, tal y como hice en el ejemplo de arriba, WPF lo pondrá dentro de un control de tipo TextBlock y lo mostrará, pero esto no es más que un atajo para hacerte las cosas más fáciles. Puedes utilizar cualquier tipo de control dentro de él, tal y como veremos en el siguiente ejemplo:

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

Como se puede ver del código de prueba, puedes hacer casi todo lo que quieras con el contexto. En los tres Checkboxes hago algo diferente con el texto, y en el del medio hasta incluyo un control de imagen. Especificando un control como contexto, en vez de sólo texto, tenemos mucho más control sobre la apariencia, y lo bueno de esto es que no importa que parte del contexto cliquees, éste va a activar el Checkbox y alternarlo entre encendido y apagado.

La propiedad IsThreeState

Como hemos dicho, el CheckBox normalmente se corresponde con un valor lógico, lo que significa que tiene sólo dos estados: true o false (o on y off). En cualquier caso, puesto que un tipo de datos boolean podría ser nullable, permitiendo de hecho una tercera opción (true, false o null) el control CheckBox también permite este escenario. Poniendo la propiedad IsThreeState a true, el CheckBox podrá adquirir el tercer estado llamado "el estado intermedio".

Una utilización habitual para esto es disponer de un CheckBox que "habilite todo", que puede controlar un conjunto de Checkboxes hijos así como mostrar su estado colectivo. Nuestro ejemplo muestra cómo podrías crear una lista de características que pueden cambiarse a encendidas o apagadas, con un CheckBox común que las "habilite todas" encima.

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

	}
}

Este ejemplo funciona desde dos puntos de vista distintos: si habilitas o des-habilitas el CheckBox "Habilitar todo", entoces todos los check boxes hijos, cada uno representando una característica de la aplicación en nuestro ejemplo, estará habilitado o des-habilitado. También funciona al revés, cuando al habilitar o des-habilitar un CheckBox hijo afecta al estado del CheckBox "Habilitar todo": si todas están habilitadas o des-habilitadas, entonces "Habilitar todo" adquiete el mismo estado - de otra manera, el valor quedará nulo, lo que fuerza al CheckBox al estado indeterminado.

Todo este comportamiento puede verse en las capturas de pantalla arriba, y puede conseguirse mediante una subscripción a los eventos Checked y Unchecked de los controles CheckBox. En un ejemplo del mundo real, probablemente harías un "bind" de los valores, pero este ejemplo muestra los fundamentos de utilizar la propiedad IsThreeState para crear un efecto "Habilitar todo".