Adding Images to the C1CoverFlow Control

In this topic, you’ll learn how to add images to the C1CoverFlow control in Blend, in XAML, and in code.

In Blend

Complete the following steps:

Add a C1CoverFlow control to your project.
In the Objects and Timeline panel, select [C1CoverFlow].
In the Assets panel, enter “Image” into the search field.
Double-click the Image icon to add the Image control to the C1CoverFlow control.
In the Objects and Timeline panel, select [Image].
Under the Properties tab, click the Source ellipsis button.

The Add Existing Item dialog box opens.

Navigate to the location of your image, select the image file, and click Open to add the image to the Image control.

In XAML

Complete the following steps:

Add a closing tag for the C1CoverFlow control so that the XAML appears similar to the following:

XAML	Copy Code
<c1ext:C1CoverFlow Margin="0,0,205,200"></c1ext:C1CoverFlow>

Place the following XAML between the <c1ext:C1CoverFlow> and </c1ext:C1CoverFlow> tags, replacing “YourImage.png” with the name of your image file:

XAML	Copy Code
<Image Height="100" Width="100" Source="YourImage.png"/>

In Code

Complete the following steps:

In XAML view, add “x:Name=”C1CoverFlow1” to the <c1ext:C1CoverFlow> tag so that the control will have a unique identifier for you to call in code.
Open the MainPage.xaml code page (either MainPage.xaml.cs or MainPage.xaml.vb, depending on which language you've chosen for your project).
Import the following namespace:

Visual Basic
Copy Code
Imports System.Windows.Media.Imaging

Visual Basic	Copy Code
Imports System.Windows.Media.Imaging

C#	Copy Code
using System.Windows.Media.Imaging;

Add the following code beneath the InitializeComponent method:

Visual Basic	Copy Code
' Create the Image control Dim Image1 As New Image() ' Create a bitmap image and add your image as its source Dim BitMapImage1 As New BitmapImage() BitMapImage1.UriSource = New Uri("Epica.jpg", UriKind.RelativeOrAbsolute) ' Add the bitmap image as the Image control's source Image1.Source = BitMapImage1 'Add the Image control to the C1CoverFlow control C1CoverFlow1.Items.Add(Image1)

Visual Basic

Copy Code

' Create the Image control
Dim Image1 As New Image()
' Create a bitmap image and add your image as its source
Dim BitMapImage1 As New BitmapImage()
BitMapImage1.UriSource = New Uri("Epica.jpg", UriKind.RelativeOrAbsolute)   
' Add the bitmap image as the Image control's source
Image1.Source = BitMapImage1     
'Add the Image control to the C1CoverFlow control
C1CoverFlow1.Items.Add(Image1)

C#	Copy Code
// Create the Image control Image Image1 = new Image(); // Create a bitmap image and add your image as its source BitmapImage BitMapImage1 = new BitmapImage(); BitMapImage1.UriSource = new Uri("Epica.jpg", UriKind.RelativeOrAbsolute); // Add the bitmap image as the Image control's source Image1.Source = BitMapImage1; //Add the Image control to the C1CoverFlow control C1CoverFlow1.Items.Add(Image1);

Copy Code

// Create the Image control
Image Image1 = new Image();                                         
// Create a bitmap image and add your image as its source
BitmapImage BitMapImage1 = new BitmapImage();
BitMapImage1.UriSource = new Uri("Epica.jpg", UriKind.RelativeOrAbsolute);                                          
// Add the bitmap image as the Image control's source
Image1.Source = BitMapImage1;                                       
//Add the Image control to the C1CoverFlow control
C1CoverFlow1.Items.Add(Image1);

Run the program.