# Binding Objects in an Object Collection

## Content

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:

    ```vbnet
    ‘ 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
    ```

    ```csharp
    // 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 "{Binding}". 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 ![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/graphics/glyph.png) to set the **Width** property to **Auto**.
        * Click the **Height** property’s glyph ![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/graphics/glyph.png) 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 "{Binding}".
7. Run the project and observe that the images specified in the collection are now **C1CoverFlow** control items.
<br>
    ![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/silverlightdocuments/documents/graphics/check.png) **This Topic Illustrates the Following**:
<br>
    The following image demonstrates the results of this topic.
<br>
    ![](https://cdn.mescius.io/document-site-files/images/babf1807-69aa-4d8a-96b6-d6c6d9325368/silverlightdocuments/documents/graphics/c1coverflow/tbh/bindingobjects_final.png)