Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issue in words: the web browser control would be the top control in the visual tree; even if the control is carefully placed below other control. In this article we will see what the trick to deal with this specific issue is.
Planning the Demo
To demonstrate the issue and to deal with the issue; this is all about it. So let's have this, a grid view to display number of records, a web browser control placed right to it; would display results based on some grid events. Let's add double click on cell level to search a particular item.
Create a Silverlight 4 application, to have powerful features of the grid view I am using RadGridView from Telerik. So if you have Telerik's controls installed, you could start with the project configuration wizard as displayed below.
The Web Browser controls HTML is enabled in Out of Browser mode, so we need to enable the out of browser of the application.
To navigate to an external url you need to have elevated trust level enabled. Otherwise straightway you would get run time error messages.
Now let's have it scenario specific, we would have two different user controls, which would be similar to widgets. When we are talking about widgets, it would definitely part of a dashboard.
As displayed above, the application would have the grid view on the left hand side and the web browser control on the right side.
If you have a look at the project structure, you would understand that the above displayed are user controls.
Loading the user controls or widgets into specific region may vary from scenario to a specific requirement. We would use two containers and on load of the application we would add it to the specific containers.
As you have completely understood the plot of the application, we need to have communication between user controls. We could achieve that in two ways:
- Once: while the user control is created
- Unlimited Times: As long as user control is not unloaded
Definitely we would go for the 2nd option. To fulfil the 2nd option we need to use MVVM light from Galasoft. The framework has Messenger as one of its powerful feature.
Note that, extensive use of Messenger or un-necessary use of messenger might make too many calls at the recipient.
Always use custom type handlers for this purpose.
In our case, I have created a class, which would have the above properties for Web Browser control purpose.
As you know a messenger message would be broadcasted to the applications recipients. Here recipient means, the code which has subscribed to receive the message. Always unsubscribe to the messenger before subscribing.
Let's run the application with sample data.
As you can see, the web browser control is navigated to the default url and we have the sample data displayed.
Air Space Issue Demonstration
We have implemented a context menu for the RadGridView, which would have actions such as details view, search actions. Let's demo the issue.
As you see when the context menu has opened close to the web browser control it shows the issue. Let's have one more demo.
On the details action click we are popping up a RadWindow, which is also showing the air space issue.
Now before handling the air space issue, let's implement the logic for searching in the browser from cell level click, and then it would be easier to understand the trick.
The above line of code is for handling the
CellDoubleClickEvent in the powerful RadGridView.
In the event handler, we would check the cell data and do the search.
As you see in the above method, we are sending messages of type BrowserMessageHandler,
MessageId identifies the message, and then
UrlData are data to pass to the recipient.
The above code is for recipient, in our case it is the user control that holds the web browser control. As you closely look at the implementation, you would see that; it's very simple to receive the sent data.
Let's run the application for demoing the cell double click behaviour.
I had double clicked on Deccan Chargers and Zaheer Khan, google shows me the results.
Addressing Air Space Issue
Silverlight 4 provides us a Web Browser Brush control which could be filled to a Rectangle and the data displayed on the web browser control could be displayed as a rectangle (image).
Let's do the control arrangements in the user control.
If you look at the structure of the controls, the Web Browser control would be the first in the visual stack and the Rectangle would be the top of the stack.
Now that we have got the controls ready, we need to hide and redraw the web browser and the rectangle respectively at the same time.
As you can see in the above code display, two more message identifiers have been added, such as
Now we would handle it from the other user control, in our case MyGridView user control.
For Right Click context menu opening and closing we would do the hide and show messenger calls.
Now if we run the application, you could see that we are able display the context menu on top of the web browser control (actually on top of Rectangle control).
Now we would do the same for RadWindow.
As you can see in the above code display, the
MouseLeftButtonDown events we are doing the
HIDEBROWSER messenger calls. Now in between if we need to use the web browser control while the RadWindow is opened.
We could achieve that by Rectangle's
As you can see that, the RadWindow is on the top of the Rectangle and while you click on the Rectangle, it shows the web browser control. And the RadWindow goes behind, when you finish doing web browser stuff, just click on the RadWindow, to show it back.
As I mentioned earlier, Air Space issue cannot be addressed, it can only be handled; as we have done in our small sample. Be careful and cognizant to use Messengers, it might affect existing MVVM structure if not handled properly, specifically multiple instances of the same user control scenario. Hope you have liked the article. Thanks for reading.
Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7.
Follow him in tweeter @dpatra
This author has published 14 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.