Шаблон WebView App

Описание шаблона

Последнее обновление: 31.10.2015

Шаблон WebView App позволяет сочетать универсальность HTML+CSS+JavaScript с мощью C#, объединяя их в одно приложение. Он наиболее подойдет тем, кто имеет уже опыт веб-разработки и владеет HTML/CSS/JavaScript. Основу приложения в данном шаблоне составляет элемент управления Web View, который представляет усеченный браузер.

Итак, создадим проект по типу WebView App:

WebView App in Windows Phone 8.1

По сравнению со стандартным типом проекта по шаблону Blank App здесь структура проекта будет несколько отличаться:

WebView App Project Structure in Windows Phone 8.1

В частности, в проекте будет каталог Html, в котором будет находиться файл index.html и подкаталог css с файлом стилей phone.css

Если мы обратимся к главной странице приложения MainPage.xaml, то она будет содержать следующий код:

<Page
    x:Class="WebViewApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WebViewApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <WebView x:Name="WebViewControl"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             NavigationCompleted="Browser_NavigationCompleted" />

    <Page.BottomAppBar>
        <CommandBar>
            <CommandBar.PrimaryCommands>
                <AppBarButton
                    x:Name="ForwardAppBarButton"
                    x:Uid="ForwardAppBarButton"
                    Click="ForwardAppBarButton_Click"
                    Icon="Forward"
                    Label="forward"/>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton
                    x:Name="HomeAppBarButton"
                    x:Uid="HomeAppBarButton"
                    Click="HomeAppBarButton_Click"
                    Label="home"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

Здесь определен элемент WebView для отображения html-страниц, и также элемент CommandBar, который служит для создания элементов навигации по html-страницам в WebView.

А в файле кода MainPage.xaml.cs можно увидеть, что при переходе к станице MainPage в WebView будет загружаться единственная страница index.html:

using System;
// ..............

namespace WebViewApp
{
    public sealed partial class MainPage : Page
    {
        private static readonly Uri HomeUri = new Uri("ms-appx-web:///Html/index.html", UriKind.Absolute);

        public MainPage()
        {
            this.InitializeComponent();
            this.NavigationCacheMode = NavigationCacheMode.Required;
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            WebViewControl.Navigate(HomeUri);

            HardwareButtons.BackPressed += this.MainPage_BackPressed;
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            HardwareButtons.BackPressed -= this.MainPage_BackPressed;
        }

        private void MainPage_BackPressed(object sender, BackPressedEventArgs e)
        {
            if (WebViewControl.CanGoBack)
            {
                WebViewControl.GoBack();
                e.Handled = true;
            }
        }

        private void Browser_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            if (!args.IsSuccess)
            {
                Debug.WriteLine("Navigation to this page failed, check your internet connection.");
            }
        }
		// переход вперед
        private void ForwardAppBarButton_Click(object sender, RoutedEventArgs e)
        {
            if (WebViewControl.CanGoForward)
            {
                WebViewControl.GoForward();
            }
        }
		// Нажатие кнопки Пуск - переход к главной странице index.html
        private void HomeAppBarButton_Click(object sender, RoutedEventArgs e)
        {
            WebViewControl.Navigate(HomeUri);
        }
    }
}

Глобальная переменная HomeUri задает адрес ресурса для начального перехода, то есть фактически страницу index.html из каталога Html. И как раз в методе OnNavigatedTo, который срабатывает при переходе на текущую страницу, происходит такой переход в элементе WebView: WebViewControl.Navigate(HomeUri)

А также в этом методе устанавливается обработчик нажатия кнопки Назад. В методе OnNavigatedFrom, котоырй срабатывает при переходе с текущей страницы, данный обработчик отменяется.

Сам же обработчик MainPage_BackPressed осуществляет переход назад по страницам внутри истории переходов элемента WebView. То есть в отличие от рассмотренной ранее навигации по страницам здесь переходы идут внутри WebView по html-страницам.

Сама страница index.html выглядит очень просто:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/phone.css" />
    <title>Windows Phone</title>
</head>
<body>
    <div>
        MY APPLICATION
    </div>
    <div id="page-title">
        page title
    </div>
</body>
</html>

И если мы запустим проект по умолчанию, то получим следующую картину:

Теперь немного изменим стандартный шаблон, добавив новую функциональность.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850