Creating XBAP Poppers
By Alvin Bruney
If it s indeed true that a picture is worth a thousand words, I should be able to save some space in this article with a high impact picture right? Look at Figure 1. Would you believe me if I told you that Figure 1 is a .NET browser-based application? It is! And I ll prove that it s not a mock-up by showing you how to produce one just like it. Go ahead and download a copy of PaintShop Pro just in case this experiment doesn t work out as planned, that way we can do a quick mock-up to save face.
Figure 1: XBAP behaving like a Windows application.
After examining Figure 1 closely, I m sure you re dying to ask some questions. For instance, where is the browser? It s in the Windows taskbar, and the taskbar is set to auto-hide.
How does it work? When I close the browser, the application closes. I can use the browser to perform other browser-related activities without interfering with the application. Or, I can use the application without disturbing the browser. I can also use both applications to suite my needs.
Does this work in other browsers? Sure, all major browsers are supported. In fact, Figure 1 uses Firefox version 2.0.
Let s review some theory. XBAPs, or browser-based applications, are applications built on WPF that are hosted in a browser. For these types of applications, .NET 3.x is required on the client. Security is scoped to the hosting container in what is commonly termed the browser sandbox. There are a few limitations for these types of applications. Review http://msdn.microsoft.com/en-us/library/aa970060.aspx for more details on the XBAP story. For now I ll skip all that stuff and get right to it.
Let s begin by creating an application based on a standard WPF Browser Application template (see Figure 2) by selecting New | Project. Put a button on the form and wire the click event to show a MessageBox when the button is clicked.
Figure 2: Creating a browser-based application in WPF.
Let s examine the XAML file to see what s going on. Here is the complete XAML code:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1">
Now it s time for the hack. To get the application to pop out of the browser (an XBAP Popper), derive the document from a Window instead of a Page object by replacing the start and end Page tags in the Page1.xaml file with Window tags. Your XAML file should now look like this:
Extras removed for
Extras removed for clarity
Then, navigate to the code-behind for Page1.xaml.cs and adjust the inheritance from public partial class Page1 : Page to public partial class Page1 : Window.
If you try to run the application, you ll get a security exception informing you that the assembly needs to be signed. Makes sense right? Full trust is required to satisfy the demand for UIPermission.AllWindows when the browser tries to create a Window. Let s fix this. From the properties window, add the settings according to Figure 3.
Figure 3: XBAP signing tab.
Select the Security tab and choose the first option to run the application in full trust (see Figure 4).
Figure 4: Enabling full trust in an XBAP.
Next, import the certificate into the Trusted Publisher store. The easiest way to do this is to open your application directory and right-click on the PFX file. Choose Install PFX as shown in Figure 5.
Figure 5: Option to install PFX.
The Certificate Import Wizard will appear. Walk through the wizard and install the certificate into the Trusted Publishers store; see Figure 6 for the important step in the wizard process.
Figure 6: Importing a certificate into the Trusted Publishers store.
The wizard should conclude with a success prompt. Run the application. When the application is completely downloaded, the Hello World application will begin (see Figure 7).
Figure 7: XBAP Popper.
That s it. And you didn t even need the PaintShop Pro!
Are you disappointed that Figure 7 doesn t resemble Figure 1? That s because I ve added some eye-candy to the application. To jazz up the demo like Figure 1, follow these steps:
- Change the default Window appears to support transparency (AllowsTransparency = True in page1.xaml).
- If you re on a budget like me, download and install the free Xceed Datagrid from http://xceed.com/Grid_WPF_Intro.html and set the theme to glass. Load some test data into the grid.
- Add buttons to the form. The transparent Window will create the effect of floating buttons as shown in Figure 1.
- Add a Text region with a transform so that it appears angled. This creates the Drag Handle at the bottom of the Window in Figure 1.
- Handle the click event for the Text region so you can drag the Window.
- Add a spinning bitmap effect customized from MSDN (http://msdn.microsoft.com/en-us/library/ms753347.aspx).
- Auto-hide the task bar in Windows.
If you get stuck along the way, download the complete page1.xaml code.
To sum up, you should understand that XBAPs run in a browser and can utilize 98% of WPF. But they do have a few disadvantages. The entire application must be downloaded before a single byte will run. This is unsuitable for some types of applications. For instance, critical line of business applications that are used by a large number of people at roughly the same time during the day may cause performance issues as servers struggle to push the code to the users at the same time.
Some XBAPs require full trust and certification management, as we ve seen. For large companies, this added overhead is significant. XBAP Poppers run in a browser, which means familiarity benefits for most users. If you can accept and manage these challenges, then go ahead and dazzle people with an XBAP Popper!
The files referenced in this article are available for download.
Alvin Bruney is a Technology Specialist working for Royal Bank of Canada in the .NET Centre of Excellence program. He is a Microsoft Press author and a long-time ASP.NET MVP.