Click here to Skip to main content
16,021,417 members
Articles / Web Development / HTML

Windows Phone 7 Help and About files Using HTML and Isolated Storage Images

Rate me:
Please Sign up or sign in to vote.
4.85/5 (5 votes)
2 Mar 2011CPOL3 min read 43.7K   760   8   8
This article describes Help and About page design for Windows Phone 7 using HTML and Isolated Storage for images.

Introduction

I had to design the Help and About pages for a Windows Phone 7 (WP7) application. I wanted to use local HTML pages to show the Help pages. I also wanted to show the buttons and the screen responses as PNG and JPEG images in the Help file. This involves storing the HTML page and the associated images in Isolated Storage. I thought this application is so general in nature that it would be useful to others.

Background

The main method used in this project is to move items to Isolated Storage and retrieve them, because WP7 has only this mechanism available for the Browser control. The technique used in this article was inspired by a blog Moving Files from XAP to Isolated Storage for Local HTML Content on Windows Phone 7 « Simplifying Technology by David Cornelson.

Using the Code

The example application has three pages:

  1. List page
  2. Help page: This page describes the buttons and the actions in the application
  3. About page: This describes the application

List Page

List Page

This page presents the list of states in a ListPicker control. The selected State is shown in the TextBox. If you are using this application, make sure you have downloaded the Silverlight Release: Silverlight for Windows Phone Toolkit - Nov 2010 and reference it in your project. This page is straightforward.

C#
void ListPage_Loaded(object sender, RoutedEventArgs e)
{
    StatesListPicker.SelectionChanged += 
      new System.Windows.Controls.SelectionChangedEventHandler(
      StatesListPicker_SelectionChanged);
    StatesListPicker.SelectedIndex = 4;
}

void StatesListPicker_SelectionChanged(object sender, 
     System.Windows.Controls.SelectionChangedEventArgs e)
{
    StateNameTextBlock.Text = StatesListPicker.SelectedItem.ToString();
}

When the ListPicker item is changed, the State name appears in the TextBlock.

The image buttons were inspired by the ImageButton control for Windows Phone 7: Silverlight and Windows Phone 7 Geek Page by Przemyslaw Chruscicki. The following code sets up the buttons:

XML
<StackPanel x:Name="ButtonPanel" Grid.Row="1" Orientation="Horizontal">
<local:ImageButton x:Name="Help_Button" 
  Image="../Assets/Images/ButtonKeys/Help48.png" 
  PressedImage="../Assets/Images/ButtonKeys/Helppressed48.png" 
  Width="70" Height="70" 
  Template="{StaticResource ImageButtonControlTemplate}" 
  Margin="300,10,10,10" Click="Button_Click"/>
<local:ImageButton x:Name="About_Button" 
  Image="../Assets/Images/ButtonKeys/About48.png" 
  PressedImage="../Assets/Images/ButtonKeys/Aboutpressed48.png" 
  Width="70" Height="70" 
  Template="{StaticResource ImageButtonControlTemplate}" 
  Margin="10 " Click="Button_Click"/>
</StackPanel>

The ImageButton Control Template is in App.Xaml.Cs. When the button is pressed, the following button event executes, which navigates the user to the selected page:

C#
private void Button_Click(object sender, RoutedEventArgs e)
{
    Button button_selected = sender as Button;
    string button_name = button_selected.Name;
    string uri = "";
    switch (button_name)
    {
        case "List_Button":
            uri = "/ListPage.xaml";
            break; 
        case "Help_Button":
            uri = "/HelpPage.xaml";
            break;
        case "About_Button":
            uri = "/AboutPage.xaml";
            break;
        default:
            break;
    }
    try
    {
        NavigationService.Navigate(new Uri(uri, UriKind.RelativeOrAbsolute));
    }
    catch (Exception enav)
    {
        string serror = enav.Message;
    }
}

Help and About pages

Help Page   About Page

The Help and About pages are the main theme of this article. This is a simple Browser control which displays the local HTML page. For example, the Help page is displayed by the following code:

C#
void HelpPage_Loaded(object sender, RoutedEventArgs e)
{
  webBrowser1.Base = "HTDocs";
  webBrowser1.Navigate(new Uri("Help.htm", UriKind.Relative));
}

Look how simple the code is. We are setting the base directory as HTDocs and navigating to the HTML page.

Setting Up the HTML Pages in App.Xaml.cs

HTML pages in Isolated Storage are set up in App.Xaml.cs. When the application is launched, Initialize_Help_HTMLPage() is called. This code snippet is given below:

C#
private void Initialize_Help_HTMLPage()
{
    storageFile.CreateDirectory("HTDocs\\images");
    storageFile.CopyTextFile("HTDocs\\Help.htm", true);
    storageFile.CopyTextFile("HTDocs\\About.htm", true);

    //
    storageFile.CopyBinaryFile("HTDocs\\images\\About48.png", true);
    storageFile.CopyBinaryFile("HTDocs\\images\\Help48.png", true);
    storageFile.CopyBinaryFile("HTDocs\\images\\list48.png", true);
    storageFile.CopyBinaryFile("HTDocs\\images\\ListPicker.png", true);
    storageFile.CopyBinaryFile("HTDocs\\images\\PickedState.png", true);

}

We create the HTDocs directory in Isolated Storage and copy the HTML files and the images to this directory. I used Visual Studio to create this directory, the HTML files, and the images directory where I copied the image files. Please make sure that the type of the image files is Content and not Resource.

We are using two Extension Methods, CopyBinaryFile and CopyTextFile. CopyTextFile is used to copy the HTML files and CopyBinaryFile is used to copy the images to Isolated Storage. These are from the article by David Cornelson (Reference 2).

C#
public static class ISExtensions
{
    public static void CopyTextFile(this IsolatedStorageFile isf, 
                  string filename, bool replace = false)
    {
        if (!isf.FileExists(filename) || replace == true)
        {
            StreamReader stream = 
              new StreamReader(TitleContainer.OpenStream(filename));
            IsolatedStorageFileStream outFile = isf.CreateFile(filename);

            string fileAsString = stream.ReadToEnd();
            byte[] fileBytes = System.Text.Encoding.UTF8.GetBytes(fileAsString);

            outFile.Write(fileBytes, 0, fileBytes.Length);

            stream.Close();
            outFile.Close();
        }
    }

    public static void CopyBinaryFile(this IsolatedStorageFile isf, 
                       string filename, bool replace = false)
    {
        if (!isf.FileExists(filename) || replace == true)
        {
            BinaryReader fileReader = 
               new BinaryReader(TitleContainer.OpenStream(filename));
            IsolatedStorageFileStream outFile = isf.CreateFile(filename);

            bool eof = false;
            long fileLength = fileReader.BaseStream.Length;
            int writeLength = 512;
            while (!eof)
            {
                if (fileLength < 512)
                {
                    writeLength = Convert.ToInt32(fileLength);
                    outFile.Write(fileReader.ReadBytes(writeLength), 0, writeLength);
                }
                else
                {
                    outFile.Write(fileReader.ReadBytes(writeLength), 0, writeLength);
                }

                fileLength = fileLength - 512;

                if (fileLength <= 0) eof = true;
            }
            fileReader.Close();
            outFile.Close();
        }
    }
}

Points of Interest

This was an interesting project. Now I have a template for designing HTML files for Help and About pages in my WP7 applications, which has simplified my life. I hope it will be of some use to you also.

References

  1. Silverlight Release: Silverlight for Windows Phone Toolkit - Nov 2010
  2. Moving Files from XAP to Isolated Storage for Local HTML Content on Windows Phone 7 « Simplifying Technology by David Cornelson
  3. ImageButton control for Windows Phone 7: Silverlight and Windows Phone 7 Geek Page by Przemyslaw Chruscicki

History

  • First version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
United States United States
Vijay Kumar: Architect, Programmer with expertise and interest in Azure, .net, Silverlight, C#, WCF, MVC, databases and mobile development. Concentrating on Windows Phone 7 and Windows Azure development. Lived in California for many years and done many exciting projects in dotnet and Windows platforms. Moved to Raleigh (RTP), North Carolina recently and available for consulting.  Blog http://Silverazure.blogspot.com.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Kanasz Robert21-Sep-12 3:30
professionalKanasz Robert21-Sep-12 3:30 
GeneralGreat article Pin
code_junkie4-Mar-11 8:23
code_junkie4-Mar-11 8:23 
GeneralUsing XAML for Help in WPF Pin
Bjorn Backlund3-Mar-11 2:54
Bjorn Backlund3-Mar-11 2:54 
GeneralRe: Using XAML for Help in WPF Pin
silverazure3-Mar-11 9:11
silverazure3-Mar-11 9:11 
The code I have described has worked well for me and I wanted to share the experience and the source code with other WP7 developers.
I am not sure I agree with your comment that "HTML might not be the best delivery mechanism for Help in WPF". This is not a WPF application.
This article describes how to access images from Isolated Storage for HTML pages. There are many ways to design code and as a coder I enjoy doing it in different ways. In my opinion since WP7 is fairly new some of these technical articles enables coders to understand and develop on this exciting platform.
Looks like you are promoting a commercial product which you have developed and that is not what I have tried to do in my article.
GeneralRe: Using XAML for Help in WPF Pin
Bjorn Backlund3-Mar-11 9:27
Bjorn Backlund3-Mar-11 9:27 
GeneralRe: Using XAML for Help in WPF Pin
silverazure3-Mar-11 10:09
silverazure3-Mar-11 10:09 
GeneralRe: Using XAML for Help in WPF Pin
Orrin5-Mar-11 12:44
Orrin5-Mar-11 12:44 
GeneralRe: Using XAML for Help in WPF Pin
Bjorn Backlund6-Mar-11 14:29
Bjorn Backlund6-Mar-11 14:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.