7 - Control WebView


En estos primeros conceptos para acostumbrarnos a trabajar con el Visual Studio estamos presentando controles visuales que nos serán de mucha utilidad cuando desarrollemos aplicaciones más complejas.

El siguiente control que exploraremos para el desarrollando de aplicaciones universales para windows se llama WebView y tiene como finalidad facilitarnos la carga de una página web.

Problema

Desarrollar una aplicación que permita ingresar una dirección de un sitio web en un control TextBox y luego al presionar un botón pasar a mostrar el sitio ingresado mediante un control de tipo WebView.

Disponer además otros dos botones para poder avanzar y retroceder en los sitios web visitados.

Como primer paso creamos un nuevo proyecto llamado "Proyecto6" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto:

nuevo proyecto visual Studio 2015 control WebView

El "Cuadro de herramientas" contiene dos pestañas con controles, el superior llamado "Controles de XAML comunes" y otro con todos los controles llamado "Todos los controles de XAML".

Cuadro de herramientas comunes y de todos los controles

Como el control WebView no es de uso frecuente se encuentra ubicado en la pestaña "Todos los controles de XAML".

Implementar una interfaz visual similar a la siguiente:

WebView

En la parte superior disponemos un control de tipo TextBox y cargamos en la propiedad Text el valor: "http://www.google.com.ar"

Luego tenemos tres botones que iniciamos las propiedades Content de cada uno con los valores: "Entrar", "Retroceder" y "Avanzar"

Finalmente disponemos un objeto de la clase WebView.

Si tiene problemas arrastrando los controles puede copiar el siguiente código XAML:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBox x:Name="textBox" Margin="10,0,0,0" TextWrapping="Wrap" Text="http://www.google.com.ar" VerticalAlignment="Top"/>
        <Button x:Name="button" Content="Entrar" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top"/>
        <Button x:Name="button1" Content="Retroceder" HorizontalAlignment="Left" Margin="80,37,0,0" VerticalAlignment="Top"/>
        <Button x:Name="button2" Content="Avanzar" HorizontalAlignment="Left" Margin="177,37,0,0" VerticalAlignment="Top"/>
        <WebView Margin="0,77,10,10"/>

    </Grid>
</Page>

Debemos definir un nombre al objeto WebView que dispusimos en el formulario, lo llamaremos web1:

WebView nombre

Ahora tenemos que definir los eventos para cada botón, seleccionamos el botón de "Entrar" y definimos el evento "Click":

WebView Button evento Click

Para este evento debemos codificar:

        private void button_Click(object sender, RoutedEventArgs e)
        {
            Uri uri1 = new Uri(textBox.Text);
            web1.Navigate(uri1);
        }

Como vemos creamos un objeto de la clase Uri pasando al constructor el string contenido en el control TextBox. Seguidamente llamamos al método Navigate del objeto web1 pasando como parámetro el objeto que creamos en la línea anterior.

También definimos los eventos para los otros dos botones que nos permitirán avanzar o retroceder las páginas visitadas:

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            if (web1.CanGoBack)
            {
                web1.GoBack();
            }
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            if (web1.CanGoForward)
            {
                web1.GoForward();
            }
        }

Como podemos ver llamando a los métodos GoBack() y GoForward() nos permite navegar por las páginas ya visitadas, y mediante las propiedades CanGoBack y CanGoForward controlamos que existan (por ejemplo no podemos retroceder a la página anterior si es la primera página que visitamos)

Luego el archivo XAML definitivo queda con el siguiente código:

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBox x:Name="textBox" Margin="10,0,0,0" TextWrapping="Wrap" Text="http://www.google.com.ar" VerticalAlignment="Top"/>
        <Button x:Name="button" Content="Entrar" HorizontalAlignment="Left" Margin="10,37,0,0" VerticalAlignment="Top" Click="button_Click"/>
        <Button x:Name="button1" Content="Retroceder" HorizontalAlignment="Left" Margin="80,37,0,0" VerticalAlignment="Top" Click="button1_Click"/>
        <Button x:Name="button2" Content="Avanzar" HorizontalAlignment="Left" Margin="177,37,0,0" VerticalAlignment="Top" Click="button2_Click"/>
        <WebView x:Name="web1" Margin="0,77,10,10"/>

    </Grid>
</Page>

Como vemos los tres botones ahora tienen definidas las propiedades Click con los nombres de métodos respectivos.

Al ejecutar la aplicación tenemos un resultado similar a este:

WebView ejecucion

Si queremos que no salgan los datos de telemetría abrimos el archivo App.xaml.cs y cambiamos el valor de la propiedad EnableFrameRateCounter del objeto DebugSettings por el valor false:

            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }

Es decir debe quedar:

            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = false;
            }

Ahora si lo volvemos a ejecutar tenemos como resultado:

WebView ejecucion

Si ejecutamos este programa en otro emulador los resultados serán similares:

WebView ejecucion

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto6.zip

Retornar