Accordian Control in Silverlight

Introduction

This article demonstrate how can we create Accordian Control dynamically in silverlight.

We can create accordion control in silverlight dynamically.

Step 1: Create Accordian Control dynamically

        //Accordian Control

    Accordion accor=new Accordion();
            accor = new Accordion();
            accor.Height = 223;
            accor.Width = 200;
            accor.VerticalAlignment = VerticalAlignment.Top;
            accor.HorizontalAlignment = HorizontalAlignment.Center;
            Color bgColor = new Color();
                bgColor.R = 0;
                bgColor.G = 89;
                bgColor.B = 192;
                bgColor.A = 255;
 
      //AccordionItem

AccordionItem AcorItems = new AccordionItem();
            AcorItems.Header = "Customer";
            AcorItems.Background = new SolidColorBrush(bgColor);
            AccordionItem AcorItems1 = new AccordionItem();
            AcorItems1.Header = "Emplyoee";
            AcorItems1.Background = new SolidColorBrush(Colors.LightGray);
            AccordionItem AcorItems2 = new AccordionItem();
            AcorItems2.Header = "Customer Data";
            AcorItems2.Background = new SolidColorBrush(bgColor);

We can add any control in accordianItem as their content. Suppose we have canvas control and
Image control.

    //Canvas
            Canvas canvas = new Canvas();
            canvas.Height = 200;
            canvas.Width = 200;

Add this image in canvas using their LeftProperty and TopProperty.

    //Image
            Image image = new Image();
            image.Height = 70;
            image.Width = 60;
            image.Stretch = Stretch.Fill;
            image.Source = new BitmapImage(new Uri("/DynamicAccordianControl;component/Images/emp1image.jpg", UriKind.Relative));
            image.SetValue(Canvas.LeftProperty, 42.0);
            image.SetValue(Canvas.TopProperty, 15.0);

canvas.Children.Add(image);

Add TextBlock in canvas as following way.

//TextBlock

 TextBlock textb = new TextBlock();
            textb.Text = "I am Customer";
            textb.SetValue(Canvas.LeftProperty, 30.0);
            textb.SetValue(Canvas.TopProperty, 86.0);
            textb.Foreground = new SolidColorBrush(Colors.Red);

canvas.Children.Add(textb);

  //StackPanel

  StackPanel panel = new StackPanel();
  panel.Height = 100;
  panel.Width = 70;
  panel.Background = new SolidColorBrush(Colors.LightGray);

Add image in StackPanel.

//Image
            Image image1 = new Image();
            image1.Height = 50;
            image1.Width = 50;
            image1.Stretch = Stretch.Fill;
            image1.Source = new BitmapImage(new Uri("/DynamicAccordianControl;component/Images/emp2image.jpg", UriKind.Relative));
            image1.SetValue(Canvas.LeftProperty, 42.0);
            image1.SetValue(Canvas.TopProperty, 15.0);
            //Add Image in Stakpanel
            panel.Children.Add(image1);

Step 2: Add Controls in AccordionItem

// Add canvas as Content in AccordionItem
AcorItems.Content = canvas;

// Add stackpanel as Content in AccordionItem
AcorItems1.Content = panel;

Step 3: Add AccordionItem in Accordion Control as their items

accor.Items.Add(AcorItems);
accor.Items.Add(AcorItems1);

Output looks like as following.



Step 4: Add datagrid in AccordionItem as their content

//DataGrid
            datagrid = new DataGrid();
            datagrid.AutoGenerateColumns = true;
            datagrid.Height = 140;
            datagrid.Width = 190;

            ////Add DataGrid in AccordionItem as Content

            AcorItems2.Content = datagrid;
//Add AccordionItem , AcorItems2 in Accoordian control.
 accor.Items.Add(AcorItems2);

Output looks like as following.



Summary : We can create Accordian control in silverlight dynamically.