Dynamically Generating Forms in WPF and Silverlight
Hi friends,
In this article you will know how to generate WPF form dynamically from property field.
Suppose we have requirement that create WPF form
First, we'll start with how to create form in XAML.
Creating forms at Design Time in XAML
Below form shows how to create form in XAML
<Grid Margin="10"> < Grid.ColumnDefinitions> < ColumnDefinition Width= "100" /> < ColumnDefinition Width= "*" /> </ Grid.ColumnDefinitions> < Grid.RowDefinitions> < RowDefinition Height= "Auto" /> < RowDefinition Height= "Auto" /> < RowDefinition Height= "Auto" /> < RowDefinition Height= "*" /> </ Grid.RowDefinitions> < TextBlock Text= "First Name" Height= "19" Margin= "0,7,31,4" /> < TextBox x:Name= "FirstName" Margin= "3" Grid.Row= "0" Grid.Column= "1" /> < TextBlock Text= "Last Name" Margin= "0,7,6,3" Grid.Row= "1" Height= "20" /> < TextBox x:Name= "LastName" Margin= "3" Grid.Row= "1" Grid.Column= "1" /> < TextBlock Text= "EmailId" Grid.Row= "2" Margin= "0,9,0,0" Height= "21" /> < TextBox x:Name= " EmailId " Margin= "3" Grid.Row= "1" Grid.Column= "1" /> < Button x:Name= "Save" Grid.Row= "3" Grid.Column= "3" HorizontalAlignment= "Right" VerticalAlignment= "Top" Margin= "3" Width= "80" Height= "25" Content= "Save" /> </ Grid> |
Below diagram shows the how form shows
Creating forms at runtime using XAML strings
Below example shows the how to create form at runtime by using property class
1. create a person class which has 10 properties
public class Person
{
public string FirstName { get; set; }
public string LastName { get; set; }
public bool isDefault { get; set; }
public string EmailId { get; set; }
public string EmployeeNo { get; set; }
public string Age { get; set; }
public string EmailId2 { get; set; }
public bool isMale { get; set; }
public string MobileNo { get; set; }
public string TelephoneNo { get; set; }
}
2. Creating Controls at runtime
We created following functions for creating textbox, textblock, row definition and for checkbox
functions CreateCheckBox() creates checkbox runtime
private CheckBox CreateCheckBox(int row, int column) { CheckBox cb = new CheckBox(); cb.Margin = new Thickness(5); cb.Height = 22; cb.MinWidth = 50; Grid.SetColumn(cb, column); Grid.SetRow(cb, row); return cb; } private RowDefinition CreateRowDefinition() { RowDefinition RowDefinition = new RowDefinition(); RowDefinition.Height = GridLength.Auto; return RowDefinition; } |
This will create a text block
private TextBlock CreateTextBlock(string text, int row, int column) { string[] aa = BreakUpperCB(text); string prop = ""; for (int i = 0; i < aa.Length; i++) { prop = prop +" "+ aa[i]; } TextBlock tb = new TextBlock() { Text = prop, Margin = new Thickness(5, 8, 0, 5) }; tb.MinWidth = 90; tb.FontWeight = FontWeights.Bold; tb.Margin = new Thickness(5); var bc = new BrushConverter(); tb.Foreground = Brush)bc.ConvertFrom("#FF2D72BC"); Grid.SetColumn(tb, column); Grid.SetRow(tb, row); return tb; } |
Handling Events
private TextBox CreateTextBox( int row, int column) { TextBox tb = new TextBox(); tb.Margin = new Thickness(5); tb.Height = 22; tb.Width = 150; Grid.SetColumn(tb, column); Grid.SetRow(tb, row); return tb; } // this will break the property text by upper public string[] BreakUpperCB(string sInput) { StringBuilder[] sReturn = new StringBuilder[1]; sReturn[0] = new StringBuilder(sInput.Length); const string CUPPER = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; int iArrayCount = 0; for (int iIndex = 0; iIndex < sInput.Length; iIndex++) { string sChar = sInput.Substring(iIndex, 1); // get a char if ((CUPPER.Contains(sChar)) && (iIndex > 0)) { iArrayCount++; System.Text.StringBuilder[] sTemp = new System.Text.StringBuilder[iArrayCount + 1]; Array.Copy(sReturn, 0, sTemp, 0, iArrayCount); sTemp[iArrayCount] = new StringBuilder(sInput.Length); sReturn = sTemp; } sReturn[iArrayCount].Append(sChar); } string[] sReturnString = new string[iArrayCount + 1]; for (int iIndex = 0; iIndex < sReturn.Length; iIndex++) { sReturnString[iIndex] = sReturn[iIndex].ToString(); } return sReturnString; } void button_Click(object sender, RoutedEventArgs e) { MessageBox.Show("Saved Successfully"); } private Button CreateButton(string text, int row, int column ) { Button tb = new Button() { Content = text, VerticalAlignment = VerticalAlignment.Top, HorizontalAlignment = HorizontalAlignment.Left, Margin = new Thickness(5, 8, 0, 5) }; tb.Width = 90; tb.Height = 25; tb.Margin = new Thickness(5); Grid.SetColumn(tb, column); Grid.SetRow(tb, row); return tb; } |
In the below example we have created one function CreateControlsUsingObjects(Person obj) which create dynamic form based on the
Create Controls
private void CreateControls(Person obj) { List<Person> objList=new List<Person>(); objList.Add(obj); Grid rootGrid = new Grid(); rootGrid.Margin = new Thickness(10.0); rootGrid.ColumnDefinitions.Add( new ColumnDefinition() { Width = new GridLength(100.0) }); rootGrid.ColumnDefinitions.Add( new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) }); rootGrid.ColumnDefinitions.Add( new ColumnDefinition() { Width = new GridLength(100.0) }); rootGrid.ColumnDefinitions.Add( new ColumnDefinition() { Width = new GridLength(100.0) }); PropertyInfo[] propertyInfos; propertyInfos = typeof(Person).GetProperties(); rootGrid.RowDefinitions.Add(CreateRowDefinition()); int j = 1; foreach (PropertyInfo propertyInfo in propertyInfos) { if (propertyInfo.PropertyType.Name == "String") { rootGrid.RowDefinitions.Add(CreateRowDefinition()); var Label = CreateTextBlock(propertyInfo.Name, j, 0); rootGrid.Children.Add(Label); var Textbox = CreateTextBox(j, 1); rootGrid.Children.Add(Textbox); j++; } if (propertyInfo.PropertyType.Name == "Boolean") { rootGrid.RowDefinitions.Add(CreateRowDefinition()); var Label = CreateTextBlock(propertyInfo.Name, j, 0); rootGrid.Children.Add(Label); var Textbox = CreateCheckBox(j, 1); rootGrid.Children.Add(Textbox); j++; } } rootGrid.RowDefinitions.Add(CreateRowDefinition()); var Button = CreateButton("Save",j + 1, 1); Button.Click += new RoutedEventHandler(button_Click); rootGrid.Children.Add(Button); LayoutRoot.Children.Add(rootGrid } } |
In the above example we have shown that how to create WPF form dynamically.
Below output screen shows the output as we want
Output Screen
Summary
So, we've seen that there are three different ways you can display controls in Silverlight and WPF.- Use the design surface / XAML Editor / Blend and create them prior to compiling
- Load XAML at runtime
- Use CLR Objects at runtime
Good luck and please, let me know your feedback!
In this way you can learn difference between proxy and channel factory
In this way you can learn difference between proxy and channel factory
Regards
Sujeet Bhujbal
------------------------------------------------------------------------------------------------
Blog: www.sujitbhujbal.blogspot.com
Personal Website :- http://sujitbhujbal.wordpress.com/
Blog: www.sujitbhujbal.blogspot.com
Personal Website :- http://sujitbhujbal.wordpress.com/
Contact me on 9822663535
Facebook :- www.facebook.com/sujit.bhujbal
CodeProject:-http://www.codeproject.com/Members/Sujit-Bhujbal
Linkedin :- http://in.linkedin.com/in/sujitbhujbal
---------------------------------------------------------------------------------