2014年9月11日 星期四

取得 WebView 畫面

在 Windows Runtime SDK 中有一個非常酷,名稱是 WebViewBrush 的畫刷,功能就如名稱一樣是將 WebView 中的內容 Render 到某處。

在 Windows Store Apps 中使用的方法很簡單,首先需要一個 WebView 瀏覽某個網頁,再來需要一個被貼上內容圖片的容器,我以 Rectangle 為例

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

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <WebView x:Name="webBrowser" Width="400" Height="300"
                 Source="http://www.msdn.com"
                 LoadCompleted="OnWebBrowserLoadCompleted"/>
        <Rectangle x:Name="rect" Width="800" Height="600"/>
    </StackPanel>
</Page>

接著在 WebView 的 LoadCompleted 事件中像下面範例一樣操作畫刷,即可將 MSDN 網頁的內容輸出在 Rectangle 上面,這在以前的框架是很不容易做到的事情。

private void OnWebBrowserLoadCompleted(object sender, NavigationEventArgs e)
{
    WebViewBrush brush = new WebViewBrush();
    brush.SourceName = "webBrowser";
    brush.Redraw();
    rect.Fill = brush;
}


有一點需要特別交待一下,雖然這裡是以 Store Apps 為例,但文件中有記載到 Windows Phone 是沒有支援這個類別的,對於要拿到手機網頁畫面來說還是沒辦法以那麼方便的方式操作,附上類別的說明。

// Summary:
//     Not implemented for Windows Phone 8.1. Provides a brush that renders the
//     content that is currently hosted in a WebView control. This class is not
//     supported on Windows Phone. WebView content will not be captured.

沒有留言:

張貼留言