Ovládací prvek CheckBox

Komponenta CheckBox dovoluje konečnému uživateli přepnout volbu na zapnuto/vypnuto, obvykle odrážející Boolean hodnotu v Code-Behind (.cs - pozn. překladatele). Pojďme rovnou na příklad, pokud si nejste jistí, jak CheckBox vypadá:

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

Jak můžete vidět, CheckBox je velice snadné používat. V druhém CheckBoxu jsem použil vlastnost IsChecked abych měl defaultně zaškrtlý CheckBox, ale kromě toho nejsou potřeba žádné jiné vlastnosti k užívání. Pokud chcete kontrolovat, zda je CheckBox zaškrtnutý či ne, můžete použít vlastnost IsChecked také z Code-behind.

Vlastní obsah

Ovládací prvek CheckBox dědí třídu ContentControl, což znamená, že přijímá jakýkoliv vlastní obsah a umí ho zobrazit. Pokud zadáte pouze text, jako v příkladu výše, WPF ho vloží do TextBlocku a zobrazí ho. To je ale pouze pro zjednodušení práce. Obsahem může být jakýkoliv ovládací prvek, jak si ukážeme v následujícím příkladu:

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

Jak můžeme vidět na ukázce, s obsahem můžeme dělat co chceme. Na všech třech zaškrtávačích jsme použili různé formátování textu a ovládací prvek Image. Pokud jako obsah použijeme ovládací prvky, získáme mnohem větší kontrolu nad výsledným vzhledem a pokud uživatel klikne kdekoliv na tento obsah, dojde k aktivaci na zaškrtávací políčko.

Vlastnost IsThreeState

Jak bylo zmíněno, CheckBox zpravidla odpovídá hodnotě boolean, která znamená, že má jen dva stavy: true nebo false (pravda, nepravda / zapnuto, vypnuto). Nicméně od té doby, co datový typ boolean může být "nulovatelný", je fakticky přidaná třetí možnost (true, false nebo null), CheckBox také podporuje tuto možnost. Pomocí nastavení vlastnosti IsThreeState na "true" bude CheckBox mít třetí stav zvaný "neurčitý stav".

Běžné použití je CheckBox "Povolit vše", který může ovládat podřízené checkboxy a zobrazovat jejich celkový stav. Náš příklad ukazuje seznam funkcionalit, které můžeme vypínat a zapínat a nad tím máme souhrnný "Povolit vše" CheckBox:

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

	}
}

Tento příklad ukazuje dvě různé funkčnosti: Pokud zaškrtneme nebo odškrtneme CheckBox "Enable all" (Povolit vše), zaškrtnou se nebo odškrtnou všechny podřízené check boxy, z nichž každý v našem příkladu představuje nějakou vlastnost nebo chování aplikace. Lze jít však také "z druhé strany", kdy tím, že zaškrtneme nebo odškrtneme některý podřízený CheckBox, změníme stav check boxu "Enable all": Pokud jsou všechny podřízené check boxy zaškrtnuté, nebo naopak nezaškrtnuté, pak bude mít CheckBox "Enable all" také tento stav – jinak zůstane jeho hodnota "null", což způsobí, že CheckBox bude ve stavu "neurčeno" (neurčitý stav, indeterminate state).

Veškeré toto chování můžeme vidět na obrázku nahoře a je zajištěno odběrem Checked a Unchecked událostí v kontrolním panelu CheckBoxu. V realitě bychom radši spárovali tyto hodnoty společně, ale tento příklad ukazuje základy používání IsThreeState vlastnosti, pro vytvoření "Toggle all" efektu.