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
{
public MainPage()
{
InitializeComponent();
teamAccordianControl.ItemsSource = GetTeams();
}
public ImageSource
GetImage(string path)
{
return new BitmapImage(new Uri(path,UriKind.Relative));
}
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 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"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
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.