Desarrollo de Windows 10 - Live Tiles

En este capítulo, hablaremos de la interacción con un usuario a través de mosaicos. Es la parte icónica de Windows 10. Los mosaicos se muestran en laStart Screen así como en el Start Menu. En otras palabras, es un activo de icono de aplicación, que aparece en una variedad de formas en todo el sistema operativo Windows 10. Son las tarjetas telefónicas para su aplicación Plataforma universal de Windows (UWP).

Anatomía del azulejo

Hay tres estados de mosaico.

  • Basic State - Los componentes básicos de un mosaico de Inicio consisten en una placa posterior, un icono y el título de una aplicación.

  • Semi-Live state - Es lo mismo que el mosaico básico con la única diferencia de que la insignia, que es un número, puede mostrar los números del 0 al 99.

  • Live State - Este mosaico contiene todos los elementos del mosaico de estado semi-vivo y también muestra una placa de contenido adicional donde puede colocar lo que desee, como fotos, texto, etc.

Actualizar mosaicos

Hay cuatro formas de actualizar los mosaicos.

  • Scheduled - Puede configurar la plantilla y el tiempo con ScheduledTileNotification.

  • Periodic- Cuando se recupera información de un URI y puede especificar el tiempo para extraer la información después de ese período de tiempo, como 30 minutos, 1 hora, 6 horas. etc.

  • Local- El local se puede actualizar desde su aplicación; ya sea desde la aplicación en primer plano o en segundo plano.

  • Push - Se actualiza desde el servidor empujando la información del servidor.

Para crear un mosaico, siga el código dado.

var tileXml = 
   TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Text01); 
 
var tileAttributes = tileXml.GetElementsByTagName("text"); 
tileAttributes[0].AppendChild(tileXml.CreateTextNode("Hello"));
			
var tileNotification = new TileNotification(tileXml);			
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Update badge es bastante simple porque es solo un número y puede establecer el valor de la insignia como se muestra a continuación.

var type = BadgeTemplateType.BadgeNumber; 
var xml = BadgeUpdateManager.GetTemplateContent(type);  

var elements = xml.GetElementsByTagName("badge"); 
var element = elements[0] as Windows.Data.Xml.Dom.XmlElement; 
element.SetAttribute("value", "7");
  
var updator = BadgeUpdateManager.CreateBadgeUpdaterForApplication(); 
var notification = new BadgeNotification(xml); 
updator.Update(notification);

Creemos un nuevo proyecto para UWP en Visual Studio.

  • Verá los diferentes archivos png debajo del Assets carpeta en Solution Explorer.

  • Definamos un mosaico predeterminado y su imagen en el manifiesto del paquete.

  • Haga doble clic en el package.appxmanifest. Esto abre la ventana del editor de manifiesto.

  • Seleccione Visual Assets lengüeta.

  • Puede seleccionar las imágenes y los iconos para el mosaico de su aplicación con cualquiera de las dimensiones especificadas. Bajo laTile Images and Logos, se proporcionan imágenes predeterminadas para todos los logotipos, como

    • Logotipo Cuadrado 71x71
    • Logotipo cuadrado 150x150
    • Logotipo Cuadrado 310x310
    • Logotipo de la tienda

  • Cuando ejecute su aplicación y luego vaya a la pantalla de inicio, verá el mosaico de su aplicación.