Post
Ask Question

Silverlight Accordion Binding using XML – Part 2


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.

 


Similar Articles