Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Data Driven Silverlight Pages

0.00/5 (No votes)
15 Apr 2009 1  
Dynamically Creating Silverlight Controls

Introduction

In this article, we are going to build a data driven application by using Silverlight and XML. Creating controls in XAML code is easy, but it’s not easy to reuse the control for different target objects.

In this article, I will cover some implementation details of how to dynamically generate the Text block, Textbox, Auto Complete Box, Combo Box, Numeric Control and Button controls.

Creating the XML File

The XML file will look like the following:

Image-1.JPG

You will notice that the XML file has the following elements:

  1. Field Name: This element represents the field name.
  2. Field Type: This element represents the field type. The valid field types are Textblock, TextBox, AutoCompleteBox, Numeric Control and Button.
  3. Validation: This element represents the validation of the field. The valid attributes are Minimum, Maximum, Width, Height, Increment, Expression, Required, Horizontal Alignment(Left, Right, Centre, Stretch), Vertical Alignment(Top,Bottom,Center) and Array List
  4. Row: This element represents the row the field should be displayed in the grid.
  5. Column: This element represents the row the field should be displayed in the grid.

Place the XML file in the \ClientBin folder.

Load the XML File

  1. Open Page.xaml.cs in your Silverlight Project. Add the following two methods: Image-2.jpg
  2. Call the LoadXMLFile() method after the InitializeComponent() method.
  3. Add a reference to the following DLLs to the Silverlight page:
    • System.XML.linq.dll
    • SilverlightValidator.dll
    • Microsoft.Windows.Controls.dll
    • Microsoft.Windows.Controls.Inputs.dll
  4. Now create the myBuldPage method. This method retrieves the information from XML file and builds the page based on the field type.

    Image-4.JPG

  5. Now add the Validation Manager to the Silverlight page:

    image-5.JPG

  6. Now add the Grid to the Silverlight page:

    image-6.JPG

  7. Now add the Silverlight controls based on the XML file:

    image-7.JPG

  8. Now add the grid to the Silverlight page:

    image-8.jpg

Conclusion

In this article, we separate data from content to make a cleaner design and for better maintainability. When XML is combined Silverlight controls become even more powerful. This opens up numerous possibilities for dynamic and robust systems.

History

  • 15th April, 2009: Initial post

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here