Binding Objects in an Object Collection

The C1CoverFlow control can be bound to a collection of items. In this section, you will bind the control to an ObservableCollection of type string. The collection you will bind to will be passed as a data context. This topic assumes you are working in Microsoft Expression Blend and that you have added a C1CoverFlow control to your project.

Complete the following steps:

1. Select the C1CoverFlow control and set the following properties:

   • Set the Width property to “400”.
   • Set the Height property to “200”.
   • Set the SelectedIndex property to “2”.

2. Add images to the project by completing the following steps:

   1. In the Projects panel, right-click the project to open its context menu and select Add New Folder; name the new folder “Images”.
   2. Right-click the Images folder and select Add Existing Item. The Add Existing Item dialog box opens.
   3. Navigate to the following location:
      • In XP: C:\Documents and Settings\<username>\My Documents\ComponentOne Samples\Studio for Silverlight\QuickStart\QuickStart
      • Windows7/Vista: C:\Users\<username>\Documents\ComponentOne Samples\Studio for Silverlight\QuickStart\QuickStart
   4. Select cover1.jpg, cover2.jpg, cover3.jpg, cover4.jpg, and cover5.jpg.
   5. Click Open to close the Add Existing Item dialog box and to add the images to the folder. The images are added to the Images folder.

3. Open the MainPage.xaml code page (either MainPage.xaml.cs or MainPage.xaml.vb).

4. Place the following code beneath the Initialize() method:

   ‘ Create the ObservableCollection
   Dim bluRayCovers As New System.Collections.ObjectModel.ObservableCollection(Of String)()
   bluRayCovers.Add("Images/cover1.jpg")
   bluRayCovers.Add("Images/cover2.jpg")
   bluRayCovers.Add("Images/cover3.jpg")
   bluRayCovers.Add("Images/cover4.jpg")
   bluRayCovers.Add("Images/cover5.jpg")
   ‘ Pass the collection to the control as a data context
   Me.DataContext = bluRayCovers
   

   // Create the ObservableCollection
   System.Collections.ObjectModel.ObservableCollection<string>bluRayCovers = new System.Collections.ObjectModel.ObservableCollection<string>();
   bluRayCovers.Add("Images/cover1.jpg");
   bluRayCovers.Add("Images/cover2.jpg");
   bluRayCovers.Add("Images/cover3.jpg");
   bluRayCovers.Add("Images/cover4.jpg");
   bluRayCovers.Add("Images/cover5.jpg");
   //Pass the collection to the control as a data context
   this.DataContext = bluRayCovers;
   

5. Bind the collection to the control by completing the following steps:

   1. Return to Design view.
   2. Select the C1CoverFlow control to reveal its list of properties in the Properties panel.
   3. Next to the ItemsSource property, click the Advanced options button and select Custom Expression.
   4. Set the Custom expression field to "". This sets up the ItemsSource to pass the DataContext directly to its template, which you will create in the next step.

6. Create a DataTemplate with an Image control and then bind the Image control’s Source property to the collection by completing the following steps:

   1. Right-click the C1CoverFlow control and select Edit Additional Templates | Edit Generated Items | Create Empty. The Create ControlTemplate Resource dialog box opens.
   2. In the Name (Key) field, enter “ImageTemplate”.
   3. Click OK to close the Create ControlTemplate Resource dialog box and create the template.
   4. In the Assets panel, enter “Image” into the search bar and then double-click the Image icon to add the Image control to the template.
   5. Select the Image control to reveal its list of properties in the Properties panel and then complete the following:
      • Click the Width property’s glyph to set the Width property to Auto.
      • Click the Height property’s glyph to set the Height property to Auto.
      • Click the Source property’s Advanced options button, select Custom Expression, and set the Custom expression field to "".

7. Run the project and observe that the images specified in the collection are now C1CoverFlow control items.

   This Topic Illustrates the Following:

   The following image demonstrates the results of this topic.