Ovládací prvok CheckBox

Ovládací prvok CheckBox umožňuje koncovému používateľovi zapnúť alebo vypnúť voľbu, zvyčajne zobrazuje hodnotu Boolean v kóde. Poďme priamo na príklad, ak si nie ste istí, ako CheckBox vyzerá:

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

Ako môžete vidieť, použiť CheckBox je veľmi ľahké. Na druhom CheckBoxe používam vlastnosť IsChecked, aby bol predvolene začiarknutý, okrem toho nie sú potrebné žiadne vlastnosti na jeho použitie. Vlastnosť IsChecked, by sa mala používať aj pri zadávaní v kóde, ak chcete skontrolovať, či je alebo nie je začiarknutý určitý CheckBox.

Vlastný obsah

CheckBox dedí z triedy ContentControl, čo znamená, že môže obsahovať vlastný obsah a zobrazovať ho vedľa seba. Ak mu zadáte text, ako som to urobil v príklade vyššie, WPF ho umiestni do ovládacieho prvku TextBlock a zobrazí ho, ale je to len skratka, ktorá vám uľahčí prácu. Môžete použiť akýkoľvek typ kontrolky vo vnútri, ako uvidíme v nasledujúcom príklade:

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

Ako môžete vidieť z príkladu, s obsahom CheckBoxu môžete urobiť skoro všetko čo chcete. Vo všetkých troch prvkoch CheckBox robím s textom niečo odlišné a v strednom je dokonca prvok Image. Zadaním ovládacieho prvku ako obsahu, namiesto samotného textu, získame oveľa väčšiu kontrolu nad vzhľadom a výborné na tom je, že bez ohľadu na to, na ktorú časť obsahu kliknete, aktivuje Checkbox na zapnutý alebo vypnutý.

Vlastnosť IsThreeState

Ako sme už spomenuli, CheckBox zvyčajne zodpovedá booleovskej hodnote, čo znamená, že má iba dva stavy: true alebo false (zapnuté alebo vypnuté). Keďže booleovský typ údajov môže byť nulový, čo umožňuje efektívne tretiu možnosť (true, false alebo null), kontrolka CheckBox môže tiež podporiť tento prípad. Ak nastavíte vlastnosť IsThreeState na true, CheckBox dostane tretí stav nazvaný "neurčitý stav".

Bežným používaním tohto postupu je mať CheckBox "Enable all", ktorý môže kontrolovať sadu detských políčok, ako aj zobraziť ich spoločný stav. Náš príklad ukazuje, ako môžete vytvoriť zoznam funkcií, ktoré je možné zapínať a vypínať pomocou CheckBoxu "Enable all" v hornej časti:

<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 príklad pracuje z dvoch rôznych uhlov: Ak začiarknete, alebo zrušíte začiarknutie políčka "Enable all" v poli CheckBox, všetky začiarkavacie políčka, ktoré predstavujú funkciu v našom príklade, sú buď začiarknuté, alebo nezačiarknuté. Tiež to funguje opačne, keď zapnutie, alebo vypnutie podriadeného CheckBoxu ovplyvňuje stav CheckBoxu "Enable all": ak sú všetky zaškrtnuté, alebo nezaškrtnuté, potom sa políčko "Enable all" dostane do rovnakého stavu - inak bude hodnota vľavo nulová, ktorá núti CheckBox do neurčitého stavu.

Toto správanie sa zobrazuje na snímkach vyššie a je dosiahnuté prihlásením sa k udalostiam Checked a Unchecked ovládacích prvkov CheckBox. V príklade reálneho sveta, by ste použili väzbu na hodnoty (binding), ale tento príklad ukazuje základy použitia vlastnosti IsThreeState, na vytvorenie efektu "Toggle all".