Inicio rápido: agregar una pantalla de presentación (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Establece la imagen de la pantalla de presentación y el color de fondo de tu aplicación usando Microsoft Visual Studio 2013.

Consulta esta función en acción como parte de nuestra serie Funciones de aplicaciones, de principio a fin: Interfaz de usuario de aplicaciones de la Tienda Windows, de principio a fin (HTML).

Requisitos previos

En este inicio se usa Visual Studio 2013. Para descargarlo, consulta el tema para obtener las herramientas

Establecer la imagen de la pantalla de presentación y color de fondo en Visual Studio 2013

Cuando usas una plantilla de Visual Studio 2013 para crear tu aplicación, se agrega una imagen predeterminada al proyecto y se establece como imagen de la pantalla de presentación. El color de fondo predeterminado de la pantalla de presentación es gris claro. Si quieres cambiar la imagen o el color predeterminados de la pantalla de presentación de tu aplicación, sigue estos pasos:

  1. Abre tu proyecto de aplicación de Windows en tiempo de ejecución existente en Visual Studio 2013.

  2. Desde el Explorador de soluciones, abre el archivo "Package.appxmanifest". También puedes abrir este archivo desde la barra de menús seleccionando Proyecto, Tienda y Editar manifiesto de aplicación.

  3. Abre la pestaña Activos visuales y selecciona Pantalla de presentación en el panel Todos los activos de imagen situado en el lado izquierdo de la ventana "Package.appxmanifest". Si vas a cambiar la pantalla de presentación por primera vez, verás la ruta "Assets\SplashScreen.png" en el campo Pantalla de presentación.

    La siguiente captura de pantalla muestra la ventana "Package.appxmanifest" en Visual Studio 2013. En función de si el proyecto es para una aplicación de la Tienda Windows o una aplicación de la Tienda de Windows Phone verá un conjunto de recursos visuales ligeramente diferente.

    Captura de pantalla de la ventana "Package.appxmanifest" en Visual Studio 2013

    Si abres "Package.appxmanifest" en un editor de texto, SplashScreen element aparece como elemento secundario de VisualElements element. El marcado de la pantalla de presentación predeterminada del archivo de manifiesto tiene el siguiente aspecto en un editor de texto:

    <m2:SplashScreen Image="Assets\splashscreen.png" />
    
  4. Para seleccionar una nueva imagen para la pantalla de presentación de una aplicación de la Tienda Windows, presiona el botón que muestra unos puntos suspensivos, situado junto a la etiqueta 620 x 300 px debajo de Activos a escala. Elige la imagen de 620 x 300 píxeles (.png, .jpg o .jpeg) que quieres usar como imagen de la pantalla de presentación.

    Importante  La imagen de la pantalla de presentación que elijas debe ser de 620 x 300 píxeles con un factor de escala de 1x. Además, al diseñar la pantalla de presentación, ten en cuenta que es menor que la pantalla y que está centrada. No rellena la pantalla como una pantalla de presentación para una aplicación de la Tienda de Windows Phone.

     

  5. Para seleccionar una nueva imagen para la pantalla de presentación de una aplicación de la Tienda de Windows Phone, presiona el botón que muestra unos puntos suspensivos, situado junto a la etiqueta 1152 x 1920 px debajo de Activos a escala. Elige la imagen de 1152 x 1920 píxeles (.png, .jpg o .jpeg) que quieres usar como imagen de la pantalla de presentación.

    Importante  La imagen de pantalla de presentación que elijas debe ser de 1152 x 1920 píxeles que es el tamaño correcto para un factor de escala de 2.4x. Si este es el único activo que proporcionas, se reducirá para los factores de escala de 1.4x y 1x.

     

  6. En el campo Color de fondo de la sección Pantalla de presentación, establece el color de fondo que se mostrará con la imagen de la pantalla de presentación. Puedes escribir el nombre de un color o '#' y el valor hexadecimal de un color. Para obtener una lista de los nombres de los colores disponibles, consulta SplashScreen element.

    Establecer un color de fondo para tu pantalla de presentación es opcional. Si no especificas un color para una aplicación de la Tienda Windows, el color de fondo predeterminado de la pantalla de presentación será gris claro (valor hexadecimal #464646). Este es el mismo color que el color de fondo del Icono (consulta el campo Color de fondo de la sección Imágenes y logotipos en mosaico de la pestaña Activos visuales). Si no especificas un color para una aplicación de la Tienda de Windows Phone, o lo estableces en "transparente", el color de fondo de pantalla de presentación será transparente.

Resumen y siguientes pasos

Si tu aplicación tarda un poco en cargarse, considera la posibilidad de agregar una pantalla de presentación extendida. Para obtener instrucciones paso a paso, consulta Cómo extender la pantalla de presentación. Obtén información acerca de cómo crear una buena experiencia de carga en Directrices y lista de comprobación de pantallas de presentación.

¿Quieres saber más acerca de las otras imágenes necesarias para una aplicación de la Tienda Windows? Consulta Elegir las imágenes de tu aplicación.

Temas relacionados

Muestra de pantalla de presentación.

Directrices y lista de comprobación para pantallas de presentación

Cómo extender la pantalla de presentación

Elegir las imágenes de tu aplicación

Referencia

Package manifest schema SplashScreen element

Windows.ApplicationModel.Activation.SplashScreen class