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:
1. Add a C1CoverFlow control to your project.
2. In the Objects and Timeline panel, select [C1CoverFlow].
3. In the Assets panel, enter “Image” into the search field.
4. Double-click the Image icon to add the Image control to the C1CoverFlow control.
5. In the Objects and Timeline panel, select [Image].
6. Under the Properties tab, click the Source ellipsis button.
The Add Existing Item dialog box opens.
7. 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:
1. Add a closing tag for the C1CoverFlow control so that the XAML appears similar to the following:
<c1:C1CoverFlow Margin="0,0,205,200"></c1:C1CoverFlow>
2. Place the following XAML between the <c1:C1CoverFlow> and </c1:C1CoverFlow> tags, replacing “YourImage.png” with the name of your image file:
<Image Height="100" Width="100" Source="YourImage.png"/>
In Code
Complete the following steps:
1. In XAML view, add “x:Name=”C1CoverFlow1” to the <c1:C1CoverFlow> tag so that the control will have a unique identifier for you to call in code.
2. Open the MainPage.xaml code page (either MainPage.xaml.csor MainPage.xaml.vb, depending on which language you've chosen for your project).
3. Import the following namespace:
Imports System.Windows.Media.Imaging
•C#
using System.Windows.Media.Imaging;
4. Add the following code beneath the InitializeComponent method:
' 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#
// 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);
5. Run the program.