Práctica 1 - El SplashScreen

[Type the abstract of the document here. The abstract is typically a short
summary of the contents of the document. Type the abstract of the
document here.]
Preview

El Formulario o Form, es un objeto o elemento gráfico que permite crear aplicaciones

de Escritorio, conteniendo en su interior Controles o Componentes visuales que
faciliten el trabajo o interacción entre el usuario y la aplicación.

El Form, cuenta con Bordes (margenes), que permiten darle forma a nuestro Form,
vertical u horizontal, es decir, re-dimensionar el Form, de su tamaño original a un
tamaño definido acordes a as necesidades de nuestro App o nuestro Cliente.

Al ejecutar la aplicación, F5 o (run), y colocar el puntero en cualquiera de los

bordes, podremos cambiar el tamaño (re-dimensionar) el Form. Incluso, si hacemos
lo propio en las esquinas del Form.

Página 1
El Form cuenta en su parte superior, la barra de título, la cual contiene el icono de
la App, el nombre (a nivel de usuario) del mismo Form, y los botones de Minimizar,
Maximizar/Restaurar y Cerrar. No ahondaré mucho sobre esta barra, así que manos
a la obra.

En la ventana de propiedades, la cual se encuentra a tu derecha, en el entorno que

estés usando, ubica un botón con un rayito, ese te dará acceso a los Eventos de los
Controles o Componentes.

En el listado de eventos, ubicaremos uno llamado Load (Cargar), este evento es

particular a los Form. Aquí se ejecutaran todas las acciones que requieras, justo antes
de mostrar el b, es decir mientras lo carga en la memoria del computador.

Que es lo que haremos en este evento en estos momentos??

Colocar el Texto de nuestra ventana en la barra de titulo.

Se dieron cuenta que ya utilice la palabra Ventana. Pues si, hay dos formas en la que
nos podemos referir a esto Form, cuando estamos “construyendo” la App y ventana,
cuando ya esta terminada y lista para usarse.

Como vamos a generar el evento Load del Form, fácil, solo da doble click sobre el
campo de texto que se encuentra justo a la derecha del nombre del evento.

Página 2
Esto permitirá a tu entorno de programación, llevarte a la ventana de código, justo
a un nuevo código creado (generado) para el evento Load.

Si usas Visual Studio de Microsoft notaras una diferencia en el código, y eso es porque
yo uso #Develop, un entorno libre, pero para fines prácticos es lo mismo. La gente
de Visual Studio podrá observar el texto void Form1_Load ( ).

El código que agregare al evento Load del Form, será:

this.Text="Esta es mi DesktopApp";

Como podemos ver el resultado será el siguiente:

El mensaje lo hemos colocado directamente sobre la barra de título. Ahora

mandemos este mismo mensaje en una ventana Flotante. Pero para ello,
generaremos el evento click del Form.

Página 3
Y colocamos el código siguiente:

MessageBox.Show("Esta es mi DesktopApp");

El resultado de esto será:

Ahora mejoremos este mensaje, y modificaremos la instrucción de la siguiente

manera.

MessageBox.Show("Esta es mi DesktopApp","Aviso del Sistema");

Página 4
Notaste el cambio?

Utilicemos otros controles, ve a tu paleta de controles y ubica el control llamado

Label y coloca uno en algún lugar visible de tu Form.

Ahora eliminaremos el texto que ostenta este Label, ya que de otra manera
mostraría ese texto en ejecución. Teniendo seleccionado el control Label, buscaremos
en la ventana de propiedades, la que se llama Text, y eliminaremos su contenido.

No, no se borro el control Label. !!! Aún esta ahí.

Página 5
También deberemos de cambiar su tamaño, para que el texto que colocamos se
muestre sin problemas, así que busca la propiedad AutoSize, y cambia su valor a True.
Esto permitirá que el Label se ajuste al texto que se le asigne.

Ahora vamos al código del evento Load, que ya tenemos y agregaremos justo debajo
de la linea de código que ya tenemos, la siguiente linea de código.

Label1.Text="Esta es mi DesktopApp";

Ahora es momento de probar nuestra App.

Ahora vamos a hacer que nuestra DesktopApp aparezca en el centro de la pantalla.

Da un click en el Form, para que se seleccione, y en la ventana de propiedades
buscaremos la que lleva por nombre StartPosition, despliega sus opciones de valor,
con lo cual podrás ver un pequeño listado de opciones predefinidas.

Página 6
De este listado, nos interesa la opción “Center Screen”, que como su nombre lo dice,
nos permite ubicar la ventana de nuestra DesktopApp en el centro de la pantalla o
display. Puedes ejecutar y observar el resultado de ello.

Ahora vamos a agregar mas formularios al Proyecto. Si leíste bien, más formularios
al proyecto, así que; realiza click en el menú “Project -> Add Window Form” (MS
Visual Studio), los que usamos #Develop, click en “Project -> Add -> New Item...”
y en la ventana de proyectos seleccionamos el lenguaje “C#” y después la opción
“Windows Aplication” y por ultimo Form.

El nombre del Form será Form2.cs, después de esto veremos como una nueva
pestaña con un Form nuevo aparece en nuestro proyecto.

Del mismo modo agregaremos 3 formularios más, los cuales se llamarán: Form3.cs,
Form4.cs y Form5.cs. En mi caso, ya tengo 5 formularios en mi proyecto.

Ahora modifiquemos la App y hagamos algo interesante.

SplashScreen

Lo primero que debemos hacer es darle un tamaño ad-hoc de un SplashScreen, las

cuales pueden ser verticales, horizontales o de formas especiales, estas dispuestas por

Página 7
el fabricante. Así que en el Form1 (MainForm, en mi caso), mi bmide ahora 448 x
598, Width y Height respectivamente en la propiedad Size del Form.

Ningún SplashScreen profesional tiene bordes, así que ubicaremos la propiedad

FormBorderStyle y asignaremos el valor None, recuerda que ahora ya no contiene
barra de titulo ni botón de cerrar así que para las pruebas utilizaras “ALT + F4” o
el entorno de programación para acabar con la ejecución de tu App.

Ahora selecciona el Label1, si ese viejo label donde colocamos un texto en el Preview.
Este nos servirá para colocar el nombre de nuestra App, to llamaré a la mía
“CABAPP”, una aplicación de escritorio para llevar el control de los taxis de alguna
ciudad, creo que era muy predecible por el nombre. Ajustemos la Fuente, Estilo de
Fuente y Tamaño. Todo esto por medio de a propiedad Font de nuestro Label1.

Es momento de situar este label en la parte superior izquierda, para ello usaremos
la propiedad Dock y asignaremos el valor Top. En la imagen siguiente podremos ver
nuestro Label1, ya en su nueva posición y con sus valores en Fuente.

Página 8
Colocaré una animación de cargando (loading Gif), en mi caso una pequeña onda
algo colorida para mi App.

Por tal motivo yo decidí que mi Form, se ajustara a este color en particular.
Contemplando también que; los taxis en USA son Amarillos y se ven genial, adopte
la misma imagen gráfica. Para poder ajustar a un color particular tendré que usar
códigos Hexadecimales en mi Aplicación de Escritorio en C#.

Ahora vamos al código, ubiquemos el evento Load de nuestro Form, y modificquemos

algunas cosas y agreguemos otras más.

Como pueden darse cuenta la linea que usamos en el Preview, donde asignábamos
el texto en la Barra de Título aún sigue ahí, aunque no puedo decir lo mismo de la
Barra de Título. La linea siguiente también ya la teníamos solo que cambiaremos el
valor de la cadena de caracteres, por el nombre de nuestra App, en mi caso
“CABAPP”, y por último Asignaremos el color del Form en tiempo de Ejecución, por
medio de colores Hexadecimales.

Página 9
Muy bien... y la animación????

Ahhhh. Colocaremos un PictureBox, lo más estéticamente acomodado en el Form.

Vamos a cargar la animación, supongo que en este punto ya la tienes descargada en
tu equipo, por medio de la propiedad Image (click en el botón con 3 puntos),
ubicaremos la animación.

Usa la opción Local resource, y después Import, busca la animación, selecciónala,

aceptas, eso te regresará a esta ventana.

Y ahora, en esta ventana de Select resource, estarás viendo la vista preliminar en el

costado derecho. Por ultimo click en Ok o Aceptar para colocar la animación.

Página 10
Si quieres ver como va quedando tu DesktopApp, no dudes en ejecutar y ver que todo
va bien y te gusta.

En la parte inferior del Form, he colocado los PictureBox, para albergar los iconos
de la licencia CreativeCommons y sus atribuciones. Si ustedes quieren usar licencia
cerrada o CopyRight, están en todo su derecho. También he colocado dos etiquetas
más en las cuales solo puse el año y una leyenda bajo mi animación.

Acá les presento mi DesktopApp en funcionamiento.

Página 11
Hasta aquí tenemos terminada la parte del SplashScreen. Nuestra primera práctica
para conocer algunos controles básicos y algo de UI. En la práctica 2 retomaremos
esta misma App.

Página 12