XAML WebView Control

Hannes Preishuber

In einer Windows 8 Development Schulung kam die Frage auf das WebView Control. Dies eignet sich zum Anzeigen von HMTL und basiert auf dem IE 10. Nichts desto trotz ist es erheblich in seiner Funktion beschnitten. Mutmaßlich aus Gründen der Sicherheit, kann man in keiner METRO App ein XAML UI Element über das WebView Control legen. So wird ein Charme, der ja vom Betriebssystem kommt noch im Vordergrund erscheinen. Der weitere Settingsdialog ist aber hinter dem Webview Control und damit nicht sichtbar. Einziger Workaround für AppBar und Settings ist, das Webview einfach zu verkleinern, bzw. zu verschieben. Während man ein Popup dargestellt, sind diese beiden UI Elemente  dann nebeneinander.

Wenn man einen MessageDialog braucht, ist dieser Ansatz kaum zu machen. Üblicherweise werden dann statt dem Webview ein Bild der aktuellen Darstellung überblendet und das Webview deaktiviert. Dabei hilft der WebViewBrush.

Das folgende VB.NET Code Schnippsel ist aus dem Windows 8 Winrt SDK entnommen

 If Rect1.Visibility = Windows.UI.Xaml.Visibility.Visible Then

    Dim b As New WebViewBrush()
    b.SourceName = "WebView6"
    b.Redraw()
    Rect1.Fill = b
    WebView6.Visibility = Windows.UI.Xaml.Visibility.Collapsed

End If

Als nächstes habe ich mich den Innereien zugewandt. Üblicher HTML und JavaScript Code funktioniert meist recht gut. Allerdings hat der IE 10 nach wie vor erhebliche Meinungsunterschiede wie der Standard HTML5/CSS3 und Java Script interpretiert werden sollen. Popup Dialoge wie alert oder confirm werden komplett unterdrückt.

In meiner Aufgabenstellung wollte ich ein Stück Text markieren und in der WinRT App weiter verwenden.  Es gibt zwar ein Event ScriptNotify, aber man muss vorher deklarieren für welche Quellen das gilt. Wenn man das vergisst wartet man vergeblich auf das Notification Event.

Private Sub MainPage_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded

        Dim uris = New List(Of Uri)
        uris.Add(New Uri("http://localhost:21916/"))
        webview1.AllowedScriptNotifyUris = uris

       AddHandler webview1.ScriptNotify, AddressOf JScriptEvent

 End Sub

Private Sub JScriptEvent(sender As Object, e As NotifyEventArgs)

        txtHTML.Text = e.Value

End Sub

Im JavaScript Teil ist der Aufruf mit einer Zeile Quellcode erledigt. Hier wird ein Button dazu verwendet. Allerdings musste ich Code klauen um den selektierten Text in den gängigen Browsern zu erhalten.

function ButtonSelectedText() 

{         
     window.external.notify(getSelText().toString());
}

function getSelText() {
           var SelText = '';

           if (window.getSelection) {
               SelText = window.getSelection();
           } else if (document.getSelection) {
               SelText = document.getSelection();
           } else if (document.selection) {
               SelText = document.selection.createRange().text;
           }
           return SelText;
 }

Bisher habe ich keine Möglichkeit gefunden aus WinRT heraus JavaScript im WebView Control zu debuggen.

Weiters sollte der selektierte Text per Context Menü übernommen werden können. Was im Browser noch funkltioniert verweigert im Webview seinen Dienst. Deswegen habe ich hier den Umweg über ein MouseUp Event verwendet um den markierten Text in einen Zwischenvariable gelegt.

<div class="context-menu-html5menu box menu-1">
    Context Menü das ist ein wenig mehr text und wir werden sehen

</div>

    <div id="out"></div>

    <menu class="showcase" id="html5menu" type="context" style="display: none;">
        <command onclick="ContextMenuSelectText()" label="Markiert"></command>

        <command onclick="some code ” label="Entfernen">
</command>


</menu>

   <script>
       var txt='';

       $(document).ready(function () 
           {
           $(document).bind("mouseup", function () 
            {
               txt = getSelText().toString();
           });
       });
      
 $(function () 
 {
           $.contextMenu(
{
               selector: '.context-menu-html5menu',
               items: $.contextMenu.fromMenu($('#html5menu')
)
           });
       });

function ContextMenuSelectText()
 {
        
           window.external.notify(txt);
        
       }