Item Control in Windows Phone 7

This article demonstrates how to use Item Control in Silverlight Windows Phone 7. Item control and its derivatives show the collection of records. Using selector user can select one or more records from the collection.

Getting Started

Creating a Windows Phone Application:

Open Visual Studio 2010.

Go to File => New => Project

Select Silverlight for Windows Phone from the Installed templates and choose Windows Phone Application

Enter the Name and choose the location.

Click OK

First of all drag and drop a ItemControl ,ListBox and a ComboBox.

MainPage.xaml

<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ItemsControl Name="StatesItemControl" Grid.Column="0"></ItemsControl>
<ListBox Name="StatesListBox" Grid.Column="1"></ListBox>
<ComboBox Name="StatesComboBox" Grid.Column="2" VerticalAlignment="Top" Foreground="Black"
</ComboBox>
</Grid>

MainPage.xaml.cs

// Constructor
public MainPage()
{
InitializeComponent();
FillStates(StatesItemControl);
FillStates(StatesListBox);
FillStates(StatesComboBox);
}

void FillStates(ItemsControl items)
{
string[] states = { "Alabama", "Alaska", "Arizona", "Arkansas", "California",
"Colorado", "Connecticut","Delaware","District of Columbia",
"Florida","Georgia","Hawaii","Idaho", "Illinois",
"Indiana","Iowa","Kansas", "Kentucky", "Louisiana",
"Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana", "Nebraska", "Nevada",
"New Hampshire", "New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio Oklahoma", "Oregon",
"Pennsylvania", "Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas", "Utah", "Vermont",
"Virginia", "Washington", "West Virginia","Wisconsin",
"Wyoming", "Puerto Rico", "Virgin Island",
"Northern Mariana Islands", "Guam", "American Samoa", "Palau"};
foreach (string state in states)
items.Items.Add(state);
}

Run to see the result:

Image 1.

As you can see there is no scroll in Item Control if you want to put scroll in Item Control then put in ScrollViewer.

Image 2.

When you touch on combo box then states list should be display like this.

Image 3.