Creating Photo gallery using AccordionControl in Silverlight 3.0: Part I

Dhananjay Kumar
Mar 18, 2010
12.4k
0
0
Article

Objective

This article will explain

Basic use of Accordion control in Silverlight 3.0
Binding Accordion items with properties of entity class.
Creating an Imagesource from Image URL provided.

Background

This article is first part of 3 or 4 parts IPL Photo Gallery series. In this article, I am reading image, team name and caption name from hard coded list. I have added images in the project as existing items. In further article I will modify this to read from database using WCF.

Expected output

Follow the steps

Step 1

Create a Silverlight application.

Step 2

Create an entity class. This class will contain as property, TeamName and TeamImage of the IPL team. Team entity class is as below. Just right click on Silverlight project and add a new class named Team.

namespace AccordianControl

{

public class Team

{

public string TeamName { get; set; }

public string Capatin { get; set; }

public ImageSource TeamImage { get; set; }

}

Type of TeamImage is ImageSource because I am going to bind this property directly to a imagesource.

Step 3

In this step, I will get an image from the path of the image provided. I have created function that is returning an ImageSource.

public ImageSource GetImage(string path)

{

return new BitmapImage(new Uri(path,UriKind.Relative));

}

Step 4

Right click and add images in Silverlight project. To do so; right click and select add existing items. I have added 8 images corresponding to 8 teams of IPL.

Step 5

In this step, I am creating a function to return list of Teams.

public List<Team> GetTeams()

{

List<Team> lstTeam = new List<Team>()

{

new Team{TeamName="Rajasthan Royals " , TeamImage = GetImage("RR.jpg"),Capatin="Shane Warne"},

new Team{TeamName="Delhi DareDevils " , TeamImage = GetImage("DD.jpg"),Capatin="Gautam Gambhir"},

new Team{TeamName="Chenni SuperKing " , TeamImage = GetImage("CS.jpg"),Capatin="Mahendra Singh Dhoni"},

new Team{TeamName="Mumbai Indians " , TeamImage = GetImage("MI.jpg"),Capatin="Sachin Tendulkar"},

new Team{TeamName="Kolkatta KnightRiders " , TeamImage = GetImage("KK.jpg"),Capatin="Saurabh Ganguli"},

new Team{TeamName="Royal Challenger Bangalore " , TeamImage = GetImage("RC.jpg"),Capatin="Anil Kumble"},

new Team{TeamName="Deccan Charger Hyderabad " , TeamImage = GetImage("DC.jpg"),Capatin="Adam Ghilchrist"},

new Team{TeamName="Kings 11 Punjab" , TeamImage = GetImage("KP.jpg"),Capatin="Kumar Sangakara"}

};

return lstTeam;

}

Step 6

On the page load bind the list of teams as item source to Accordion control.

public MainPage()

{

InitializeComponent();

teamAccordianControl.ItemsSource = GetTeams();

}

Here teamAccordianControl is name of the Accordion control added on XAML page.

So, complete code for MainPage.Xaml.cs is as below

MainPage.Xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Media.Imaging;

namespace AccordianControl

{

public partial class MainPage : UserControl