[WinRT] How to use WebView.NavigateToString Methode

Topics: Getting Started
Feb 1, 2013 at 7:39 PM
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?
Feb 1, 2013 at 10:06 PM
You mean put some htlm Code to webview and Display?
Feb 2, 2013 at 12:12 PM
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.
Feb 3, 2013 at 9:01 PM
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.
Feb 4, 2013 at 9:15 AM
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>