MSDN Magazine - October 2008 - (Page 25) Figure 4 Generating UI Dynamically Imports Imports Imports System.Windows.Markup Class Window1 Dim db As New NorthwindDataContext Dim CustomerData As Customer Private Sub Window1_Loaded() Handles MyBase.Loaded Dim customerSchema = db.GetTableSchema("Customers").ToList() Dim UI = _ <%= From column In customerSchema _ Where column.IsPrimaryKey = 0 _ Select <Label Height="28" Name= HorizontalContentAlignment="Right"> : %> Me.DynamicContent.Content = XamlReader.Load(UI.CreateReader) End Sub Private Function GetUIElement(ByVal column As TableSchema) As XElement Select Case column.DataType Case "datetime", "int", "smallint", "money" Return <TextBox Height="28" Name= Text= /> Case "bit" Return <CheckBox HorizontalContentAlignment="Left" Name= IsChecked= > Case "image" Return <Image Height="150" Width="150" Stretch="Fill" HorizontalAlignment="Left" Name= Source= /> Case Else Return <TextBox Height="28" Name= MaxLength= Text= /> End Select End Function Private Sub btnFind_Click() Handles btnFind.Click If Me.txtSearch.Text "" Then Me.CustomerData = (From cust In db.Customers _ Where cust.CustomerID = Me.txtSearch.Text).FirstOrDefault() Me.DataContext = Me.CustomerData Else Me.DataContext = Nothing End If End Sub Private Sub btnSave_Click() Handles btnSave.Click If Me.DataContext IsNot Nothing Then Try db.SubmitChanges() MsgBox("Saved") Catch ex As Exception MsgBox(ex.ToString) End Try End If End Sub End Class base, and drag the above procedure onto the methods pane. Next, you need to create an object on the design surface called TableSchema that contains the same properties as the fields returned from the stored procedure. For this example, I plan to edit the Northwind customer table, so you can add that to the model as well. Once that’s set up, in the properties for the GetTableSchema method, set the result type to the TableSchema class. a simple textbox and Find and Save buttons at a fixed area at the top of the Window. Under that, place a ContentControl onto the Window and name it something like DynamicContent (see Figure 3). You should now have XAML that looks similar to that illustrated in Figure 3: In the codebehind, add the appropriate XML namespace imports at the top of the file. Then you can generate the UI by writing a LINQ query in the Window Loaded event handler. You can also add button click Generating UI Based on handlers for the actual loading and saving Metadata of the customer data. Now that you have the metadata, you’re Figure 5 Customer Fields in the UI The entire Window class code is shown almost ready to write a query to generate in Figure 4. It’s important to note that this the XAML at run time. You can generate the entire Window con- code embeds a couple of LINQ query expressions to create the latent or just parts of it by using a ContentControl. This way you can bels for the field names, controls, and data bindings using a helper easily lay out the static elements of the Window and indicate where function called GetUIElement that returns the control’s XAML as the dynamic content should be placed. an XElement (see Figure 4). For this example, using the grid panel to lay out the form, create When you run the application this time, you are going to see all msdnmagazine.com October 2008 25 http://www.msdnmagazine.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.