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

<UserControl xmlns:layoutToolkit=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit”
x:Class=”AccordianControl.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;


mc:Ignorable=”d” d:DesignWidth=”*” d:DesignHeight=”*” Background=”Azure” >


<Grid x:Name=”LayoutRoot” Height=”620″ Width=”420″ >


<layoutToolkit:Accordion x:Name=”teamAccordianControl”


HorizontalAlignment=”Stretch”


VerticalAlignment=”Stretch”


SelectionSequence=”CollapseBeforeExpand”


Height=”auto”


SelectionMode=”ZeroOrOne”>


<layoutToolkit:Accordion.ItemContainerStyle>


<Style x:Name=”accordionitemstyle1″ TargetType=”layoutToolkit:AccordionItem”>


<Setter Property=”HeaderTemplate”>


<Setter.Value>


<DataTemplate>


<TextBlock Text=”{Binding TeamName}” />


</DataTemplate>


</Setter.Value>


</Setter>


</Style>


</layoutToolkit:Accordion.ItemContainerStyle>


<layoutToolkit:Accordion.ContentTemplate >


<DataTemplate>


<StackPanel Height=”auto” Width=”auto” Orientation=”Vertical”>


<TextBlock HorizontalAlignment=”Center” FontFamily=”Arial” FontSize=”20″ Text=”{Binding Path=Capatin}” />


<Image Source=”{Binding Path=TeamImage}”/>


</StackPanel>


</DataTemplate>


</layoutToolkit:Accordion.ContentTemplate>


</layoutToolkit:Accordion>


</Grid>

</UserControl>

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.

Advertisements

2 thoughts on “Creating IPL Photo gallery using AccordionControl in Silverlight 3.0: Part #1

  1. Very good blog! Do you have any helpful hints for aspiring
    writers? I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like
    Wordpress or go for a paid option? There are so many
    options out there that I’m completely overwhelmed .. Any recommendations? Appreciate it!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s