Reader Level:
Article

Accordian Control in Silverlight

By Priya Linge on Aug 01, 2011
This article demonstrate how can we create Accordian Control dynamically 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.

Accordian Control silverlight

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.

Accordian Control silverlight

Summary : We can create Accordian control in silverlight dynamically.

COMMENT USING