Click here to Skip to main content
Click here to Skip to main content

Data Driven Silverlight Pages

, 15 Apr 2009
Rate this:
Please Sign up or sign in to vote.
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)

About the Author

Nidhi Dham
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 Pinmemberliviucatrina12-Sep-10 21:56 
GeneralMy vote of 3 Pinmembermheskol14-Jul-10 21:50 
QuestionAnd why the sample code as images??? PinmemberMichael E. Jones15-Apr-09 11:39 
Question[My vote of 1] Why no sample project? PinmemberRobert Kozak15-Apr-09 9:17 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 15 Apr 2009
Article Copyright 2009 by Nidhi Dham
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid