Windows Phone - Items Control (14)

Hello

ItemsControl is used to represent collection of objects.

ItemControl has the following hierarchy

Object

• DependencyObject

• UIElement

• FrameworkElement

• Control

• ItemesControl

• Selector

• ListBox

• ComboBox

• TemplatedItemsControl

• Panorama

•  Pivot

Important properties of ItemControl

• Items - collection of item objects
• ItemTemplate - DataTemplate of the item object

Source sample
ItemsControl_NK.zip


This sample uses two controls

• ItemsControl
• ListBox - a list with selectable items

Both control represent a list of sorted font files names which are entered via the code.

StaticItemsControl.xaml

StaticItemsControl.xaml.cs

Run the application and click the button "Static ItemsControl" to produce

Note that you can scroll the ListBox by pointing on it, click the mouse and drag it up or down, but not the ItemsControl, you need ScrollViewer for this.


Customize item display


We saw before  that DataTemplate can be used to render object which have no visual representation. Here i will show how each item in  a list of SolidColorBrush will be given a visual represntation of  :

• TextBlock with Text as the ARGB of the brush color
• Rectangle filled with the brush color

Source sample
ItemsControl_NK.zip


CustomizeItemDisplay.xaml

Run the application and click the button "Customize Item Display" to produce

ListBox Selection
ListBox derives from Selector which allows to select an object from a collection.

Selector has a property name SelectedIndex which is the index of the selected item or -1 if no item is selected. Item[SelectedIndex] is equal to the SelectedItem in case item was selected.
SelectedItem is backed by a dependency property so it can function as binding target.

SelectionChanged occurs when selection is changed.


Source sample
ItemsControl_NK.zip


This sample is built over the previous with one change - a TextBox was added . The TextBox Forground is binded to the ListBox.SelectedItem. The SelectedIndex is 0 to start with

Selection.xaml

Run the application and click the button "Selection" , select a color to produce :

Notice that change in the selected color cause a change in the text forground 

Binding to ItemSource

ItemSource :

• A property of ItemControl
• It is used to set the content of the ItemsControl
• Type is IEnumerable

In case the collection is changing dynamically then the collection should implement INotifyCollectionChanged e.g. ObserveableCollection




Sample source
ItemsControl_NK.zip

The sample show a collection of person and allow adding person to the collection. The person added is updated on the GUI.

The implementation includes :

• Resource name oPersons - ObservableCollection of CPerson
• Resource  name textBoxStyle - style for TextBlock
• Resource name textBlockDataTemplateName - DataTemplate for the person name
• Resource name textBlockDataTemplateFamily - DataTemplate for the person family
• oListBoxName - ListBox of person name
• oListBoxFamily -   ListBox of family name
• Add button - Add person name and family

Two binding here :

• oPersons - source is binded to oListBox - target. Note that oPersons can not be target because it is not dependency object
• ListBox item - source is binded to the TextBox - target 

ItemSource.xaml

Resources :

remark - due to some bug in VS2010 i had to use x:Key and not x:Name when i defined oPersons

ContentPanel :

Person.cs

Persons.cs

Remember the collection must be ObservableCollection to notify changes like adding item

Run the application and click the button "Selection" , select a color to produce :

Enter a name - Diego family Forlan and click Add to produce

Nathan