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.