Mostrar un sitio web en Windows 8 (Modern UI)

El control WebView nos permite mostrar una página web que podemos cargar desde un servidor en línea o de un documento html local en nuestro pc, también podemos tener acceso a DOM e interactuar con los script contenidos en el site. 

Como mostrar una página web


Primero creamos una aplicación básica, del cuadro de herramienta seleccionamos un control WebView, un botón(Button) y una caja de texto (TextBox), los colocamos en la página principal.

Agregamos un manejador para el evento clic del botón, para agregar un controlador de eventos podemos seleccionar el botón ir a propiedades, seleccionar la pestaña eventos identificada con el icono de un rayo, nos aparecerá la lista de posibles eventos, seleccionamos Click le damos un nombre y listo.


Para cargar un contenido html personalizado o que se encuentre en un archivo nos vamos al controlador del evento clic del botón y llamamos al método NavigateToString del WebView y le pasamos como parámetro un string que contiene el html que deseamos mostrar.

private void botonClick(object sender, RoutedEventArgs e)
{
    string html = @"<!DOCTYPE html>
                    <html>
                        <body>
                            <h1>Hola WebView!.</h1>
                        </body>
                    </html>";

    web.NavigateToString(html);
}

Si deseamos mostrar un sitio web que se encuentre en la red solo debemos llamar al método Navigate con la Uri deseada en nuestro caso será la dirección escrita en el TextBox. Si la dirección no es válida producirá un error.

private void botonClick(object sender, RoutedEventArgs e)
{
    Uri direccion = new Uri(txt.Text);
    web.Navigate(direccion);
}

El Control ProgressRing 


Este control nos sirve para indicar que hay una operación en progreso, es buena idea que al cargar un sitio usemos este control de modo que si la página tarda en cargar el usuario esté al tanto de ello, como ejemplo agregaremos un control ProgressRing justo en el medio del control WebView y lo activaremos al comenzar la carga de la página, lo detendremos al terminar.



Para activar el ProgressRing basta con establecer la propiedad IsActive en true y para desactivarlo establecer esta propiedad en false, pera debemos desactivarlo cuando la página termina de cargarse para eso contamos con el evento LoadCompleted del WebView aquí desactivaremos el ProgressRing.

private void botonClick(object sender, RoutedEventArgs e)
{
    pring.IsActive = true;

    Uri direccion = new Uri(txt.Text);
    web.Navigate(direccion);
   
    web.LoadCompleted += (sdr, args) =>
        {
            pring.IsActive = false;
            web.Visibility = Windows.UI.Xaml.Visibility.Visible;
        };
}



Comentarios

Entradas populares de este blog

Conectar SQL Server con Java

Entrenar OpenCV en Detección de Objetos

Detección de figuras geométricas