Dhananjay Kumar

Objective

This article will explain

1. Basic use of Accordion control in Silverlight 3.0
   
2. Binding Accordion items with properties of entity class.
   
3. 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 stepsStep 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.

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.
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.
Step 6
On the page load bind the list of teams as item source to Accordion control.
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

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Net;

    5 using System.Windows;

    6 using System.Windows.Controls;

    7 using System.Windows.Documents;

    8 using System.Windows.Input;

    9 using System.Windows.Media;

   10 using System.Windows.Media.Animation;

   11 using System.Windows.Shapes;

   12 using System.Windows.Media.Imaging;

   13 

   14 namespace AccordianControl

   15 {

   16     public partial class MainPage : UserControl

   17     {

   18         public MainPage()

   19         {

   20             InitializeComponent();

   21             teamAccordianControl.ItemsSource = GetTeams();

   22         }

   23 

   24         public ImageSource GetImage(string path)

   25         {

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

   27         }

   28 

   29         public List<Team> GetTeams()

   30         {

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

   32                                  {

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

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

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

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

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

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

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

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

   41 

   42                                  };

   43             return lstTeam;

   44 

   45         }

   46     }

   47 }

   48 

   49 

 Step 7

In this step, I will design the page.

• Drag and drop a Accordion control from toolbox on page
  
• Set vertical and horizontal alignment of control to stretch.
  
• Set SelectionSequence to CollapsebeforeExpand
  
• Set SelectMode to ZeroOrOne
  
• Set the header using Accordion.ItemContainerStyle
  
• Inside Data template put a text block and bind to the TeamName property of Team entity class.
  
• Accordion.ContentTemplate create item of the Accordion control
  
• Inside Data Template put a Stack panel with orientation vertical.
  
• Put a Text block and bind to Caption property of Team entity class.
  
• Put an Image control and bind to TeamImage property of Team entity class.
  

   MainPage.Xaml

Now press F5 and output would be

Conclusion

 In this article, I have shown basic use of accordion control. I have shown how to bind Accordion items with different properties of an entity class. I will further modify this sample and add more functionality. Thanks for reading.