Wednesday, March 16, 2011

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 system
http://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

5 comments:

  1. Good Article...:)
    MOhan

    ReplyDelete
    Replies
    1. Thank You for sharing your article, This is an interesting & informative blog. It is very useful for the developer like me. Kindly keep blogging. Besides that Wisen has established as Best Corporate Training in Chennai .

      Nowadays JavaScript has tons of job opportunities on various vertical industry. Know more about JavaScript Framework Training visit Corporate Training Companies in India.

      This post gives me detailed information about the technology. corporate training companies in india

      Delete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a .Net developer learn from Dot Net Training in Chennai. or learn thru Dot Net Training in Chennai. Nowadays Dot Net has tons of job opportunities on various vertical industry.
    or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete