In my previous article Data
Binding in Silverlight Accordion Control using XML we show how to bind
Accordion control using XML data file.
This article is going to explain how to bind each Accordion items
dynamically and how to put different colors and styles to every Accordion Item.
Getting
Started -
Creating
a Silverlight Application:
- Open Visual Studio 2010.
- Go to File => New => Project.
- Select Silverlight from the Installed templates and choose the Silverlight
Application template.
- Enter the Name and choose the location.
- Click OK.
In the New Silverlight Application wizard check the
"Host the Silverlight Application in a new Web site".
- Click OK.
- Adding an image in the solution:
- Right click on the solution, select Add => New Folder.
- Name the folder as Images and click OK.
- Right click on the Images folder, select Add =>Existing Item.
- Choose the image and click Ok.
First of all right click on ClientBin folder and add a
new .XML data file.
Here is my .xml data file.
Contents.XML
<?xml version="1.0" encoding="utf-8" ?>
<Contents>
<Content>
<Title>Consulting And Staffing</Title>
<ImageUri>../Services/IMG_1411-lr.jpg</ImageUri>
<ButtonText>Learn More >></ButtonText>
<ButtonRedirectUri>http://www.c-sharpcorner.com</ButtonRedirectUri>
<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>
<ButtonText>Learn More >></ButtonText>
<ButtonRedirectUri>http://www.modelingcorner.com</ButtonRedirectUri>
<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>
<ButtonText>Learn More >></ButtonText>
<ButtonRedirectUri>http://www.vbdotnetheaven.com</ButtonRedirectUri>
<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>
<ButtonText>Learn More >></ButtonText>
<ButtonRedirectUri>http://www.microsoft.com</ButtonRedirectUri>
<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>
<ButtonText>Learn More >></ButtonText>
<ButtonRedirectUri>http://www.google.com</ButtonRedirectUri>
<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>
Add a new class Content.cs
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 SilverlightApplication7
{
public class Content
{
public string Title { get; set; }
public ImageSource ImageUri { get;
set; }
public string ButtonText { get;
set; }
public Uri ButtonRedirectUri { get;
set; }
public string Description { get;
set; }
}
}
MainPage.xml
-
<UserControl x:Class="SilverlightApplication7.AccordionUsingXML" 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:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" xmlns:layoutPrimitivesToolkit="clr-namespace:System.Windows.Controls.Primitivesassembly=System.Windows.Controls.Layout.Toolkit">
<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">
<layoutToolkit:AccordionItem x:Name="csacc"
FontSize="18.667" FontWeight="Bold" FontFamily="Segoe
UI"
Foreground="#FFFBF9F9">
<layoutToolkit:AccordionItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF71717" Offset="0"/>
<GradientStop Color="#FFCC2D6E" Offset="1"/>
</LinearGradientBrush>
</layoutToolkit:AccordionItem.Background>
<Canvas Background="White" Height="290" Width="713">
<Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFDF9FD"
Offset="0.883"/>
<GradientStop Color="#FFD22051"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="csImage"
Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329"
Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>
<TextBlock TextWrapping="Wrap" Foreground="#FFF13421" LineHeight="21.333" FontSize="32" FontFamily="Sakkal
Majalla"
x:Name="csHeaderText"
FontWeight="Bold" Height="42" Width="266" TextAlignment="Center"
Canvas.Top="3" Canvas.Left="-4">
<TextBlock.Effect>
<DropShadowEffect Color="#FFD0CECE"/>
</TextBlock.Effect>
</TextBlock>
<Button x:Name="csButton"
Background="#FFE51B2E"
FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FFE51B2E" Foreground="#FF190678"
Height="37"
VerticalAlignment="Top" Width="118" Canvas.Left="46" Canvas.Top="204"/>
<TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252"
LineHeight="21.333" FontSize="14.667"
FontFamily="Verdana" x:Name="csDescriptionTextBlock" TextAlignment="left"
HorizontalAlignment="Left" Width="250" Canvas.Left="8" Canvas.Top="49" FontWeight="Bold"/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem x:Name="sdacc"
FontSize="18.667" FontWeight="Bold" FontFamily="Segoe
UI" Foreground="#FFFBF9F9">
<layoutToolkit:AccordionItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7E723" Offset="0"/>
<GradientStop Color="#FFE7E723" Offset="1"/>
</LinearGradientBrush>
</layoutToolkit:AccordionItem.Background>
<Canvas Background="White" Height="290" Width="713">
<Rectangle
Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFDF9FD"
Offset="0.883"/>
<GradientStop Color="#FFC8D220"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="sdImage"
Stretch="Fill" Height="225" VerticalAlignment="Top"
Width="329" Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>
<TextBlock TextWrapping="Wrap" Foreground="#FFF1E921" LineHeight="21.333" FontSize="32"
FontFamily="Sakkal Majalla" x:Name="sdHeaderTextBlock" FontWeight="Bold" Height="42"
Width="266" TextAlignment="Center"
Canvas.Top="3" Canvas.Left="-5">
<TextBlock.Effect>
<DropShadowEffect Color="#FFD0CECE"/>
</TextBlock.Effect>
</TextBlock>
<Button x:Name="sdButton"
Background="#FFA39D0A"
FontSize="16" FontWeight="Normal" FontFamily="Calibri"
BorderBrush="Yellow" Foreground="#FF785A06" Height="37" VerticalAlignment="Top" Width="121" Canvas.Left="58" Canvas.Top="204"/>
<TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top"
Foreground="#FF545252"
LineHeight="21.333" FontSize="14.667" FontFamily="Verdana"
x:Name="sdDescriptionTextBlock" TextAlignment="Left" HorizontalAlignment="Left" Width="250" Canvas.Left="7"
Canvas.Top="49" FontWeight="Bold"/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem x:Name="pmacc"
FontSize="18.667" FontWeight="Bold" FontFamily="Segoe
UI" Foreground="#FFFBF9F9">
<layoutToolkit:AccordionItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4775D4" Offset="0"/>
<GradientStop Color="#FF4775D4" Offset="1"/>
</LinearGradientBrush>
</layoutToolkit:AccordionItem.Background>
<Canvas Background="White" Height="290" Width="713"> <Rectangle
Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Width="713" d:LayoutOverrides="VerticalAlignment">
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFDF9FD"
Offset="0.883"/>
<GradientStop Color="#FF2023D2"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="pmImage"
Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329"
Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>
<TextBlock TextWrapping="Wrap" Foreground="#FF2167F1" LineHeight="21.333" FontSize="32"
FontFamily="Sakkal Majalla" x:Name="pmHeaderText"
FontWeight="Bold" Height="42" Width="226"
TextAlignment="Center"
Canvas.Left="7" Canvas.Top="3">
<TextBlock.Effect>
<DropShadowEffect Color="#FFD0CECE"/>
</TextBlock.Effect>
</TextBlock>
<Button x:Name="pmButton"
Background="#FF0A52A3"
FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FF5F47DA" Foreground="#FF3D21C6"
Height="37"
VerticalAlignment="Top" Width="128" Canvas.Left="51" Canvas.Top="204"/>
<TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252"
LineHeight="21.333" FontSize="14.667" FontFamily="Verdana" x:Name="pmDescriptionTextBlock" TextAlignment="Left"
HorizontalAlignment="Left" Width="250" Canvas.Left="11" Canvas.Top="49" FontWeight="Bold"/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem x:Name="ttacc"
FontSize="18.667" FontWeight="Bold" FontFamily="Segoe
UI"
Foreground="#FFFBF9F9">
<layoutToolkit:AccordionItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF71BA49" Offset="0"/>
<GradientStop Color="#FF3C8314" Offset="1"/>
</LinearGradientBrush>
</layoutToolkit:AccordionItem.Background>
<Canvas Background="White" Height="290" Width="713">
<Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFDF9FD"
Offset="0.883"/>
<GradientStop Color="#FF20D233"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="ttImage"
Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329"
Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>
<TextBlock TextWrapping="Wrap" Foreground="#FF4FC41C" LineHeight="21.333" FontSize="32"
FontFamily="Sakkal Majalla" x:Name="ttHeaderText"
FontWeight="Bold" Height="42" Width="193" TextAlignment="Center"
Canvas.Left="9" Canvas.Top="3">
<TextBlock.Effect>
<DropShadowEffect Color="#FFD0CECE"/>
</TextBlock.Effect>
</TextBlock>
<Button x:Name="ttButton"
Background="#FF0AA31A"
FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="Green"
Foreground="#FF067822" Height="37"
VerticalAlignment="Top" Width="131" Canvas.Left="31" Canvas.Top="204"/>
<TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252"
LineHeight="21.333" FontSize="14.667"
FontFamily="Verdana" x:Name="ttDescriptionTextBlock" TextAlignment="Left"
HorizontalAlignment="Left" Width="244" Canvas.Left="14" Canvas.Top="49" FontWeight="Bold"/>
</Canvas>
</layoutToolkit:AccordionItem>
<layoutToolkit:AccordionItem x:Name="eeacc"
FontSize="18.667" FontWeight="Bold" FontFamily="Segoe
UI" Foreground="#FFF3EEE9">
<layoutToolkit:AccordionItem.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE94F48" Offset="0"/>
<GradientStop Color="#FFDE8123" Offset="1"/>
</LinearGradientBrush>
</layoutToolkit:AccordionItem.Background>
<Canvas Background="White" Height="290" Width="713">
<Rectangle Stroke="#FFFDF9FD" Height="290" Canvas.Left="0" Canvas.Top="0" Width="713" d:LayoutOverrides="VerticalAlignment">
<Rectangle.Fill>
<LinearGradientBrush
EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FFFDF9FD"
Offset="0.883"/>
<GradientStop Color="#FFDE8223"
Offset="0.996"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image x:Name="eeImage"
Stretch="Fill" Height="225" VerticalAlignment="Top" Width="329"
Canvas.Left="262" Canvas.Top="6" d:LayoutOverrides="HorizontalAlignment, Width"/>
<TextBlock TextWrapping="Wrap" Foreground="#FFC48F1C" LineHeight="21.333" FontSize="32"
FontFamily="Sakkal Majalla" x:Name="eeHeaderText"
FontWeight="Bold" Height="42" Width="244" TextAlignment="Center"
Canvas.Top="3" Canvas.Left="3">
<TextBlock.Effect>
<DropShadowEffect Color="#FFD0CECE"/>
</TextBlock.Effect>
</TextBlock>
<Button x:Name="eeButton"
Background="#FFA3650A"
FontSize="16" FontWeight="Normal" FontFamily="Calibri" BorderBrush="#FFA3650A"
Foreground="#FF783506" Height="37"
VerticalAlignment="Top" Width="125" Canvas.Left="31" Canvas.Top="204"/>
<TextBlock Height="137" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#FF545252"
LineHeight="21.333" FontSize="14.667"
FontFamily="Verdana" x:Name="eeDescriptionTextBlock" TextAlignment="Left"
HorizontalAlignment="Left" Width="244" Canvas.Left="14" Canvas.Top="49" FontWeight="Bold"/>
</Canvas>
</layoutToolkit:AccordionItem>
</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 AccordionUsingXML : UserControl
{
private
List<Content>
contentList;
public
AccordionUsingXML()
{
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.ButtonText =
item.Element("ButtonText").Value;
content.ButtonRedirectUri =
new Uri(item.Element("ButtonRedirectUri").Value, UriKind.Absolute);
content.Description =
item.Element("Description").Value;
//if
(item.Element("ImageUri").Value.Contains("http"))
// content.ImageUri = new Uri(item.Element("ImageUri").Value,
UriKind.Relative);
//else
// content.ImageUri = new
Uri(item.Element("ImageUri").Value, UriKind.Relative);
contentList.Add(content);
}
//Used to
show data in first AccordionItem
csacc.Header =
contentList[0].Title.ToUpper();
csHeaderText.Text =
contentList[0].Title;
csImage.Source =
contentList[0].ImageUri;
csDescriptionTextBlock.Text =
contentList[0].Description;
csButton.Content =
contentList[0].ButtonText;
csButton.Click +=new RoutedEventHandler(csButton_Click);
//Used
to show data in second AccordionItem
sdacc.Header =
contentList[1].Title.ToUpper();
sdHeaderTextBlock.Text =
contentList[1].Title;
sdImage.Source =
contentList[1].ImageUri;
sdDescriptionTextBlock.Text =
contentList[1].Description;
sdButton.Content =
contentList[1].ButtonText;
sdButton.Click += new RoutedEventHandler(sdButton_Click);
//Used
to show data in third AccordionItem
pmacc.Header =
contentList[2].Title.ToUpper();
pmHeaderText.Text =
contentList[2].Title;
pmImage.Source =
contentList[2].ImageUri;
pmDescriptionTextBlock.Text =
contentList[2].Description;
pmButton.Content =
contentList[2].ButtonText;
pmButton.Click += new RoutedEventHandler(pmButton_Click);
//Used
to show data in fourth AccordionItem
ttacc.Header =
contentList[3].Title.ToUpper();
ttHeaderText.Text =
contentList[3].Title;
ttImage.Source =
contentList[3].ImageUri;
ttDescriptionTextBlock.Text =
contentList[3].Description;
ttButton.Content =
contentList[3].ButtonText;
ttButton.Click += new RoutedEventHandler(ttButton_Click);
//Used
to show data in fifth AccordionItem
eeacc.Header =
contentList[4].Title.ToUpper();
eeHeaderText.Text =
contentList[4].Title;
eeImage.Source =
contentList[4].ImageUri;
eeDescriptionTextBlock.Text =
contentList[4].Description;
eeButton.Content =
contentList[4].ButtonText;
eeButton.Click += new RoutedEventHandler(eeButton_Click);
//Binding
list in accordion control
//contentAccordianControl.ItemsSource
= contentList;
}
}
void eeButton_Click(object
sender, RoutedEventArgs e)
{
string
redirectStr4 = contentList[4].ButtonRedirectUri.ToString();
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri(redirectStr4));
}
void
ttButton_Click(object sender, RoutedEventArgs e)
{
string
redirectStr3 = contentList[3].ButtonRedirectUri.ToString();\
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri(redirectStr3));
}
void
pmButton_Click(object sender, RoutedEventArgs e)
{
string
redirectStr2 = contentList[2].ButtonRedirectUri.ToString();
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri(redirectStr2));
}
void
sdButton_Click(object sender, RoutedEventArgs e)
{
string
redirectStr1 = contentList[1].ButtonRedirectUri.ToString();
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri(redirectStr1));
}
void
csButton_Click(object sender, RoutedEventArgs e)
{
//App
application = (App)Application.Current;
//App.NavigateToPage(new
Login());
string
redirectStr = contentList[0].ButtonRedirectUri.ToString();
System.Windows.Browser.HtmlPage.Window.Navigate(new
Uri(redirectStr));
}
public ImageSource GetImage(string
path)
{
return
new BitmapImage(new Uri(path, UriKind.Relative));
}
}
}
Output-
![1.jpg]()
Image 1.
![2.jpg]()
Image 2.
![3.jpg]()
Image 3.
![4.jpg]()
Image 4.
![5.jpg]()
Image 5.
This is it. If you have questions and comments feel
free to post on c-sharpcorner comments section.