Hi @all,

I need to use a WebView Control to Display some HTML code and could not figure out how to get it sorted out. Does anyone know of a sample?

You mean put some htlm Code to webview and Display?

It's not just putting some html code into webview. I need to handle a web based Dialog. I have a code behind based Version which I want to convert to MVVM, because of easier testability. From this code behind Version I know already, that playing withSource property does not help.

You can use an attached dependency property approach to bind html from your view model to a web view. Here's an example of the approach for Windows Phone Binding Html to the Web Browser control.

This approach should work out well in WinRT as well.

NigelSampson wrote:

You can use an attached dependency property approach to bind html from your view model to a web view. Here's an example of the approach for Windows Phone Binding Html to the Web Browser control.

This approach should work out well in WinRT as well.

Nigel,

thx a lot, worked perfectly for me. For those who want to use it as well, here my Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CaliburnFirst.Common
{
    class WebViewHelper
    {

        public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached(
            "Html", typeof(string), typeof(WebViewHelper), new PropertyMetadata(null, OnHtmlChanged));

        public static string GetHtml(DependencyObject dependencyObject)
        {
            return (string)dependencyObject.GetValue(HtmlProperty);
        }

        public static void SetHtml(DependencyObject dependencyObject, string value)
        {
            dependencyObject.SetValue(HtmlProperty, value);
        }

        private static void OnHtmlChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {

            var browser = d as WebView;
            if (browser == null)
                return;

            var html = e.NewValue.ToString();
            browser.NavigateToString(html);

        }

        public static readonly DependencyProperty HtmlUriProperty = DependencyProperty.RegisterAttached("HtmlUri",
                                                                                                        typeof (Uri),
                                                                                                        typeof (
                                                                                                            WebViewHelper
                                                                                                            ),
                                                                                                        new PropertyMetadata
                                                                                                            (null,
                                                                                                             OnHtmlUriChanged));
        public static void SetHtmlUri(DependencyObject dependencyObject, Uri value)
        {
            dependencyObject.SetValue(HtmlUriProperty,value);
        }

        public static Uri GetHtmlUri(DependencyObject dependencyObject)
        {
            return (Uri) dependencyObject.GetValue(HtmlUriProperty);
        }

        private static void OnHtmlUriChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var browser = d as WebView;
            if (browser == null)
                return;

            var htmlUri = (Uri)e.NewValue;
            browser.Navigate(htmlUri);
        }
    }

}

and in XAML:

            <WebView x:Name="WebInfo" 
                     cm:WebViewHelper.HtmlUri="{Binding Anleitung}"
                     Grid.Row="2" MaxHeight="300"></WebView>