.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create picture gallery using Accordion Control in Silverlight

Posted By:Dhananjay Kumar       Posted Date: March 28, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Create picture gallery using AccordionControl in Silverlight. This article will explain Basic use of Accordion control in Silverlight, Binding Accordion items with properties of entity class, Creating an Image source from Image URL provided
 

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 


1.gif



2.gif

 
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 GetTeams()
{
   List lstTeam = new List()
   {
                           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
   {
       public MainPage()
       {
           InitializeComponent();
           teamAccordianControl.ItemsSource = GetTeams();
       }
       public ImageSource GetImage(string path)
       {
           return new BitmapImage(new Uri(path,UriKind.Relative));
       }
       public List GetTeams()
       {
           List lstTeam = new List()
                               {
                                   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 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 


3.gif



4.gif



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.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend