Елемент керування CheckBox

Елемент керування CheckBox дозволяє кінцевому користувачу перемикати опцію в стан "увімкнено" "вимкнено", зазвичай відображає булеве значення в коді. Давайте перейдемо до прикладу, у випадку якщо ви не знаєте як виглядає 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>

Як ви можете бачити, CheckBox є дуже легким у використанні. У другому CheckBox'і я використовую властивість IsChecked щоб він був відміченим за замовчанням, але крім цього ніяких властивостей не потрібно для його використання. Властивість IsChecked варто також використовувати у код бехайнді якщо ви хочете перевірити чи певний CheckBox відмічений чи ні.

Спеціальний вміст

Елемент керування CheckBox наслідується від класу ContentControl, що означає що він може містити користувацький вміст і відображати його. Якщо ви просто вкажете фрагмент тексту, як я це робив в прикладі раніше, WPF помістить всередину TextBlock'у і відобразить його, але це просто скорочення щоб вам легше було писати. Ви може використовувати будь-який контрол всередині, як ми можемо побачити в наступному прикладі:

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

Як можна бачити з прикладу, ви можете робити все що хочете з вмістом. У трьох CheckBox'ах я зробила різні речі з текстом, і в середньому я навіть додала зображення. Додавши заміть тексту контрол ми отримуємо набагато більше контролю над зовнішнім виглядом, і найцікавіше що немає значення на яку частинку вмісту ви натискаєте, це активує CheckBox в будь-якому випадку.

Властивість IsThreeState

Як згадувалося CheckBox зазвичай відповідає булевому значенню, що означає що є тільки два стани true або false (увімкнено, вимкнено). Хоча навіть булеві дані можуть бути нульові, що дозволяє використовувати три варіанти true, false, null. CheckBox контрол також підтримує і цей варіант. Встановивши для властивості IsThreeState значення true, CheckBox отримає третій стан який називається невизначеним станом.

Зазвичай для цього використовують CheckBox "Увімкнути всі", який може контролювати дочірні CheckBox'и, і показувати їх спільний стан. Наш приклад показує як ви можете створити список сутностей які можуть бути увімкнені або вимкнені загальним 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;
		}

	}
}

Цей приклад працює з двох різних сторін. Якщо ви позначите або знімете позначку з CheckBox'у "Enable all", тоді всі дочірні CheckBox'и кожна з яких представляє функцію програми у нашому прикладі, або вмикаються або вимикаються. Це також працює з іншого боку, коли ми позначаємо або забираємо позначку з дочірнього CheckBox'а це впливає на CheckBox "Enable all". Якщо вони всі позначені або не позначені, "Enable all" прийме той самий стан, або він прийме невизначений стан.

Все це можна побачити на фото вище. І все це досягається підпискою на події Checked Unchecked контролів CheckBox'а. Цей приклад показує використання властивості IsThreeToggle щоб створити ефект "Вибрати все"