Click here to Skip to main content
15,886,199 members
Articles / Web Development / ASP.NET

Data Driven Silverlight Pages

Rate me:
Please Sign up or sign in to vote.
2.50/5 (3 votes)
15 Apr 2009CPOL2 min read 28.6K   227   13   4
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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Canada Canada
Microsoft Certified Professional (MCP)
Microsoft Certificated Application Developer (MCAD.NET)
Microsoft Certified Dynamics (MS CRM 1.2)
Microsoft Certified Technology Specialist – SQL Server 2005 Business Intelligence (MCTS)
Microsoft Certified IT Professional – Business Intelligence Developer (MCTIP)
Microsoft Certified Technology Specialist – SQL Server 2005 (MCTS)
Microsoft Certified IT Professional – Database Administrator (MCTIP)

Comments and Discussions

 
GeneralInteresting and useful Pin
liviucatrina12-Sep-10 21:56
liviucatrina12-Sep-10 21:56 
GeneralMy vote of 3 Pin
mheskol14-Jul-10 21:50
mheskol14-Jul-10 21:50 
QuestionAnd why the sample code as images??? Pin
Michael E. Jones15-Apr-09 11:39
Michael E. Jones15-Apr-09 11:39 
Question[My vote of 1] Why no sample project? Pin
Robert Kozak15-Apr-09 9:17
Robert Kozak15-Apr-09 9:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.