In my last article, I discussed how to use Silverlight accordion control without data binding Build Interactive Content Slider using Accordion Control in Silverlight 4. In This article demonstrates how to use data binding in Silverlight accordion control using xml file.
What is Accordion control?
The Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time. The Accordion is implemented as a web control that contains AccordionItem web controls. Each AccordionItem control has a template for its Header and its Content. We keep track of the selected pane so it stays visible across postbacks.
First of all make a new Silverlight project and rename project name and select location to save the application.
Now add a new .XML file, here is my .xml file.
<?xml version="1.0" encoding="utf-8" ?>
<Contents>
<Content>
<Title>CONSULTING AND STAFFING</Title>
<ImageUri>../Services/IMG_1411-lr.jpg</ImageUri>
<RedirectText>Learn More >></RedirectText>
<RedirectUri>www.c-sharpcorner.com</RedirectUri>
<Description>Adapt brings you over 20 years of Software Development experience with all kinds of discilines, technologies and industries including Banking, Finance, Healthcare.....</Description>
</Content>
<Content>
<Title>SOFTWARE DEVELOPMENT</Title>
<ImageUri>../Services/IMG_1491-lr.jpg</ImageUri>
<RedirectText>Learn More >></RedirectText>
<RedirectUri>www.c-sharpcorner.com</RedirectUri>
<Description>Adapt brings you over 20 years of Software Development experience with all kinds of discilines, technologies and industries including Banking, Finance, Healthcare.....</Description>
</Content>
<Content>
<Title>PROJECT MANAGEMENT</Title>
<ImageUri>../Services/IMG_1493-lr.jpg</ImageUri>
<RedirectText>Learn More >></RedirectText>
<RedirectUri>www.c-sharpcorner.com</RedirectUri>
<Description>Adapt brings you over 20 years of Software Development experience with all kinds of discilines, technologies and industries including Banking, Finance, Healthcare.....</Description>
</Content>
<Content>
<Title>TECHNICAL TRAINING</Title>
<ImageUri>../Services/IMG_1614-lr.jpg</ImageUri>
<RedirectText>Learn More >></RedirectText>
<RedirectUri>www.c-sharpcorner.com</RedirectUri>
<Description>Adapt brings you over 20 years of Software Development experience with all kinds of discilines, technologies and industries including Banking, Finance, Healthcare.....</Description>
</Content>
<Content>
<Title>EMERGING ENTERPRISES</Title>
<ImageUri>../Services/IMG_1681-lr.jpg</ImageUri>
<RedirectText>Learn More >></RedirectText>
<RedirectUri>www.c-sharpcorner.com</RedirectUri>
<Description>Adapt brings you over 20 years of Software Development experience with all kinds of discilines, technologies and industries including Banking, Finance, Healthcare.....</Description>
</Content>
</Contents>
Now let's start working on .XAML Page.
Add a new refrence
xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
<UserControl x:Class="SilverlightApplication7.AccordionControl" xmlns:layoutToolkit="clr
namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
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">
<Grid x:Name="LayoutRoot" Width="800" Height="290" VerticalAlignment="Top" HorizontalAlignment="Left">
<layoutToolkit:Accordion x:Name="contentAccordianControl" VerticalAlignment="Stretch"
HorizontalAlignment="Stretch" ExpandDirection="Right" Cursor="Arrow"
Height="auto"
SelectionMode="One"
>
<layoutToolkit:Accordion.ItemContainerStyle>
<Style x:Name="accordionitemstyle1" TargetType="layoutToolkit:AccordionItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding Title}" FontFamily="Georgia" FontSize="16" FontWeight="Bold"
Foreground="Red" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</layoutToolkit:Accordion.ItemContainerStyle>
<layoutToolkit:Accordion.ContentTemplate >
<DataTemplate>
<StackPanel Height="auto" Width="auto" Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="370"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left" FontFamily="Arial" FontSize="20" Text="{Binding Path=Title}" Grid.Row="0" Margin="10,10,10,10" Grid.Column="0" />
<TextBlock HorizontalAlignment="Left" FontFamily="Arial" FontSize="12" Text="{Binding Path=Description}" Grid.Row="0" Grid.Column="0" Margin="10,50,10,10" TextWrapping="Wrap" />
<Image Source="{Binding Path=ImageUri}" Width="280" Height="280" Grid.Row="0" Grid.Column="1" />
</Grid>
</StackPanel>
</DataTemplate>
</layoutToolkit:Accordion.ContentTemplate>
</layoutToolkit:Accordion>
</Grid>
</UserControl>
Code Behind:
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.Browser;
using System.Xml.Linq;
using System.Xml;
using System.IO;
using System.Windows.Media.Imaging;
namespace SilverlightApplication7
{
public partial class AccordionControl : UserControl
{
private List<Content> contentList;
public AccordionControl()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(test_Loaded);
}
void test_Loaded(object sender, RoutedEventArgs e)
{
LoadXMLFile();
}
private void LoadXMLFile()
{
WebClient xmlClient = new WebClient();
xmlClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(XMLFileLoaded);
xmlClient.DownloadStringAsync(new Uri("Contents.xml", UriKind.RelativeOrAbsolute));
}
void XMLFileLoaded(object sender, DownloadStringCompletedEventArgs e)
{
if (e.Error == null)
{
contentList = new List<Content>();
XDocument xdoc = XDocument.Parse(e.Result);
foreach (XElement item in xdoc.Elements("Contents").Elements("Content"))
{
Content content = new Content();
content.Title = item.Element("Title").Value;
if (item.Element("ImageUri").Value.Contains("http"))
content.ImageUri = GetImage(item.Element("ImageUri").Value);
else
content.ImageUri = GetImage(item.Element("ImageUri").Value);
content.Description = item.Element("Description").Value;
contentList.Add(content);
}
//Binding list in accordion control
contentAccordianControl.ItemsSource = contentList;
}
}
public ImageSource GetImage(string path)
{
return new BitmapImage(new Uri(path, UriKind.Relative));
}
}
}
Output:
Image 1.
Image 2.
Image 3.
Image 4.
Image 5.
So we are done here, If you have any question and comments the post me comments in c-sharpcorner comments section.