Шаблон WebView App позволяет сочетать универсальность HTML+CSS+JavaScript с мощью C#, объединяя их в одно приложение. Он наиболее подойдет тем, кто имеет уже опыт веб-разработки и владеет HTML/CSS/JavaScript. Основу приложения в данном шаблоне составляет элемент управления Web View, который представляет усеченный браузер.
Итак, создадим проект по типу WebView App:
По сравнению со стандартным типом проекта по шаблону Blank App здесь структура проекта будет несколько отличаться:
В частности, в проекте будет каталог 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>
И если мы запустим проект по умолчанию, то получим следующую картину:
Теперь немного изменим стандартный шаблон, добавив новую функциональность.