> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-5-la-construccion.-implementando-requisitos/splash-screen.md).

# Splash Screen

Continuando con nuestra plantilla, veamos cómo añadir nuestras imágenes a la pantalla de bienvenida y cómo adecuar los colores principales utilizando los predeterminados:

1. Eliminar las imágenes de ejemplo de las sub-carpetas “es” y “en-US” de nuestros *Assets*.
2. Diseñar con GIMP la imagen del logo de la aplicación. Es sencillo, sólo nos tenemos que asegurar que el fondo es transparente. Dejemos que sea el color de acento del sistema (configurado por el usuario) el que lo conforme.

   ![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-29adce466385befa80d294b6999a77e7d60be05e%2Fimage1.png?alt=media)

**Figura 01.- Visualizando la imagen de Splash Screen en Visual Studio**

3. Crear una imagen para cada tamaño realizando los cambios de escala directamente desde GIMP desde el menú: “Image – Scale Image…”.
4. Modificar el diccionario de temas “Styles\Custom.xaml”, para adecuar los colores de nuestra aplicación a los colores de acento (*SystemAccentColor* y *SystemColorControlAccentColor* entre otros). Por tanto:
   1. Comentar la línea 12 para utilizar los colores predeterminados en lugar del actual de la plantilla, que lo está sobrescribiendo.
   2. Sustituir *CustomColor* y *AccentColor*, por el color de acento del sistema *SystemColorControlAccentColor*.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-2c0982cb51270081b65e59419f04c0127cac6e45%2Fimage2.png?alt=media)

**Figura 02.- Modificando el diccionario de temas Custom.xaml**

5. Renombrar la página *Splash.xaml* para que pase a ser *SplashPage.xaml*. Queremos que todas nuestras páginas terminen con el sufijo “Page”. Asegurémonos también de cambiar el nombre de la clase y las referencias a la misma.

Si echamos un vistazo al código de la página *SplashPage* comprobaremos que:

* El código XAML incluye dos controles: un *Canvas* para mostrar imágenes y un *ProgressRing* para el indicador de progreso.
* En el código C#, cabe destacar el evento *Window\.Current.SizeChanged*, utilizado para que una segunda imagen se ajuste al tamaño de la ventana de manera automática. Hay que entender que, para agilizar la carga de la pantalla de bienvenida, Windows utiliza una imagen estática que carga por defecto. En segundo plano siempre podemos cargar otra adicional para aportar mayor riqueza.