NedRed.net te adora.
Ultimas Noticias
Principal / Comunidad NedRed / How to create – Un navegador Web en C# ~ Con Visual Studio

How to create – Un navegador Web en C# ~ Con Visual Studio

De aqui no saldremos siendo los creadores de un nuevo google chrome
pero podremos decir que tenemos nuestro propio navegador..Algo es algo.

Comencemos:

Lo primero sera necesario tener el visual Studio instalado
búscalo en San Google o ves a la pagina web del programa.
creo recordar que hay una versión libre

Downloads | IDE, Code, & Team Foundation Server | Visual Studio

La instalación lleva su tiempo, tened paciencia.

Cuando ya tengamos todo instalado abrimos Visual Studio

le damos a Archivo – Nuevo – Proyecto

buscamos, la plantilla Visual C# – Aplicacion de windows from (.net Framerwork)
y la nombramos por ejemplo con el nombre “navegador”

Nos saldrá algo como en la siguiente imagen, este from1 sera nuestra área de trabajo.

Buscamos nuestra caja de herramientas normalmente situada a la derecha del programa

En ella buscamos “WebBrowser1” y arrastramos el complemento al from1 esto ocupara todo el from1

Podemos elegir el tamaño del recuadro donde se mostrara la web
recomiendo hacerlo mas pequeño que el tamaño del from1
para ello, vamos a la esquina superior derecha.

y presionamos “Desacoplar en contenedor primario”

Ahora podremos mover la ventana donde querramos, haciendola mas pequeña
y poniéndola en la posición deseada.

El siguiente paso sera configurar el WebBrowser para ello damos click derecho
dentro del recuadro que hemos ajuntado anteriormente y le damos a propiedades

Se nos abrira las propiedades del complemento y debemos bucar el parametro
“anchor” en el le damos a la pestañita y seleccionamos todos los recuadros.

Con esto lograremos hacer que cuando maximicemos la ventana tambien se maximice
el “WebBrowser1”

———————————————————————————————–

Vamos ahora con los botones, algo esencial en nuestro futuro navegador.
Buscamos de nuevo nuestra caja de herramientas y en ella buscamos “button”

lo arrastramos a la parte deseada, fuera del recuadro del WebBrowser

Un vez puesto todos los botones conforme mas nos guste debería quedar algo así.

Ahora vamos a proceder a cambiar el nombre de los botones, selecionamos el boton
le damos click derecho y propiedades

buscamos el parametro “text” y le cambiamos el nombre al deseado, en este caso
pondremos “Ir”

hacemos lo mismo con los otros botones quedando algo asi.

———————————————————————————————————-

El siguiente paso sera añadir la barra de direcciones
para ello vamos de nuevo a nuestra caja de herramientas y buscamos
“TextBox”, la arrastramos al lugar que deseemos.
Como es la primera se llamara “TextBox1” Recordar este nombre

————————————————————————————————————————————–

A estas alturas ya el diseño de nuestro navegador echo…
podemos compilar para ver como quedaría
una vez terminado, para ello nos vamos a “compilar” y luego “compilar solución”

Una vez compilado, le damos al boton “iniciar” (ver imagen)

Esperamos unos segundos y si todo esta bien saldra la ventana:

———————————————————————————————————————————-

Ya estamos en el punto que nos toca poner codigo.. vamos al ataque

Vamos al botón que hemos llamado “home” y le damos doble click.
nos saldrá algo como en la siguiente imagen.

Como recordaremos y pusimos anteriormente el recuadro donde se mostrara la web
es llamado “webBrowser1” y como usaremos el boton para ir al principal..
deberemos poner “webBrowser1.GoHome”. Esto ara que al presionar
el botón Home, volvamos a la pagina principal.

Codigo:
private void button2_Click(object sender, EventArgs e)

{

webBrowser1.GoHome();

}

Pasamos ahora la botón “Actualizar”, le damos doble click y nos saldrá lo siguiente:

Codigo:
private void button3_Click(object sender, EventArgs e)

{

webBrowser1.Update();

}

Ahora pasamos al boton “IR”, lo mismo que los otros 2 botones, doble click.
En este caso como sera para navegar hasta la web escrita..
usaremos “webBrowser1.Navigate”, y para que el boton sepa
a que url tiene que ir.. especificamos donde esta el texto.
en este caso “textBox1.Text” quedando una cosa asi
“webBrowser1.Navigate(textBox1.Text);”

Codigo:
private void button1_Click(object sender, EventArgs e)

{

webBrowser1.Navigate(textBox1.Text);

}

————————————————————————————————————————–

Toca probar nuestra creacion!!! recordar…

Ponemos la web deseada y le damos a “ir”

Listo si hemos echo todo bien tenemos nuestro propio navegador!!!

Podemos acceder a nuestros archivos de nuestro navegador en la siguiente ruta

(Si no habéis cambiado las rutas de por defecto)

C:\Users\USER\Documents\Visual Studio 2017\Projects\navegador\navegador\bin\Debug

—————————————————————————————————————–
Ultimas configuraciones!!!! (Si se me olvidaba esta parte)
Vamos a la pestaña “Depurar” y selecionamos “Propiedades de navegador”
Sigue las fotos.

Cambiar a los nombres deseados, una vez rellenado los datos.. le damos a aceptar.
y por ultimo, le cambiamos el icono!!

Resultado final: Nuestro navegador !

Muchas gracias a todos por leer este post, esperemos que te guste.. Si quieres una segunda parte añadiendo mas características al navegador apoya el post, Un Resteem tambien ayuda!!!

Si tienes dudas, viste algún fallo u cualquier otra cosa déjala en los comentarios!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *