I am new to developing Windows phones, having bought the last week just for this purpose, the just released Windows 8.1 ^^.
I am trying to follow one of Microsoft's beginner tutorials by creating Minibrowser , a very simple application with a text box, button, and WebView. I understand that this is a tutorial on Windows Phone 8, but curly windows 8.1 cannot be completely different, of course?
I have finished the tutorial to the end, but I am having problems with web browsing that does not actually display anything.
xaml to view page
<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> <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> <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 corresponding 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 the start of the page that starts, and when I press the go button, the "Complete navigation" event is raised when the message "Full mail" pops up, but the xbox web page that should not load is not visible.
I changed the xaml, which is shown in the demonstration a bit, as you can see, so instead of having only one ContentRoot grid, I nested the horizontal stack panel containing the TextBox and Button address using the WebView below it.
I also used WebView as opposed to the phone: WebBrowser, as in the tutorial, as this does not seem to exist in WP8.1, so this could very well be a problem ...
Does anyone know what I am doing wrong, or anyone can comment if the style I use can be improved anyway.
Learning a new platform is always a challenge when you are trying to figure out how things are done differently; The Windows Phone is, of course, completely different from Android, with which I am more familiar!
Thank you in advance
EDIT:
I tried changing the XAML code by commenting on what I had for the content of the page (text box, button and webview), and inserting a xaml sample from the tutorial as follows
<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 problem as before when the webview just shows black and also looks worse overall ...
I assume that this problem is related to the differences between the expected phone: WebBrowser and WebView, which I use.