WindowsPhone 8.1 WebView not showing?

Question

I'm brand new to windows phone development having bought one last week just for this purpose with Windows 8.1 just released ^^.

I'm trying to follow one of the Microsoft beginner tutorials creating a Minibrowser, a very simple app with a textbox, button and a webview. I realise this is a windows phone 8 tutorial but figured windows 8.1 can't be massively different surely?

I have run through the tutorial to the end but I'm having issues with the webview not actually displaying anything.

The xaml for the page view is

<Page
    x:Class="MiniBrowser.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MiniBrowser"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="LayoutRoot">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- TitlePanel -->
        <StackPanel Grid.Row="0" Margin="24,17,0,28">
            <TextBlock Text="My First Application" Style="{ThemeResource TitleTextBlockStyle}" Typography.Capitals="SmallCaps"/>
            <TextBlock Text="Mini Browser" Margin="0,12,0,0" Style="{ThemeResource HeaderTextBlockStyle}"/>
        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->
        <StackPanel Grid.Row="1" x:Name="ContentRoot" Margin="12,0,12,12">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBox x:Name="URL"
                         Text="http://www.xbox.com"
                         TextWrapping="NoWrap"
                         Height="Auto"
                         Width="Auto"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Center"
                         Margin="0,0,12,0"/>
                <Button x:Name="Go"
                        Grid.Column="1"
                        Content="Go"
                        Height="Auto"
                        Width="Auto"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Center"
                        Margin="12,0,0,0"
                        Click="Go_Click"/>
            </Grid>
            <WebView x:Name="MiniBrowser"
                     Height="Auto"
                     Width="Auto"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"
                     ScrollViewer.ZoomMode="Disabled"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled"
                     Loaded="MiniBrowser_Loaded"
                     NavigationFailed="MiniBrowser_NavigationFailed" NavigationCompleted="MiniBrowser_NavigationCompleted"
                     Visibility="Visible"/>
        </StackPanel>
    </Grid>
</Page>

and the relevant event handlers for the button and webview are

private void Go_Click(object sender, RoutedEventArgs e)
        {
            String site = URL.Text;
            MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
        }

        private void MiniBrowser_Loaded(object sender, RoutedEventArgs e)
        {
            String site = URL.Text;
            MiniBrowser.Navigate(new Uri(site, UriKind.Absolute));
        }

        private void MiniBrowser_NavigationFailed(object sender, WebViewNavigationFailedEventArgs e)
        {
            ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;
            XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
            XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
            toastTextElements[0].AppendChild(toastXml.CreateTextNode("Hello World!"));
            ToastNotification toast = new ToastNotification(toastXml);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }

        private void MiniBrowser_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
        {
            ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01;
            XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate);
            XmlNodeList toastTextElements = toastXml.GetElementsByTagName("text");
            toastTextElements[0].AppendChild(toastXml.CreateTextNode("Nav Complete"));
            ToastNotification toast = new ToastNotification(toastXml);
            ToastNotificationManager.CreateToastNotifier().Show(toast);
        }
    }

I can see from running the page that both at start up and when I click the go button the Navigation Completed event is being called as the Nav Complete post pops up but the xbox webpage which shouldn't be loading isn't visible.

I've tweaked the xaml which is shown in the demonstration slightly as can be seen, so instead of just having a single ContentRoot grid, I've nested the horizontal stack panel which contains the address TextBox and Button, with the WebView being beneath it.

I've also used the WebView as opposed to phone:WebBrowser as in the tutorial, since this doesn't seem to exist in WP8.1, so this could well be the issue...

Does anyone know what it is that I'm doing incorrectly, or can anyone comment if the style I am using could be improved upon in anyway.

Learning a new platform is always a challenge as you try and get your head around how things are done differently; Windows Phone is certainly quite different to Android which I'm more familiar with!

Thanks in advance

EDIT:

I tried changing the XAML code by commenting out what I had for the page contents (textbox, button and webview) and inserting the exemplar xaml from the tutorial as follows

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox x:Name="URL" Margin="10,10,85,0" Text="http://www.xbox.com" VerticalAlignment="Top"/>
    <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="346,10,0,0" VerticalAlignment="Top"/>
    <phone:WebBrowser x:Name="MiniBrowser" Margin="10,82,0,0"/>
</Grid>

but I get exactly the same issue as before where the webview is just showing black, as well as generally looking worse...

I'm guessing this issue is due to differences between the expected phone:WebBrowser and WebView that I'm using.

Answer 1

I have found and fixed the issue. The problem was with my declaration of the webview in xaml:

<WebView x:Name="MiniBrowser"
         Height="Auto"
         Width="Auto"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         ScrollViewer.ZoomMode="Disabled"
         ScrollViewer.VerticalScrollBarVisibility="Disabled"
         Loaded="MiniBrowser_Loaded"
         NavigationFailed="MiniBrowser_NavigationFailed"         
         NavigationCompleted="MiniBrowser_NavigationCompleted"
         Visibility="Visible"/>

By changing it to

<WebView x:Name="MiniBrowser"
         Height="425"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch"
         ScrollViewer.ZoomMode="Disabled"
         ScrollViewer.VerticalScrollBarVisibility="Disabled"
         Loaded="MiniBrowser_Loaded"
         NavigationFailed="MiniBrowser_NavigationFailed" 
         NavigationCompleted="MiniBrowser_NavigationCompleted"
         Visibility="Visible"/>

it now works. Appears the issue was with using Height="Auto". This was setting the height to 0 so it wasn't actually displaying.

Answer 2

I realise this is a windows phone 8 tutorial but figured windows 8.1 can't be massively different surely?

You are making a Windows Runtime app which is a lot different from Silverlight apps, like the one of that tutorial.

If you want to develop for Windows Phone 8.1 (and also Windows 8.1) you should follow WinRT tutorials, I suggest you this one:

http://channel9.msdn.com/Series/Windows-Phone-8-1-Development-for-Absolute-Beginners