Sviluppo di Windows 10 - Live Tiles

In questo capitolo parleremo dell'interazione con un utente attraverso i riquadri. È la parte iconica di Windows 10. I riquadri vengono visualizzati nel fileStart Screen così come su Start Menu. In altre parole, è una risorsa icona dell'applicazione, che appare in una varietà di forme in tutto il sistema operativo Windows 10. Sono le carte telefoniche per la tua app UWP (Universal Windows Platform).

Anatomia delle mattonelle

Ci sono tre stati di tessera.

  • Basic State - I componenti di base di un riquadro Start sono costituiti da una piastra posteriore, un'icona e un titolo dell'app.

  • Semi-Live state - È uguale alla tessera di base con l'unica differenza che il badge, che è un numero, può visualizzare i numeri da 0 a 99.

  • Live State - Questa tessera contiene tutti gli elementi della tessera di stato semi-live e mostra anche una piastra di contenuto aggiuntiva in cui puoi mettere tutto ciò che desideri come foto, testo ecc.

Aggiornamento delle tessere

Ci sono quattro modi per aggiornare le tessere.

  • Scheduled - È possibile impostare il modello e l'ora con ScheduledTileNotification.

  • Periodic- Quando le informazioni vengono recuperate da un URI ed è possibile specificare il tempo per estrarre le informazioni dopo tale periodo di tempo, ad esempio 30 min, 1 ora, 6 ore. eccetera.

  • Local- Uno locale può essere aggiornato dalla tua applicazione; sia dal primo piano che dall'app in background.

  • Push - Viene aggiornato dal server spingendo le informazioni dal server.

Per creare una tessera, segui il codice fornito.

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 è piuttosto semplice perché è solo un numero e puoi impostare il valore del badge come mostrato di seguito.

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);

Creiamo un nuovo progetto UWP in Visual Studio.

  • Vedrai i diversi file png sotto Assets cartella in Solution Explorer.

  • Definiamo un riquadro predefinito e la sua immagine nel manifesto del pacchetto.

  • Fare doppio clic sul file package.appxmanifest. Questo apre la finestra dell'editor manifest.

  • Selezionare Visual Assets tab.

  • È possibile selezionare le immagini e le icone per il riquadro dell'applicazione con una qualsiasi delle dimensioni specificate. Sotto ilTile Images and Logos, vengono fornite immagini predefinite per tutti i loghi come

    • Logo quadrato 71x71
    • Logo quadrato 150x150
    • Logo quadrato 310 x 310
    • Logo del negozio

  • Quando esegui la tua applicazione e poi vai alla schermata iniziale, vedrai il riquadro per la tua applicazione.