LightSwitch – Displaying Web Pages / HTML on a Screen

Overview of Article

Continuing with our earlier post on adding custom controls from the System.Windows.Controls namespace, the following article describes how to add a WebBrowser control onto a LightSwitch Screen.

This will allow us to display HTML or load web pages onto a LightSwitch Screen.

Screens

This example is not based upon any data. Therefore, create a new screen using the ‘New Data Screen’ template and select ‘Screen Data (None)’.

Fig 1 Create a screen based on no data

1. In order for us to add a WebBrowser control onto the screen, we need to bind the control it to a notional piece of data. Therefore, click the ‘Add Data Item’ button and add a new local property of type string. Untick the ‘Is Required’ checkbox and name the control ‘prpWebPage’.
   
   Fig 2 Add a local property called prpWebPage

2. Drag the control onto the screen. Change the control from a TextBox into a Custom Control. On the properties pane, click the ‘change’ hyperlink and select ‘System.Windows.Controls.WebBrowser’.

   
   Fig 3 Select System.Windows.Controls.WebBrowser

3. In order to load a web page, we can use the ‘Navigate’ method on the WebBrowser control. However, we can only call this when the control is ready so we need to handle the ControlAvailable event. Click on the ‘Write Code’ button and select the ‘Activated’ event. Now write the following code:

   Private Sub WebPage_Activated()
       AddHandler Me.FindControl("prpWebPage").ControlAvailable, AddressOf webControlAvailable
   End Sub
   
   Private Sub webControlAvailable(sender As Object, e As ControlAvailableEventArgs)
       CType(e.Control, System.Windows.Controls.WebBrowser).Navigate(New Uri("http://news.bbc.co.uk"))
   End Sub
   

   Here’s the C# version….

   private void WebPage_Activated()
   {
       this.FindControl("prpWebPage").ControlAvailable += webControlAvailable;
   }
   
   private void webControlAvailable(object sender, ControlAvailableEventArgs e)
   {
       ((System.Windows.Controls.WebBrowser)e.Control).Navigate(new Uri("http://news.bbc.co.uk"));
   }
   

   Obviously, change the URL to the URL of your choice

4. The properties of the control are now optionally modified to hide the label and to set the sizing to ‘stretch’. The alignment on the parent group can also be set to ‘top’ and ‘left’. If we now run the solution, here’s what appears.
   
   Fig 4 Illustration of a loaded web page in LightSwitch

5. If we want to display some HTML rather than load a web page, we can call the NavigateToString method on the WebBrowser Control. Here’s some sample code.

   Private Sub webControlAvailable(sender As Object, e As ControlAvailableEventArgs)
       Dim strHtml As String = "<h1>Hello World!</h1>"
       CType(e.Control, System.Windows.Controls.WebBrowser).NavigateToString(strHtml)
   End Sub
   

   Here’s the same in C#

   private void webControlAvailable(object sender, ControlAvailableEventArgs e)
   {
       string strHtml = "<h1>Hello World!</h1>";
       ((System.Windows.Controls.WebBrowser)e.Control).NavigateToString(strHtml);
   }
   

6. Here’s what appears when we now run the application
   
   Fig 5 Illustration of displaying custom HTML in the WebBroswer Control

 

Conclusion

This post illustrates how to load web pages and HTML content onto a LightSwitch screen.

There are many useful scenarios in which this can be used. For example, we can use this technique to display HTML data from a database. The technique could also be used to connect to a SQL Server reporting server in order to display reports inside LightSwitch.

 

Technorati Tags: LightSwitch,Display HTML,WebBroswer Control