whitespace COMPANY whitespace SERVICES whitespace PRODUCTS whitespace PURCHASE whitespace SUPPORT whitespace CONTACTS whitespace Home whitespace Contact Us whitespace Site Map whitespace
whitespace
WHY ARTFULBITS
whitespace
OUR APPROACH
whitespace
OUR TEAM
whitespace
FACT SHEET
whitespace
NEWS & EVENTS
whitespace
PRIVACY
whitespace
whitespace

Web in WPF

Downloads

Project archive


WPF gives us an opportunity to develop XAML Browser applications (XBAP's). XBAP's are on-line-only ClickOnce applications that are cached (not installed on the user's machine) and run in the browser which combines all preferences of Web application and client application. This application runs in the browser without any interruptions except the time needed to download the application. However, unlike the relatively limited graphics and media capabilities of HTML-based applications, XAML browser applications have access to the rich features of the Windows Presentation Foundation runtime. Such as XBAPs obey the security contract of being in the browser (they are sandboxed according to their deployment zone), therefore security can be customized by different trust levels.

Welcome to the world of WPF navigation application

Now I try to give a simple tutorial how to develop a XAML Browser application. I'm going to create a Web Film Library which consists of several pages with film descriptions and a page of content, to show you a basic possibilities of XBAP. To create a new XBAP project, do the following:

  • Open Visual Studio 2005 and launch the New Project dialog box
  • Select the WPF project type with a XAML browser application (XBAP) template
  • Assign a project name and click OK

Now, if you try to build it, application will be launched in Internet Explorer and a file with .xbap extension will be generated.
Main difference between simple WPF application project and XBAP application project is that, what is the application StartupUri property set to(see code below). If StartupUri path identifies a Window class then it is a simple application if a Page class - it is an XBAP application.

<Application x:Class="FilmLibrary.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="Page1.xaml">
  <Application.Resources>

  </Application.Resources>
</Application>

Configuring a XAML Page

A XAML page is simply a host for WPF content, whose appearance is determined by the XAML elements from which it is composed, and how those elements are configured. Likewise, a XAML page can also, to some degree, determine how it appears in its host.

<Page x:Class="FilmLibrary.Page1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Background="LightSkyBlue"   
  WindowTitle="Film Library"  
  >
<StackPanel>
  <TextBlock FontSize="30" HorizontalAlignment="Center" Foreground="Red">
    Film Library
  </TextBlock>
  <StackPanel Orientation="Horizontal" Margin="20" HorizontalAlignment="Center">
    <TextBlock FontSize="20" Margin="20">
      <Hyperlink NavigateUri="GenreCollection/Action.xaml">
        Action
      </Hyperlink>
    </TextBlock>
    <TextBlock FontSize="20" Margin="20">
      <Hyperlink NavigateUri="GenreCollection/Comedy.xaml">
        Comedy
      </Hyperlink>
    </TextBlock>  
     <TextBlock FontSize="20" Margin="20">
      <Hyperlink NavigateUri="GenreCollection/Drama.xaml">
        Drama
      </Hyperlink>
    </TextBlock>      
  </StackPanel>
    <TextBlock FontSize="12" Margin="0,80,0,0" HorizontalAlignment="Center">
      <Hyperlink 
        NavigateUri="http://www.imdb.com/"
        ToolTip="Internet Movie Database, the biggest, best, most award-winning 
          movie site on the planet.">
        The Internet Movie Database
      </Hyperlink>
    </TextBlock>
  </StackPanel>
</Page>

The result is shown in the following figure:

Like with Windows you can specify WindowTitle, WindowWidth, WindowHeight, Background, ets.

As you see there are three hyperlinks that points to different pages, divided by film genres and one, that points to Internet movie database website. It's very easy to organize navigation using Hyperlink class, you just need to assign a path to UriSource property. Also, there is another way to make it work. You can handle RequestNavigate event and make navigation yourself. For example:

<TextBlock>
  <Hyperlink RequestNavigate="HandleRequestNavigate"                     
    Open our company site in the default browser
  </Hyperlink>
</TextBlock>
void HandleRequestNavigate(object sender, RoutedEventArgs e) 
{ 
  string navigateUri = hl.NavigateUri.ToString();     
  Process.Start("www.artfulbits.com"); 
  e.Handled = true; 
}

Navigating Between XAML Pages

Now, lets prepare a page with some films overview to make links correct. At first we should add a new page to our project: right click on the project item > Add > New item, and then choose a WinFxPage, set a name (for example Action.xaml) and click OK. After that you should see a new file in your project tree. Also you can put all page files with film descriptions into one folder, as I did, to do your hierarchy more structured.
Filling and layout of this page (Action.xaml) depends only on your fantasy, so feel free to experiment.
Here is my version of this page:

In browser it looks like:

A few words about this page: all content was put into ScrollViewer to make it scrollable. In the top of the page I have added three buttons. As a result, you can navigate among all pages with browser Next and Backward buttons containing all navigation history. Therefore, I also have added these buttons with only one purpose - to show, how to use navigation from code without Hyperlink. So what will happen when you click on one of these buttons? Lets examine this process. To open new page (let it be a content page) on button click you should do the following:

void btnComedyClick( object sender, RoutedEventArgs e )
{
    //Getting a NavigationService for current page
    NavigationService ns = NavigationService.GetNavigationService( this );
    //Navigating
    ns.Navigate( new Uri( "Page1.xaml", UriKind.RelativeOrAbsolute ) );
}

As I already mentioned, you can use all power of WPF in XBAP applications. I mean, advanced text formating possibilities. You can mark text as Bold, Italic, make paragraphs and more else just in XAML, without using any special text formating components. If you replace FlowScrollViewer with _FlowDocumentReader you will get a zoomable text reader with page navigation - one of WPF features.
Every image on the page is a hyperlink. It refers to the corresponding site with film description. Since Hyperlink can be placed only inside of a TextBlock. Therefore here is a trick to make Image look like a Hyperlink. You need to put an Image inside of Hyperlink and a Hyperlink in its turn, put inside of TextBlock.

<TextBlock>
  <Hyperlink 
    TextDecorations="" 
    RequestNavigate="ActionRequestNavigate"
    NavigateUri="http://www.imdb.com/title/tt0113606/">
      <Image HorizontalAlignment="Center" Source="/Images/lastbullet.jpg" />
  </Hyperlink>
</TextBlock>

In the same way you can implement the rest pages with your own film descriptions.


< Previous | Home | Next >


Author: 2007 Dima Zaharov, Department Manager/ArtfulBits
Company | Services | Practices | Technologies | Career | Contacts | Privacy
© 2005-2016 ArtfulBits. All rights reserved.