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.

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.