The C1CoverFlow is user interface used to display a group of images (usually of album covers) in an animated, three-dimensional format. To add an image to the C1CoverFlow control, you must create a C1Cover object and set its ImageUrl property to the path of your image. In this topic, you will add a C1CoverFlow control to your project and add five C1Cover objects, each hosting its own image, to the control. This topic assumes that you have created an AJAX-enabled ASP.NET project that contains a ScriptManager control (see Creating an AJAX-Enabled ASP.NET Project) and a C1CoverFlow control.
Complete the following steps:
1. Click the Source tab to enter Source view.
2. Create three C1Cover objects by adding the following markup between the <cc1:C1CoverFlow> and </cc1:C1CoverFlow> tags:
<Covers>
<cc1:C1Cover>
</cc1:C1Cover>
<cc1:C1Cover>
</cc1:C1Cover>
<cc1:C1Cover>
</cc1:C1Cover>
<cc1:C1Cover>
</cc1:C1Cover>
<cc1:C1Cover>
</cc1:C1Cover>
</Covers>
3. Add images to your project by completing the following steps:
a. In the Solution Explorer, right-click the project to open its context menu and select New Folder. Name the new folder "Images".
b. Right-click the folder to open its context menu and select Add Existing Item.
c. In the Add Existing Item dialog box, navigate to the images you want to add to the control, select them, and then click OK to add them to the project.
4. Add your images to each cover by entering ImageUrl="~/Images/[YourImageName]" to the <cc1:C1Cover> tags. The resulting markup should resemble the following:
<cc1:C1Cover ImageUrl="~/Images/Kiss.jpg">
</cc1:C1Cover>
<cc1:C1Cover ImageUrl="~/Images/ACDC.jpg">
</cc1:C1Cover>
<cc1:C1Cover ImageUrl="~/Images/Zeppelin.jpg">
</cc1:C1Cover>
<cc1:C1Cover ImageUrl="~/Images/BeachBoys.jpg">
</cc1:C1Cover>
<cc1:C1Cover ImageUrl="~/Images/DeepPurple.jpg">
</cc1:C1Cover>
5. Open the project in Mobile Safari and observe that five images have been added to the C1CoverFlow control. The result will resemble the following image: