Extensions in UWP Community Toolkit - WebViewExtensions

概述

UWP Community Toolkit Extensions 中有一個為 WebView 提供的擴展 - WebViewExtensions，本篇我們結合代碼詳細講解 WebView Extensions 的實現。

WebView Extensions 允許使用附加屬性，在 XAML 中指定 WebView 的目標地址或目標網頁內容，關於這一擴展，官方示例應用中並沒有對應示例，我們實現一個簡單的示例截圖：

Source: https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI/Extensions/WebView

Doc: https://docs.microsoft.com/zh-cn/windows/uwpcommunitytoolkit/extensions/webviewextensions

Namespace: Microsoft.Toolkit.Uwp.UI.Extensions; Nuget: Microsoft.Toolkit.Uwp.UI;

開發過程

代碼分析

我們先來看一下 WebViewExtensions 的類結構：

其中 Webview.cs 和 WebView.Properties.cs 類已被標記為 Obsolete，被 WebViewExtensions.cs 替代。

WebViewExtensions.cs

首先來看類中定義的幾個附加屬性：

• Content - WebView 的目標網頁內容，類型為 string，變化時觸發 OnContentChanged 事件；
• ContentUri - WebView 的目標網頁地址，類型為 Uri，變化時觸發 OnContentUriChanged 事件；

接下來看看這兩個事件的處理邏輯：

1. OnContentChanged(d, e)

這個方法很簡單，就是讀取變化後的 string，使用 WebView 的 NavigateToString 方法賦值；需要註意的是，這裡的 content 並不一定是一個有效的 html 網頁，也可以是一段普通的字元串，Webview 也會以預設的字體樣式來顯示這段字元串；

private static void OnContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    Windows.UI.Xaml.Controls.WebView wv = d as Windows.UI.Xaml.Controls.WebView;

    var content = e.NewValue as string;

    if (string.IsNullOrEmpty(content))
    {
        return;
    }

    wv?.NavigateToString(content);
}

2. OnContentUriChanged(d, e)

這個方法的實現也很簡單，讀取並把內容轉為 Uri 類型，如果有效則跳轉到對應的 Uri 網站；這裡要求傳入的值一定是格式正確的網址，雖然不一定是可用的網址，不然會造成 crash；

private static void OnContentUriChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    Windows.UI.Xaml.Controls.WebView wv = d as Windows.UI.Xaml.Controls.WebView;

    var uri = e.NewValue as Uri;

    if (uri == null)
    {
        return;
    }

    wv?.Navigate(uri);
}

調用示例

我們讓 Webview 綁定 TextBlock 的 Text 作為 ContentUri，可以看到 WebView 正確跳轉到了指定網址；

<TextBlock Text="http://www.cnblogs.com/shaomeng/" x:Name="uri"/>
<WebView Grid.Row="1" extensions:WebView.ContentUri="{Binding Text, ElementName=uri}"/>

總結

到這裡我們就把 UWP Community Toolkit Extensions 中的 WebViewExtensions 的源代碼實現過程和簡單的調用示例講解完成了，希望能對大家更好的理解和使用這個擴展有所幫助。歡迎大家多多交流，謝謝！

最後，再跟大家安利一下 UWPCommunityToolkit 的官方微博：https://weibo.com/u/6506046490, 大家可以通過微博關註最新動態。

衷心感謝 UWPCommunityToolkit 的作者們傑出的工作，Thank you so much, UWPCommunityToolkit authors!!!