Поделиться через

45 дней с Windows Phone 7. День #18. Элемент управления WebBrowser

Что может делать элемент управления «WebBrowser»?

Очевидно, что элемент управления WebBrowser служит для просмотра Web страниц. Но полноценным браузером данный элемент управления не является, так как у него нет адресной строки, вкладок, различных диалогов и.т.д. Можно представить данный элемент управления как некий аналог «iframe» из HTML мира. Кроме того, элемент управления WebBrowser уже имеет встроенную поддержку мультитач жестов. Вам для этого делать ничего не требуется.

Важной особенностью элемента управления является то, что он поддерживает не только отображение сайтов, загружаемых из интернета, но и работу с локальным контентом. Вы можете напрямую задать HTML, который будет отображаться в WebBrowser. Можно сохранить нужные страницы в ресурсах приложения, либо даже генерировать HTML на лету.

Вообще говоря, добавить WebBrowser в Silverlight Windows Phone 7 приложение просто. Надо только перетащить данный элемент управления из Toolbox:

<phone:WebBrowser x:Name="wbMain"/>

При этом будет подключено соответствующее XMLпространство имён:

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

Для того чтобы в браузере отобразить страницу, достаточно вызвать один метод:

wbMain.Navigate(new Uri("http://pugachev.info"));

Я также заменил заголовок страницы Silverlight приложения и название самого приложения. Результат показан на иллюстрации ниже.

Важно отметить, что элемент управления WebBrowser в Windows Phone 7, в отличие от своего аналога в десктопном Silverlight не нуждается в HtmlBrush, так как большинство графических преобразований можно сделать над самим браузером. Например, повернём WebBrowser на 45 градусов по оси Y:

<phone:WebBrowser x:Name="wbMain">

    <phone:WebBrowser.Projection>

        <PlaneProjection RotationY="-45"/>

    </phone:WebBrowser.Projection>

</phone:WebBrowser>

Вот как это будет выглядеть:

При этом элемент управления WebBrowser полностью интерактивен и продолжает работать как обычно. Во внебраузерном Silverlight 4 приложении мы такое бы сделать не смогли.

Загрузка локального контента.

Давайте добавим в наш проект несколько HTML страниц. В целях демонстрации я добавил две, но их может быть сколько угодно, однако не стоит забывать и об итоговом размере получившегося приложения.

Давайте теперь загрузим в браузере какую-либо страницу. Загрузка страниц будет происходить в том числе с помощью классов из XNA Framework, поэтому добавим в раздел «References» проекта нашего приложения библиотеку «Microsoft.Xna.Framework.dll». Классы из XNA часто помогают упростить разработку не только игр, но и обычных Silverlight Windows Phone 7 приложений.

Итак, в начале мы прочитаем нужную страницу с помощью StreamReader, а после этого вызовем у WebBrowser метод «NavigateToString»:

StreamReader reader = new StreamReader(TitleContainer.OpenStream("html/wp7wiki.html"));

wbMain.NavigateToString(reader.ReadToEnd());

Класс «TitleContainer» находится в пространстве имён «Microsoft.Xna.Framework». Если Вы хотите узнать больше про «Microsoft.Xna.Framework», прочитайте соответствующую статью на MSDN.

Кроме загрузки уже существующей страницы, мы можем генерировать HTML прямо в коде приложения. Далее приведу пример того, как это можно сделать:

string html= "<h1 style=\"color:red;\">Привет!</h1>" +

"<a href=\"http://pugachev.info\">Блог Сергея Пугачёва</a>";

wbMain.NavigateToString(ConvertExtendedAscii(html));

Функция «ConvertExtendedAscii» используется для устранения возможных проблем с кодировкой.

public static string ConvertExtendedAscii(string html)

{

    var retVal = "";

    var s = html.ToCharArray();

    foreach (char c in s)

    {

        if (Convert.ToInt32(c) > 127)

            retVal += "&#" + Convert.ToInt32(c) + ";";

        else

            retVal += c;

    }

    return retVal;

}

JavaScript по умолчанию отключён

Если на Ваших страницах есть JavaScript, то просто так он работать не будет. Его поддержку надо включить явно. Сделать это очень просто, достаточно задать значение свойства «IsScriptEnabled»:

<phone:WebBrowser x:Name="wbMain" IsScriptEnabled="True"/>

Взаимодействие со страницами, загруженными в WebBrowser.

При взаимодействии со страницей, загруженной в WebBrowser мы можем вызывать из C# кода JavaScript функции, а из JavaScript уведомлять Silverlight приложение. Вызвать JavaScript функцию из C# можно с помощью «InvokeScript()». В данном примере мы вызываем функцию «functionName» с параметром «parametr1» и получаем возвращаемое значение:

string returnValue= (string)wbMain.InvokeScript("functionName", "parametr1");

Для оповещения Silverlight приложения из JavaScript в Silverlight приложении надо подписаться на событие «ScriptNotify» элемента управления браузера. В обработчике события можно получить параметр, переданный из JavaScript:

void wbMain_ScriptNotify(object sender, NotifyEventArgs e)

{

    var value = e.Value;

}

В JavaScript для вызова оповещения надо сделать следующее:

window.external.Notify("value");

В данном примере мы передаём Silverlight приложению параметр со значением «value».

Так как взаимодействовать с JavaScript не имеет смысла до загрузки страницы, мы можем отслеживать процесс загрузки с помощью двух событий элемента управления «WebBrowser»: «Navigating» и «Navigated». Например, во время загрузки, чтобы не смущать пользователя белым экраном, можно показывать ProgressBar:

<ProgressBar Foreground="Orange" x:Name="ProgBar"

Visibility="Collapsed" IsIndeterminate="True" Height="4"

HorizontalAlignment="Left" Margin="10,66,0,0"

VerticalAlignment="Top" Width="460" />

void Browser_Navigating(object sender, NavigatingEventArgs e)

{

    ProgBar.Visibility = Visibility.Visible;

}

void Browser_Navigated(object sender, NavigationEventArgs e)

{

    ProgBar.Visibility = Visibility.Collapsed;

}

Соответственно, когда страница загружается, ProgressBar будет виден, а после загрузки страницы он будет скрыт.

Пример кода

Пример кода демонстрирует достаточно законченное приложение. Попробуйте на реальном примере то, о чём мы говорили сегодня.

Пример кода

Автор Jeff Blankenburg
Перевод и доработка Сергей Пугачёв
  • Last updated on