Содержание
ListBox — это элемент управления, представляющий собой список элементов. Каждый элемент коллекции представляет собой объект класса ListBoxItem и является типичным элементом управления содержимым. В этой статье рассмотрим некоторые типовые вопросы использования ListBox в WPF, а также разберем несколько вопросов, связанных с работой этого элемента управления с внешними данными.
Примеры создания ListBox в WPF (XAML)
Пример 1. ListBox, содержащий простые строки
Для начала, создадим ListBox, содержащий обычные строки (string). В XAML такой список может выглядеть следующим образом:
<ListBox>
<ListBoxItem>Элемент 1</ListBoxItem>
<ListBoxItem>Элемент 2</ListBoxItem>
<ListBoxItem>Элемент 3</ListBoxItem>
<ListBoxItem>Элемент 4</ListBoxItem>
<ListBoxItem>Элемент 5</ListBoxItem>
</ListBox>
Соответственно, внешний вид запущенного приложения WPF будет следующим:
Элементы ListBoxItem могут содержать в себе и другие вложенные элементы. Рассмотрим пример посложнее.
Пример 1. ListBox, содержащий другие элементы управления
Создадим ListBox, в котором каждый элемент будет состоять из двух элементов TextBlock.
<ListBox>
<ListBoxItem>
<StackPanel>
<TextBlock FontSize="16" FontStyle="Italic" FontFamily="Arial Black" FontWeight="Bold" >Элемент 1</TextBlock>
<TextBlock FontSize="12" FontWeight="Light">Подзаголовок</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel>
<TextBlock FontSize="16" FontStyle="Italic" FontFamily="Arial Black" FontWeight="Bold" >Элемент 2</TextBlock>
<TextBlock FontSize="12" FontWeight="Light">Подзаголовок</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel>
<TextBlock FontSize="16" FontStyle="Italic" FontFamily="Arial Black" FontWeight="Bold" >Элемент 3</TextBlock>
<TextBlock FontSize="12" FontWeight="Light">Подзаголовок</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
В этом примере мы создали ListBox, в котором каждый элемент — это StackPanel, содержащая по два элемента TextBlock и, при этом, один TextBlock выступает в качестве заголовка элемента, а второй — содержит обычный текст. В запущенном приложении этот ListBox будет выглядеть следующим образом:
Также, мы можем менять и другие свойства элементов, например, делать заливку элементов другим цветом, добавлять другие элементы управления и так далее. Теперь рассмотрим примеры доступа к элементам в ListBox.
Доступ к элементам в ListBox
Пример 3. Получение строки из ListBoxItem
Попробуем получить строки из элементов ListBox, который мы создавали в примере №1. Допустим, нам необходимо вывести сообщение (MessageBox) с текстом элемента при клике мышкой по нему. Доработаем наш ListBox следующим образом:
<ListBox x:Name="simpleList">
<ListBoxItem Content="Элемент 1"/>
<ListBoxItem Content="Элемент 2"/>
<ListBoxItem Content="Элемент 3"/>
<ListBoxItem Content="Элемент 4"/>
<ListBoxItem Content="Элемент 5"/>
</ListBox>
Теперь создадим обработчик события MouseUp у ListBox:
private void simpleList_MouseUp(object sender, MouseButtonEventArgs e)
{
if (simpleList.SelectedItem != null)
{
ListBoxItem li = (ListBoxItem)simpleList.Items[simpleList.SelectedIndex];//получаем доступ к элементу
MessageBox.Show((string)li.Content);//получаем текст
}
}
Итоговый код ListBox в XAML должен получиться вот таким:
<ListBox x:Name="simpleList" MouseUp="simpleList_MouseUp">
<ListBoxItem Content="Элемент 1"/>
<ListBoxItem Content="Элемент 2"/>
<ListBoxItem Content="Элемент 3"/>
<ListBoxItem Content="Элемент 4"/>
<ListBoxItem Content="Элемент 5"/>
</ListBox>
Результат работы программы показан на рисунке ниже:
Теперь рассмотрим второй ListBox и попробуем добраться до текста элементов, состоящих из отдельных TextBlock.
Пример 4. Получение доступа к элементам ListBox
Основная сложность заключается в том, чтобы правильно добраться до нужного нам TextBlock. Для ListBox приведенного в примере 2 это можно сделать следующим образом:
if (!(sender is ListBox))
return;
ListBox list = (ListBox)sender; //получаем ListBox
ListBoxItem item = (ListBoxItem)list.Items[list.SelectedIndex];//получаем доступ к выделенному элементу
StackPanel panel = (StackPanel)item.Content; //получаем доступ к панели
string result = "";
foreach (UIElement element in panel.Children)
{
if (element is TextBlock block) //проверяем, является ли текущий элемент панели текстовым блоком
{
result += block.Text;
result += ".";
}
}
MessageBox.Show(result);
Результат работы программы представлен на рисунке ниже:
Загрузка данных в ListBox из XML-файла
Довольно часто необходимо подгружать данные в ListBox из внешних источников данных, например из XML-файла. Рассмотрим пример того, как можно получить данные в ListBox из внешнего файла.
Создаем XML-файл
В принципе, XML-файл может быть какой угодно, главное, чтобы вы сами знали, какие именно данные необходимо из него получить. Например, создадим XML-файл, содержащий информацию по людям:
<?xml version="1.0" encoding="utf-8" ?>
<people>
<person>
<fullName>Пупкин Вася</fullName>
<position>Дворник</position>
<phone>+1(123)23345678</phone>
</person>
<person>
<fullName>Иванов Петя</fullName>
<position>Программист</position>
<phone>+1(123)55545678</phone>
</person>
<person>
<fullName>Петров Вова</fullName>
<position>Директор</position>
<phone>+1(123)55545999</phone>
</person>
</people>
В нашем проекте этот файл будет лежать в корневой папке и в обозревателе решений он будет выглядеть следующим образом:
Выделите в обозревателе решений файл peoples.xml и в свойствах установите следующие его свойства, как показано на рисунке:
Теперь мы можем подгружать из этого файла данные в ListBox.
Загружаем данные из XML-файла в ListBox (XmlDataProvider)
Класс XmlDataProvider используется для подключения к xml-документам. При этом xml-документ может быть как локальным xml-файлом, так и и xml-данными из Сети. Для связи с источником данных XmlDataProvider использует следующие свойства:
Source: устанавливает источник данныхXPath: задает путь внутри документа xml к целевому набору данныхDocument: устанавливает ссылку на xml-документIsAsynchronous: при значенииtrueзагружает данные асинхронно
Теперь обратимся к нашему XML-файлу, используя XmlDataProvider. Для этого в XAML добавим следующий код:
<Window.Resources>
<XmlDataProvider x:Key="peopleProvider" Source="peoples.xml" XPath="people" />
</Window.Resources>
XmlDataProvider определяется в XAML как ресурс, а его свойству Source присваивается путь к xml-файлу. Свойство XPath указывает, что все данные для провайдера в файле будут расположены в рамках элемента <people>.
Теперь загрузим данные в ListBox. Для этого у ListBox допишем следующие свойства:
<ListBox x:Name="xmlList"
ItemsSource="{Binding Source={StaticResource peopleProvider}, XPath=person}"
DisplayMemberPath="fullName" />
Таким образом, мы указали, что данные для каждого элемента ListBox будут браться из узла person в XML-файле и отображаться будет значение из узла fullName. В рабочем приложении это будет выглядеть следующим образом:
Итого
Сегодня мы узнали основные моменты по работе с ListBox в WPF, научились создавать ListBox, содержащий строки, а также другие элементы управления. Также мы рассмотрели вопрос того, каким образом можно загрузить данные из XML-файла в ListBox, используя возможности XAML.