XBAP: XAML Browser Application

XBAP: XAML Browser Application An XBAP (XAML Browser Application) is an application designed to run within a browser. XBAPs use special tags or elements that are distinct from XAML tags used for a standalone desktop app, for example: • NavigationWindow • Page • Hyperlink An XBAP has a design skeleton more similar to a collection of web pages rather than a desktop application. NavigationWindow is the top level tag for the XBAP and provides built-in controls for page navigation, like buttons for previous and next page. When deployed, the NavigationWindow will be hosted within a web browser rather than sitting directly on the desktop. The NavigationWindow does not allow direct content and is really just a place holder for the actual content that will be laid out in a series of Page tags. XAML Hyperlink tags are used to move between Page tags. Once an XBAP app has been developed, the executable and manifests are installed on a web server. HTML markup is provided with a link to the XBAP app like this: Click this link to launch the application XBAPs run in a partial trust sandbox environment. Support is strongest for IE and Firefox, support for other browsers will have to be carefully vetted by the developer. Using Visual Studio to Build a WPF Browser Application Visual Studio provides a “WPF Browser App” template for an XBAP. If your version does not, you can use the WPF App template as the starting point, and edit it by hand to create an XBAP. The simplest XBAP requires an Application tag and one or more Page tags. The StartupUri attribute of the Application tag points to a Page that will be displayed upon application launch. After that, navigation between multiple pages can be arranged with Hyperlink tags. App.xaml: Page1.xaml … content goes here Page2.xaml … content goes here The Page tag in an XBAP app is the main container for an XBAP. There can be multiple XAML files defining multiple pages. Each Page tag can be given a Name attribute. The value of the Name attribute can be used for navigation. The StartupUri attribute of the Application tag points to the Page whose content will be displayed on application launch. Navigation within an XBAP A better template for an XBAP is to activate a navigation service, much like a real web browser that tracks history of visited pages. One way to add a navigation service is to use the MainWindow.xaml file to introduce a NavigationWindow tag that replaces the top-level Window tag. If using Visual Studio, create a starter WPF app then modify the MainWindow files to use NavigationWindow as the top-level tag rather than the Window tag. The partial class in the code-behind file will also have to be changed to use NavigationWindow as the base class instead of Window. App.xaml MainWindow.xaml MainWindow.xaml.cs partial class MainWindow : NavigationWindow { … } Page1.xaml … content goes here Page2.xaml … content goes here Other page files are possible. The NavigationWindow tag does not support direct content. It’s only a pointer to a Page, actual content will be provided by one or more Page tags. The initial Page displayed by the NavigationWindow is indicated by the Source attribute. When the user directs the app to navigate to a different page, the content of that page becomes the content of the NavigationWindow. The value of a Source attribute (like StartupUri attribute for the Application tag) must be the name of a XAML file containing a Page, not simply the value of the Page’s Name attribute. The Page is a content-based tag, like a Window. There can be only one nested tag. Page Content The content of a Page tag is typically set to a layout control class based on a Panel • Canvas • Panel • DockPanel • FlowPanel • StackPanel • Grid Page content can be set to any single control, but this will limit the content to that single control. A TextBlock control can also be used for a Page containing only text. A Hyperlink tag is treated like text, it is not a WPF visual control. This affects the contexts where a Hyperlink can be added within XAML. For example, a Hyperlink cannot be added directly to a Panel or Grid. However, a Hyperlink can be wrapped in a TextBlock, and the TextBlock can be added to a Panel or a Grid.