Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Introducing WebViewExtensions and WebViewBehavior

Whatever your reasons are for using WebView in a UWP app, whether it’s just to display some raw HTML or you need to actually show external web pages inline in your app, one thing is almost certain, you will not be able to await the web navigation. Yes, you can subscribe to the events for completed, failed, etc, but that then starts to all become a little messy, especially if you end up having to this in multiple places.

Ideally, it would be nice if you could just say to the WebView, “you go ahead and navigate, I’ll wait here.” So what can you do?

The Solution

I’ve written a set of extension methods that basically allow for the normal async/await model when using the WebView. I’ve also include a behaviour which utilises these extension methods and provides the ability to bind to it so you could, for example, show a progress indicator while the web page is navigating and loading.

Extension Methods Usage

The extension methods provided are for NavigateAsync() and NavigateToStringAsync(). Both methods return a WebViewNavigationResult object which tells you whether navigation was succeeded and any relevant http status codes. Both extensions methods support CancellationTokens so you can use these to abort the page navigation if required.

NavigateAsync

This method allows you to not only just navigate to a Uri via a regular GET, but by any HTTP method you require. So if you need to navigate via a POST, you can. You can also provide whatever implementation of IHttpContent you need to pass for this navigation.

        private async void NavigateTo_OnClick2(object sender, RoutedEventArgs e)
        {
            var result = await MainWebView.NavigateAsync("http://microsoft.com");

            var dialog = new MessageDialog($"Navigation was successful? {result.IsSuccess}");
            await dialog.ShowAsync();
        }

NavigateToStringAsync

This method is basically the same as the regular NavigateToString, only awaitable (some html is large and should be awaited)

        private async void NavigateTo_OnClick(object sender, RoutedEventArgs e)
        {
            var result = await MainWebView.NavigateToStringAsync("<html><body>Hello everyone</body></html>");

            var dialog = new MessageDialog($"Navigation was successful? {result.IsSuccess}");
            await dialog.ShowAsync();
        }

Behaviour Usage

This will require you to include the Behaviors package from nuget and can be used just like any other behaviour.

        <WebView x:Name="MainWebView">
            <interactivity:Interaction.Behaviors>
                <behaviors:WebViewBehavior Url="{Binding YourUrl}"
                                           IsLoading="{Binding IsLoading, Mode=TwoWay}"/>
            </interactivity:Interaction.Behaviors>
        </WebView>

The Source Code

WebViewExtensions: Source
WebViewBehavior: Source (note: this will also require you to include the source for WebViewExtensions)

SL

Advertisements

One response to “Introducing WebViewExtensions and WebViewBehavior

  1. Pingback: Dew Drop - April 3, 2017 (#2454) - Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: