Списковые элементы управления

Списковые элементы управления (далее для краткости – списки) могут хранить и представлять коллекцию элементов. Для большинства списков доступна гибкая настройка внешнего вида, а также функции фильтрации, группировки и сортировки данных, однако в данном параграфе рассматриваются только простейшие аспекты работы со списками.

Все списки наследуются от класса ItemsControl, который определяет несколько полезных свойств:

Items – коллекция типа ItemCollection, сохраняющая элементы списка (свойство доступно только для чтения).

ItemsSource – свойство позволяет связать список с набором данных. Свойство доступно для установки во время выполнения приложения.

HasItems – булево свойство только для чтения. Показывает, имеются ли элементы в списке.

DisplayMemberPath – строковое свойство, определяющее отображаемое значение для элемента списка. DisplayMemberPath поддерживает синтаксис, который называется путь к свойству. Путь к свойству напоминает запись свойства агрегированного объекта, но без операций приведения типа. Например, если у кнопки btn задать в качестве содержимого строку, путь к свойству в виде "btn.Content[0]" будет означать первый символ строки.

ItemStringFormat – строка форматирования для элемента списка.

AlternationCount и AlternationIndex – свойства для настройки чередования визуальных стилей для элементов списка.

В разметке XAML дочерние объекты списка автоматически рассматриваются как его элементы. Правила отображения отдельного элемента аналогичны правилам, применяемым при показе содержимого ContentControl.

Списковые элементы управления можно разделить на три подгруппы: селекторы, меню, списки без категории. Селекторы допускают индексацию и выбор элементов списка. К селекторам относятся элементы управления ListBox, ComboBox, TabControl, ListView и DataGrid. Все селекторы наследуются от класса Selector, который предоставляет следующие свойства и события:

SelectedItem – первый выбранный элемент списка.

SelectedIndex – индекс выбранного элемента (-1, если ничего не выбрано).

SelectedValuePath – путь к свойству для значения выбранного элемента.

SelectedValue – значение выбранного элемента. Если не установлено свойство SelectedValuePath, это значение совпадает с SelectedItem.

SelectionChanged – событие, генерируемое при изменении SelectedItem.

В классе Selector определены два присоединённых булевых свойства, используемых с элементами списка, – IsSelected и IsSelectionActive. Второе свойство является свойством только для чтения и позволяет узнать, установлен ли на выделенном элементе фокус. Кроме этого, класс Selector имеет два присоединённых события – Selected и Unselected.

Элемент управления ListBox отображает список и допускает множественный выбор элементов. Эта возможность настраивается при помощи свойства SelectionMode, принимающего значения из одноимённого перечисления:

1. Single (по умолчанию) – можно выбрать только один элемент списка.

2. Multiple – можно выбрать несколько элементов. Щелчок по невыбранному элементу выбирает его, и наоборот.

3. Extended – множественный выбор, используя клавиши <Shift> и <Ctrl>.

У ListBox имеется коллекция SelectedItems, содержащая выбранные элементы списка. Каждый элемент в ListBox представлен объектом класса ListBoxItem, в котором определено булево свойство IsSelected и события Selected и Unselected. В разметке XAML ListBoxItem можно не использовать. Анализатор XAML выполняет самостоятельное «оборачивание» дочерних элементов в объекты ListBoxItem (замечание справедливо и для других списков).

<ListBox SelectionMode="Multiple" SelectedIndex="2">

<TextBlock Margin="5" Text="Text Block" />

<Button Margin="5" Content="Button" />

<CheckBox Margin="5" Content="Check Box" />

<RadioButton Margin="5" Content="Radio Button" />

<Label Margin="5" Content="Label" />

</ListBox>

Рис. 17. Элемент управления ListBox.

Класс ComboBox позволяет выбрать один элемент из списка, отображая текущий выбор и раскрывая список элементов по требованию. Отдельный элемент в ComboBox представлен объектом ComboBoxItem (унаследованным от ListBoxItem). Для описания состояния списка служит булево свойство IsDropDownOpen и связанные события DropDownOpened и DropDownClosed. Свойства IsEditable и IsReadOnly могут использоваться, чтобы подсвечивать и отображать элемент списка при вводе текста, связанного с элементом. Этот текст определяется в элементе списка при помощи присоединённого свойства TextSearch.Text или в ComboBox при помощи свойства TextSearch.TextPath.

Элемент управления TabControl – это простой набор страниц с закладками. По умолчанию закладки расположены вверху. Их положение можно изменить, используя свойство TabStripPlacement, принимающее значение из перечисления System.Windows.Controls.Dock. Каждая страница в TabControl – это объект класса TabItem. Класс TabItem – это контейнер с заголовком:

<TabControl SelectedIndex="1" TabStripPlacement="Left">

<TabItem Header="Tab 1">Content for Tab 1</TabItem>

<TabItem Header="Tab 2">Content for Tab 2</TabItem>

<TabItem Header="Tab 3">Content for Tab 3</TabItem>

</TabControl>

Рис. 18. Элемент управления TabControl.

Класс ListView унаследован от ListBox. Этот список позволяет настроить свой внешний вид при помощи свойства View с типом ViewBase. WPF поставляется с одним наследником класса ViewBase – классом GridView. При помощи GridView элемент управления ListView отображает данные в виде таблицы с колонками. Каждая колонка – это объект класса GridViewColumn, помещённый в коллекцию GridView.Columns. У колонки настраивается ширина, заголовок, отображаемые в колонке значения (при помощи привязки данных). GridView также поддерживает изменение размеров колонок и их перетаскивание во время работы приложения.

<ListView xmlns:sys="clr-namespace:System;assembly=mscorlib">

<ListView.View>

<GridView>

<GridViewColumn Header="Day" Width="40"

DisplayMemberBinding="{Binding Day}"/>

<GridViewColumn Header="Month" Width="60"

DisplayMemberBinding="{Binding Month}"/>

<GridViewColumn Header="Year" Width="60"

DisplayMemberBinding="{Binding Year}"/>

<GridViewColumn Header="Day of Week"

DisplayMemberBinding="{Binding DayOfWeek}"/>

</GridView>

</ListView.View>

<sys:DateTime>1/1/2012</sys:DateTime>

<sys:DateTime>1/7/2012</sys:DateTime>

<sys:DateTime>3/8/2012</sys:DateTime>

<sys:DateTime>4/24/2012</sys:DateTime>

<sys:DateTime>5/1/2012</sys:DateTime>

<sys:DateTime>5/9/2012</sys:DateTime>

</ListView>

Рис. 19. ListView показывает праздники полугодия.

Таблица DataGrid позволяет отображать и редактировать данные. Внешний вид DataGrid определяют колонки, которые хранятся в коллекции Columns. Колонки бывают нескольких классов (каждый унаследован от DataGridColumn):

1. DataGridTextColumn – отображает текст или поле ввода;

2. DataGridHyperlinkColumn – отображает гиперссылку;

3. DataGridCheckBoxColumn – передаёт булевы значения как CheckBox;

4. DataGridComboBoxColumn – отображает текст при просмотре и выпадающий список при редактировании;

5. DataGridTemplateColumn – колонка использует для отображения шаблоны, указанные в свойствах CellTemplate и CellEditingTemplate.

Колонки DataGrid могут быть описаны вручную или генерироваться автоматически на основе отображаемых данных. Каждая колонка допускает гибкую настройку своего внешнего вида. Ниже представлен пример использования элемента DataGrid:

<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">

<DataGrid.Columns>

<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>

<DataGridHyperlinkColumn Header="Website"

Binding="{Binding Site}" />

<DataGridCheckBoxColumn Header="Has kids?"

Binding="{Binding HasKids}" />

</DataGrid.Columns>

</DataGrid>

public class Person

{

public string Name { get; set; }

public Uri Site { get; set; }

public bool HasKids { get; set; }

}

// код в конструкторе MainWindow - заполняем DataGrid

var uri = new Uri("http://www.eden.com");

var adam = new Person {Name = "Adam", Site = uri, HasKids = true};

var eve = new Person {Name = "Eve", Site = uri, HasKids = true};

dataGrid.ItemsSource = new List<Person> {adam, eve};

Рис. 20. DataGrid в режиме редактирования.

Перейдём к рассмотрению элементов управления из категории меню. Класс Menu может содержать коллекцию любых объектов, но ожидается, что будут использованы объекты MenuItem и Separator. Separator – простой элемент, представляющий разделитель пунктов меню. MenuItem – это контейнер с заголовком (наследник HeaderedItemsControl). В случае MenuItem заголовок определяет отображаемый пункт меню, а свойство содержимого Items может содержать элементы подменю. MenuItem поддерживает «горячие клавиши». Этот класс также содержит свойства Icon и IsCheckable и определяет события Checked, Unchecked, SubmenuOpened, SubmenuClosed, Click.

<DockPanel LastChildFill="False">

<Menu DockPanel.Dock="Top">

<MenuItem Header="_File">

<MenuItem Header="_New..." />

<MenuItem Header="_Open..." />

<Separator />

<MenuItem Header="Sen_d To">

<MenuItem Header="Mail Recipient" />

<MenuItem Header="My Documents" />

</MenuItem>

</MenuItem>

<MenuItem Header="_Edit" />

<MenuItem Header="_View" />

</Menu>

</DockPanel>

Рис. 21. Пример меню.

Класс ContextMenu является контейнером объектов MenuItem и служит для представления контекстного меню некоторого элемента. В классе ContextMenu определены свойства для настройки места появления контекстного меню относительно элемента, с которым оно связано. Объект ContextMenu нельзя поместить в дерево элементов, а следует задавать как значение одноимённого свойства, определённого в классе FrameworkElement.

Рассмотрим списковые элементы без категории. Элемент управления TreeView отображает иерархию данных в виде дерева с узлами, которые могут быть свёрнуты и раскрыты. Каждый элемент в TreeView является объектом TreeViewItem. Класс TreeViewItem напоминает MenuItem – это тоже контейнер с заголовком Header и коллекцией дочерних элементов Items. Класс TreeViewItem содержит булевы свойства IsExpanded и IsSelected, а также события Expanded, Collapsed, Selected, Unselected.

<TreeView>

<TreeViewItem Header="ItemsControl">

<TreeViewItem Header="Selector">

<TreeViewItem Header="ListBox" />

<TreeViewItem Header="ComboBox" />

<TreeViewItem Header="TabControl" />

</TreeViewItem>

<TreeViewItem Header="HeaderedItemsControl" >

<TreeViewItem Header="MenuItem" />

<TreeViewItem Header="TreeViewItem" />

</TreeViewItem>

</TreeViewItem>

</TreeView>

Рис. 22. Простой TreeView.

Элемент управления ToolBar представляет панель инструментов. Он просто группирует кнопки, разделители (Separator) и другие дочерние элементы на одной панели. Хотя ToolBar можно разместить в произвольном месте, обычно один или несколько таких объектов размещают внутри элемента ToolBarTray, что позволяет перетаскивать и переупорядочить панели инструментов. Элемент управления StatusBar группирует элементы подобно ToolBar. Обычно элемент StatusBar размещается в нижней части окна.


Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: