Silverlight - Data Binding in Accordion Control in Silverlight

In my last article i discussed how to use Silverlight Accordion Control without data binding.In this post i will show you how to use data binding in Silverlight accordion control.i will show you same example.(Image Gallery)

Step 1
You need to download Silverlight 4 toolkit from the following link and install in you'r systemhttp://silverlight.codeplex.com/

Note : Select only April 2010 Toolkit Silverlight 4

Step 2
Create a Silverlight application and give the solution name as AccordianControl_Dynamic.

Step 3
Create a New Folder in the solution and give folder name as Images. Add five images like this

Step 4
Add XML file in the solution from the solution explorer and give the file name as ImageData.xml.


Step 5
The XML in the following example defines an XML document with a root node called Images. This root node contains one or more nodes called Image that include elements called
ImageName and ImagePath.

<?xml version="1.0" encoding="utf-8" ?>
<Images>

  <Image>
    <ImageName>Kakashi Hatake</ImageName>
    <ImagePath>../Images/Kakashi011.jpg</ImagePath>
  </Image>

  <Image>
    <ImageName>Jiraiya Sama</ImageName>
    <ImagePath>../Images/1_Jiraiya003.jpg</ImagePath>
  </Image>

  <Image>
    <ImageName>Naruto</ImageName>
    <ImagePath>../Images/Naruto.jpg</ImagePath>
  </Image>

  <Image>
    <ImageName>Gara</ImageName>
    <ImagePath>../Images/gara.jpg</ImagePath>
  </Image>

  <Image>
    <ImageName>Yamato</ImageName>
    <ImagePath>../Images/yamato.jpg</ImagePath>
  </Image>

</Images>

Step 6
Create a ImageEntity class in the solution,it is an entity class,it is look like this

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AccordianControl_Dynamic
{
    public class ImageEntity
    {

        #region property

        public String ImageName
        {
            get;
            set;
        }

        public String ImagePath
        {
            get;
            set;
        }

        #endregion

    }
}

Step 7
Add a System.Xml.Linq Assemble reference to the project.Right click on the project name in Solution Explorer, select Add Reference and System.Xml.Linq on the .NET Tab and select OK button.

Click on image for better View.

Step 8
Create a ImageView static class in a solution for retriving data from XML document.it is look like this

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
using System.Xml.Linq;
using System.Linq;

namespace AccordianControl_Dynamic
{
    public static class ImagesView
    {
        public static List<ImageEntity> GetAllImagesData()
        {
            try
            {
                // Load Xml Document
                XDocument XDoc = XDocument.Load("ImageData.xml");

                // Query for retriving all Images data from XML
                var Query = from Q in XDoc.Descendants("Image")
                            select new ImageEntity
                            {
                                ImageName = Q.Element("ImageName").Value,
                                ImagePath = Q.Element("ImagePath").Value
                            };

                // return images data
                return Query.ToList<ImageEntity>();
              
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);
            }
        }
    }
}

Step 9
Drag and drop a Accordion control from toolbox on page.it is look like this

<Grid x:Name="LayoutRoot">

        <toolkit:Accordion x:Name="ImageAccordian" Width="640" ExpandDirection="Right" VerticalAlignment="Stretch">
    
        </toolkit:Accordion>
        
        
        
</Grid>

Set ExpandDirection as Right.Default ExpandDirection is Down.

Step 10
Create a Data Template for Accordion Control.it is look like this

<UserControl.Resources>
        
        <!--For Change the header Name-->
        <Style x:Key="AccordionItemStyle" TargetType="toolkit:AccordionItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding ImageName}" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <!--For Change the Content-->
        <DataTemplate x:Key="AccordionContentDataTemplate">
            <Grid>
                <Image Source="{Binding ImagePath}" Width="400" Height="400"></Image>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    

Step 11
Apply Data Template on Accordion Control,it is look like this

<Grid x:Name="LayoutRoot">

        <toolkit:Accordion x:Name="ImageAccordian" Width="640" ExpandDirection="Right" VerticalAlignment="Stretch" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource AccordionItemStyle}" ContentTemplate="{StaticResource AccordionContentDataTemplate}" >
    
        </toolkit:Accordion>
        
    </Grid>

ItemSource Property- Gets or sets a collection used to generate the content of the itemsControl.

ItemContainerStyle Property - Gets or sets the style that is used when rendering the item containers.

ContentTemplate Property - Gets or sets the data template that is used to display the content of the ContentControl.

Step 12
Now Bind the data in Accordion Control in code behind,it is look like this

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;

namespace AccordianControl_Dynamic
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // Required to initialize variables
            InitializeComponent();

            BindImages(); // Bind Images in Constructor
        }

        #region Method
        /// <summary>
        /// Bind Images and Image name in Accordian Control
        /// </summary>
        private void BindImages()
        {
            try
            {
                // Store Data in List Box.
                List<ImageEntity> ListImagesObj = ImagesView.GetAllImagesData();

                // Check the List Object Count
                if (ListImagesObj.Count > 0)
                {
                    // Bind data in accordian control
                    ImageAccordian.DataContext = ListImagesObj;
                }
            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);  
            }
        }

        #endregion
    }
}

Run the Project.


Output
1.

Click on Image for Better View

2.

Click on Image for Better View

3.



Click on Image for Better View

4.

Click on Image for Better View

5.

Full XAML Code

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
    x:Class="AccordianControl_Dynamic.MainPage"
    Width="640" Height="480">
    
    <UserControl.Resources>
        
        <!--For Change the header Name-->
        <Style x:Key="AccordionItemStyle" TargetType="toolkit:AccordionItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="{Binding ImageName}" FontFamily="Arial"  FontSize="16"  FontWeight="Bold" Foreground="Red"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <!--For Change the Content-->
        <DataTemplate x:Key="AccordionContentDataTemplate">
            <Grid>
                <Image Source="{Binding ImagePath}" Width="400" Height="400"></Image>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    
    
    
    <Grid x:Name="LayoutRoot">

        <toolkit:Accordion x:Name="ImageAccordian" Width="640" ExpandDirection="Right" VerticalAlignment="Stretch" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource AccordionItemStyle}" ContentTemplate="{StaticResource AccordionContentDataTemplate}" >
    
        </toolkit:Accordion>
        
    </Grid>
</UserControl>

Download
Download Source Code