Tutorials for web designers and developers
Tutorials for Developers_

Webview windows 8 app

This tutorial is about webview windows 8.

Lets add webview windows 8 now!
1. Open visual studio 13 > New project > Visual C# > Blank App
2. In solution explorer, open MainPage.Xaml and add some buttons (copy paste code below inside grid tag).

<StackPanel Margin="100">
      <Button Click="Button_Click">Navigate to Url</Button>
      <Button Click="Button_Click_1">Load local file</Button>
      <Button Click="Button_Click_2">Read File as Web</Button>
      <Button Click="Button_Click_3">Throw JavaScript based html on web page</Button>
      <Button Click="Button_Click_4">Call JavaScript on page</Button>
      <WebView DefaultBackgroundColor="White" Name="WebView1" Width="600" Height="400"></WebView>
</StackPanel>

3. Since we added 5 button we need to add 5 events too (1 for each button) respectively. you just goto each button event definition and enter the code inside braces or you can simply copy paste below code as it is under Main method closing braces.

private void Button_Click(object sender, RoutedEventArgs e)
        {
            WebView1.Navigate(new Uri("http://bing.com", UriKind.Absolute));
        }

        private async void Button_Click_1(object sender, RoutedEventArgs e)
        {
            StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///html/example.html"));
            string htmlFragment = await FileIO.ReadTextAsync(f);

            WebView1.NavigateToString(htmlFragment);
        }

        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            string url = "ms-appx-web:///html/example.html";
            WebView1.Navigate(new Uri(url));

        }

        private void Button_Click_3(object sender, RoutedEventArgs e)
        {
            string htmlFragment = @"
            <html>
                <head>
                    <script type='text/javascript'>
                        function doSomething() 
                        { 
                            document.getElementById('myDiv').innerText = 'GoodBye';
                            return 'Hello World!'; 
                        }
                    </script>
                </head>
                <body>
                    <div id='myDiv'>Hello</div>
                 </body>
            </html>";

            WebView1.NavigateToString(htmlFragment);
        }

        private async void Button_Click_4(object sender, RoutedEventArgs e)
        {
            string s = await WebView1.InvokeScriptAsync("doSomething", null);
            MessageDialog dailog = new MessageDialog(s);
            dailog.ShowAsync();
        }

click on folder to download complete code by Mr Usman-Ur-Rehman

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published.