[Windows 8 App]顯示訊息的控制項------WebView

2013-12-03

WebView控制項

使用WebView控制項可以做出一個簡易的網頁瀏覽器窗口

將指定位址的網頁內容顯示出來

WebView的常用屬性

屬性	屬性介紹
Name	WebView控制項的名稱
Source	WebView控制項打開的URI位置

WebView的常用方法

方法	方法介紹
NavigateToString	顯示指定的HTML字串內容
Navigate	顯示URI地址的網頁內容

HTML文字解析

我們做一個簡單的範例來介紹如何使用WebView解析HTML文字並顯示

新增一個專案【ShowHtmlDemo】，在Grid元素中新增一個WebView的控制項

【MainPage.xaml】的程式碼如下：


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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <WebView Name="ShowHtml" HorizontalAlignment="Left" Height="318" Width="555" Margin="350,135,0,0" VerticalAlignment="Top" />
    </Grid>
</Page>

替【MainPage.xaml】裡面的WebView控制項設置一些屬性，Name屬性值為 ShowHtml，Height屬性值為100

Width屬性值為 100 ，HorizontalAlignment的屬性值為 Left

VerticalAlignment屬性值為 Top

【MainPage.xaml.cs】的程式碼如下：

在【MainPage.xaml.cs】中的OnNavigatedTo方法中，定義一段HTML字串


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace ShowHtmlDemo
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string htmlString = "<html><head></head><body><h1>Webview控制項文字解析</h1><div style='font-family:FangSong'>使用Webview控制項解析HTML文字</div></body</html>";
            ShowHtml.NavigateToString(htmlString);
        }
    }
}

上面的程式碼中，定義了一個string的htmlstring，用來儲存HTML字串

然後用htmlString做參數

用ShowHtml的NavigateToString方法，將HTML文字解析並顯示在介面的WebView中

網頁瀏覽

設置一個網路的URI地址，直接在WebView顯示

新增一個專案【ShowWebDemo】，在【MainPage.xaml】中新增一個WebView的控制項

【MainPage.xaml】的程式碼：


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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <WebView Name="ShowWeb"/>
    </Grid>
</Page>

在Grid中放置一個WebView的控制項，Name屬性為 ShowWeb

【MainPage.xaml.cs】的程式碼：


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace ShowWebDemo
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            Uri targetUri = new Uri("http://www.microsoft.com.tw");
            ShowWeb.Navigate(targetUri);
        }
    }
}

在OnNavigatedTo的方法中定義一個URI的地址

在用Navigate方法將畫面給顯示出來

專案執行畫面：

會開啟台灣微軟的官方網站畫面

WebView

回首頁