Главная » Silverlight » Элементы, содержащие коллекции

0

Элементы управления, служащие оболочкой для коллекций элементов, наследу­ют класс itemsControl. Платформа Silverlight предоставляет четыре таких элемента: ListBox (Список), СошЬоВох (Раскрывающийся список) и TabControl (Панель вкладок) рассматриваются в данной главе, a TreeView — в главе 17.

Класс ItemsControl предоставляет компоненты, необходимые для создания эле­ментов управления на основе списков. Существует два способа заполнения списков элементами. Более простой способ состоит в непосредственном добавлении элементов в коллекцию Items с помощью кода XAML. Этот способ рассматривается в данной главе. Однако для динамического формирования списков необходимо использовать связыва­ние данных. В этом случае свойству ItemsSource присваивается объект, содержащий коллекцию элементов данных (см. главу 16).

Простой СПИСОК ListBox

Добавить элементы списка в объект ListBox можно, вложив элементы ListBoxIntem в элемент ListBox. Ниже приведена разметка списка, содержащего названия цветов.

<ListBox>

CListBoxItem Content="Зeлeный"></ListBoxItem>

<ListBoxItem Content="Синий"></ListBoxItem> <ListBoxItem Content="Жeлтый"></ListBoxItem> <ListBoxItem Content="Kpacный"></ListBoxItem> </ListBox>

Как показано в главе 2, разные элементы управления интерпретируют свое вложен­ное содержимое по-разному. Элемент ListBox сохраняет каждый вложенный объект в коллекции Items.

Примечание. Класс ListBox поддерживает множественное выделение. Для этого нужно присвоить свойству SelectionMode значение Multiple или Extended. В режиме Multiple можно выделить или отменить выделение любого элемента списка, щелкнув на нем. В режиме Extended можно выделить дополнительные элементы или диапазон значений с помощью клавиш <Ctrl> и <Shift>. В любом режиме для извлечения всех выделенных элементов используется коллекция Selectedltems (вместо свойства Selectedltem).

Список ListBox — очень гибкий элемент управления. Он может содержать не только объекты ListBoxltem, но и любые другие элементы. Это возможно благодаря тому, что класс ListBoxltem наследует класс ContentControl, который ограничивает дочерний класс, позволяя ему содержать только один вложенный элемент. Если таким элементом является класс, производный от UIElement, он будет отображен в списке ListBox. Если же вложен объект другого типа, объект ListBoxltem вызовет метод ToString () и вы­ведет полученную от него текстовую строку.

Ниже приведена разметка, создающая список изображений.

<ListBox> <ListBoxItem>

<Image Sourсе="happyface.j pg"></ Image> </ListBoxItem> <ListBoxItem>

<Image Source="happyface. jpg"></Image> </ListBoxItem> </ListBox>

Элемент ListBox способен создавать необходимые ему объекты ListBoxltem неявно. Это означает, что объекты можно помещать непосредственно в элемент ListBox. Ниже показано включение в список объектов StackPanel, содержащих изображения и текст.

<ListBox>

<StackPanel Orientation="Horizontal"> <Image Source="happyface.jpg" Width="30" Height="30"> </Image>

<TextBlock VerticalAlignment="Center" Text="Пoльзoвaтeль"></TextBlock> </StackPanel>

<StackPanel Orientation="Horizontal"> <Image Source="redx. jpg" Width="30" Height="30"></Image> <TextBlock VerticalAlignment="Center" Text="Предупреждение"></TextBlock> </StackPanel>

<StackPanel Orientation="Horizontal"> <Image Source="happyface.jpg" Width="30" Height="30"> </Image>

<TextBlock VerticalAlignment="Center" Text="Пoльзoвaтeль"></TextBlock> </StackPanel> </ListBox>

Рис. 5.11. Список, содержащий изображения и текст

Возможность вкладывать произвольные элементы в элементы списка позволяет создавать мощные списки без помощи специализированных классов. Например, рядом с каждым элементом списка можно разместить флажок. Для этого достаточно вложить элемент CheckBox в элемент ListBox.

При создании списка, в который вложены элементы разных типов, нужно учиты­вать, что при чтении значения Selectedltem (и коллекций Slectedltems и Items) воз­вращаются не объекты ListBoxltem, а объекты, размещенные в списке. В предыдущем примере это означает, что Selectedltem возвращает объект StackPanel.

Если элементы добавляются в список вручную, нужно выбрать способ размещения: или непосредственно в списке, или же каждый объект ListBoxltem явно заключается в оболочку. Например, если поместить объекты StackPanel непосредственно в список, то ListBox. Selectedltem будет возвращать StackPanel, а если заключить объекты StackPanel в оболочку объектов ListBoxltem, то ListBox. Selectedltem будет возвра­щать объекты ListBoxltem. Это необходимо учитывать в коде. Возможен еще один, тре­тий, вариант: поместить объекты данных в ListBox и применить шаблон данных для вывода нужных свойств (см. главу 16).

Объект ListBoxltem предоставляет дополнительные возможности по сравнению с непосредственным вложением объектов. В нем определены свойство IsSelected и со­бытия Selected и Unselected, сообщающие о выделении элемента списка. Впрочем, эти же возможности доступны при использовании членов класса ListBox, таких как событие SelectionChanged и свойства Selectedltem и Selectedlndex.

Примечание. В Silverlight 3 класс ListBox поддерживает виртуализацию благодаря размещению элементов с помощью контейнера VirtualizingStackPanel. Это означает, что ListBox создает объекты ListBoxltem только для видимых элементов. Благодаря виртуализации, ListBox может практически мгновенно выводить списки, содержащие тысячи элементов. Когда пользователь прокручивает список, существующие объекты ListBoxltem используются повторно, но с разными данными. Списочные элементы управления, не поддерживающие виртуализацию (т.е. все остальные, кроме ListBox и DataGrid), загружаются и прокручиваются намного медленее.

Раскрывающийся список СоmbоВох

В данном примере панель StackPanel становится элементом списка, заключенным в оболочку ListBoxItem. Элементов ListBoxltem вроде бы нет, но они все же использу­ются "за кулисами". Результат показан на рис. 5.11.

Этот элемент управления немного похож на простой список ListBox. Он содержит коллекцию объектов ComboBoxItem, созданных явно или неявно. Как и ListBoxltem, элемент ComboBoxItem наследует класс ContentControl и, следовательно, может содержать один вложенный элемент любого типа. В отличие от традиционных рас­крывающихся списков Windows, в элементе ComboBox, встроенном в Silverlight, нельзя вводить символы для выбора элемента или редактировать выбранное значение. Для вы­бора элемента списка необходимо использовать мышь или клавиши со стрелками.

Плавное отличие между элементами ComboBox и ListBox состоит в способе их ото­бражения на экране. Элемент ComboBox отображает раскрывающийся список. Это озна­чает, что за один раз может быть выбран только один элемент.

Для элемента ComboBox можно задать автоматическую установку размеров. Тогда он будет расширяться, пока в нем не поместится все содержимое. Следовательно, при переходе от одного элемента списка к другому размеры раскрывающегося списка могут изменяться. К сожалению, не существует способа вынудить раскрывающийся список принять ширину самого длинного элемента. Вместо этого можно в коде найти длину самого длинного элемента и жестко закодировать ее в значении свойства Width. Как видите, это довольно громоздкое и неэффективное решение, но другого пока нет.

Панель с вкладками TabControl

Без сомнения, вы знакомы с вкладками Windows — удобным контейнером, позво­ляющим распределить большое количество элементов интерфейса между несколькими вкладками. В Silverlight элемент управления TabControl содержит несколько элементов

Tabltem.

Как и другие специальные элементы управления Silverlight, элемент TabControl определен в отдельной сборке. При его добавлении на страницу программа Visual Studio автоматически добавляет на страницу новое пространство имен XML и ссылку на сбор­ку System.Windows.Controls.dll.

<UserControl xmlns:basics=

"clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls"

. . . >

Чтобы применить элемент управления TabControl, его нужно заполнить одним или несколькими элементами Tabltem. Каждый Tabltem представляет отдельную вкладку. Элемент Tabltem наследует класс ContentControl, поэтому он может содержать другой элемент Silverlight, например контейнер.

Ниже приведена разметка элемента управления TabControl, содержащего две вкладки. В первую вкладку вложена панель StackPanel, содержащая три флажка.

<basics:TabControl> <basics:Tabltem Неагіег="Вкладка 1"> <StackPanel Margin="3"> <CheckBox Margin="3" C0ntent="Флажок1 "></CheckBox> <CheckBox Margin="3" Content="Флажок 2"></CheckBox> <CheckBox Margin="3" Content="Флажок 3"></CheckBox> </StackPanel> </basics:Tabltem>

<basics: Tabltem Header="Bкладкa 2">

</basics:Tabltem>

</basics:TabControl>

Содержимое элемента Tabltem (в данном примере — панель StackPanel) находит­ся в свойстве Tabltem.Content. Кроме того, элемент Tabltem имеет свойство Header (Заголовок), в которое можно поместить любое содержимое. В предыдущем примере свойство Header содержит простую текстовую строку, однако в него можно добавить графическое содержимое или контейнер, содержащий набор элементов.

<basics:TabControl> cbasics:Tabltem> <basics:Tabltem.Header> <StackPanel> <TextBlock Магдіп="3">Вкладка l</TextBlock> <Image Source="happyface.jpg" Stretch="None" /> </StackPanel> </basics:Tabltem.Header>

<StackPanel Margin="3"> <CheckBox Margin="3" Content="Флажок l"></CheckBox> <CheckBox Margin="3" Content="Флaжoк 2"></CheckBox> <CheckBox Margin="3" Content="Флaжoк 3"></CheckBox> </StackPanel> </basics:Tabltem>

<basics: Tabltem Header="BioiaflKa 2">

</basics:TabItem> </basics:TabControl>

Результат показан на рис. 5.12.

Рис. 5.12. Две вкладки; на корешок первой вкладки добавлено изображение

Как и ListBox, элемент управления TabControl предоставляет событие Selection- Changed, генерируемое при щелчке на корешке вкладки, и свойства Selectedlndex и Selectedltem, позволяющие открыть нужную вкладку или выяснить, какая вкладка открыта. Свойство TabStripPlacement позволяет расположить корешки вкладок по бо­кам или снизу панели (по умолчанию корешки расположены сверху).

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии