使用 HTML 和隔离存储图像的 Windows Phone 7 帮助和关于文件

• 下载源代码 - 61.5 KB

引言

我需要为 Windows Phone 7 (WP7) 应用程序设计帮助和关于页面。我想使用本地 HTML 页面来显示帮助页面。我也想在帮助文件中显示按钮和屏幕响应的 PNG 和 JPEG 图像。这涉及到将 HTML 页面和相关的图像存储在独立存储中。我认为这个应用程序本质上非常通用，对其他人也会有用。

背景

本项目中使用的主要方法是将项目移动到独立存储并检索它们，因为 WP7 只有这种机制可用于浏览器控件。本文中使用的技术受到 David Cornelson 的博客 将文件从 XAP 移动到独立存储以在 Windows Phone 7 上使用本地 HTML 内容 « 简化技术 的启发。

Using the Code

示例应用程序有三个页面

1. 列表页面
2. 帮助页面：此页面描述了应用程序中的按钮和操作
3. 关于页面：此页面描述了应用程序

列表页面

此页面在 ListPicker 控件中显示状态列表。 所选状态显示在 TextBox 中。 如果您正在使用此应用程序，请确保您已下载 Silverlight Release: Silverlight for Windows Phone Toolkit - Nov 2010 并在您的项目中引用它。 此页面很简单。

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();
}

当 ListPicker 项目更改时，状态名称会出现在 TextBlock 中。

图像按钮的灵感来自 Przemyslaw Chruscicki 的 Windows Phone 7 的 ImageButton 控件：Silverlight 和 Windows Phone 7 Geek Page。 以下代码设置按钮

<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>

ImageButton 控件模板位于 App.Xaml.Cs 中。 按下按钮时，将执行以下按钮事件，该事件将用户导航到所选页面

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;
    }
}

帮助和关于页面

帮助和关于页面是本文的主要主题。 这是一个简单的 Browser 控件，用于显示本地 HTML 页面。 例如，帮助页面由以下代码显示

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

看看代码有多简单。 我们将基本目录设置为 HTDocs 并导航到 HTML 页面。

在 App.Xaml.cs 中设置 HTML 页面

独立存储中的 HTML 页面在 App.Xaml.cs 中设置。 启动应用程序时，会调用 Initialize_Help_HTMLPage()。 下面给出了此代码段

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);

}

我们在独立存储中创建 HTDocs 目录，并将 HTML 文件和图像复制到此目录。 我使用 Visual Studio 创建了这个目录、HTML 文件和 images 目录，我在其中复制了图像文件。 请确保图像文件的类型为 Content 而不是 Resource。

我们使用两个扩展方法，CopyBinaryFile 和 CopyTextFile。 CopyTextFile 用于复制 HTML 文件，CopyBinaryFile 用于将图像复制到独立存储。 这些来自 David Cornelson 的文章（参考 2）。

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();
        }
    }
}

关注点

这是一个有趣的项目。 现在，我有一个用于在我的 WP7 应用程序中设计帮助和关于页面的 HTML 文件的模板，这简化了我的生活。 我希望它对您也有用。

参考文献

1. Silverlight Release: Silverlight for Windows Phone Toolkit - Nov 2010
2. 将文件从 XAP 移动到独立存储以在 Windows Phone 7 上使用本地 HTML 内容 « 简化技术，作者：David Cornelson
3. Windows Phone 7 的 ImageButton 控件：Silverlight 和 Windows Phone 7 Geek Page，作者：Przemyslaw Chruscicki

历史

• 第一版