Overview

UserGuidePage is a Windows Phone 7 PhoneApplicationPage that can show a sequence of user guide, help, or other instructions as a consecutive pages set.

Getting Started

  • Get your Visual Studio ready with Windows Phone 7.1 SDK.
  • Get the latest archive with the library from the Downloads section.
  • Extract the KHKSoftware.Controls.UserGuidePage.dll library to some location on your disk.
  • To use UserGuidePage in your project, add a reference to KHKSoftware.Controls.UserGuidePage.dll.

Usage 

The library contains the definition of GuidePageContent class with the following properties:

  • string TitleText
    Provide the page's title or caption text.
  • Uri IllustrationUri
    Provide the Uri of the image (illustration, screenshot, etc.) to be displayed on the page.
  • string CommentaryText
    Provide the explanation / description / guidance text for the content seen in the image on the page.

These 3 properties should be set for each page you'd like to have shown.

After generating the content in the way described above, pass it on to the GuidePage:

GuidePage.PagesContent = new List<GuidePageContent>();
for (int i = 0; i < 4; i++)
{
    GuidePage.PagesContent.Add(
        new GuidePageContent
        {
            TitleText = "Title " + i,
            IllustrationUri = new Uri("/Images/page0" + i + ".jpg", UriKind.Relative),
            CommentaryText = "Some explanation and guidance text #" + i + "\nMay span multiple lines."
        });
}

(the content generation in the example above is, of course, purely for illustration purposes; in your application you will, obviously, want to provide some real values)

A few notes on images:

  • Images path as shown above is relative to your start up project; they will have "Content" as their build action.
  • If you'd like to use images from a different library, the path given to the Uri constructor should be of a form "/LibName;component/Images/image.jpg"
    In such case, the images will need to be packed with "Resource" as their build action.

If you'd like to set the "Back" and "Forward" buttons' captions (to replace the default "prev page" and "next page" values), now would be the good time:

GuidePage.BackButtonCaption = "back";
GuidePage.ForwardButtonCaption = "forward";

Finally, after all these preparations are behind us, we can actually navigate to the page:

NavigationService.Navigate(new Uri("/KHKSoftware.Controls.UserGuidePage;component/GuidePage.xaml", UriKind.Relative));

 

UserGuidePage will resolve the number of pages based on the size of the list it was given.

The first page will be displayed (no surprises here), with the Back button disabled.

If you'd like to take the user directly to a specific page, provide the "page" query string parameter when navigating to UserGuidePage:

NavigationService.Navigate(new Uri("/KHKSoftware.Controls.UserGuidePage;component/GuidePage.xaml?page=1", UriKind.Relative));

Be careful, though, not to pass a value that exceeds the actual pages number - this will result in IndexOutOfRangeException!

 

All the bitmaps are cached after the initial use (i.e. if the user goes back to an already visited page, the existing bitmap object will be reused).

When the last page is reached, the Next button becomes disabled.

The phone's hardware Back button will take the user out of the guided sequence completely, to the page from which UserGuidePage was navigated to.

 

Application Bar Buttons

Important: please note that due to the limitations of Windows Phone SDK 7.1 ApplicationBar implementation, its ApplicationBarIconButtons can only have images loaded from the start up project.

Hence, you will have to include the 2 images in your main project, under "/Images/" folder.

You can take the images from the sample solution here, or use any other images compatible with the ApplicationBar requirements.

Don't forget that these images' Build Action must be set to "Content".

Last edited May 27, 2012 at 3:38 PM by KHK, version 2

Comments

No comments yet.