Riquadri e notifiche

Applies to Windows and Windows Phone

Le app di iOS possono aggiornare le icone con le notifiche, ma le app di Windows Store offrono una funzionalità ancora più avanzata con i riquadri animati.

Nel video seguente vengono confrontate le icone nelle app iOS e i riquadri animati nelle app di Windows Store.

Molte app di iOS usano numeri di notifica sulle icone delle app per visualizzare un riepilogo o informazioni dinamiche sullo stato, perché forniscono all'utente un modo per vedere le informazioni senza avviare l'app. iOS supporta fino a quattro numeri diversi da visualizzare, ad esempio il numero di e-mail non lette in un'app di posta, il numero di post in un'app di social media oppure il numero di attività da completare. Spesso, i numeri di notifica delle icone vengono aggiornati in risposta a notifiche push, ma possono anche essere aggiornati da notifiche locali o a livello di programmazione.

In Windows 8 un riquadro è una rappresentazione di un'app nella schermata Start e può essere static o live.

  • Un riquadro static mostra sempre il contenuto predefinito specificato nel manifesto dell'app.
  • Un riquadro live viene aggiornato a livello di programmazione e usato per mostrare informazioni recenti a colpo d'occhio. I riquadri animati possono fornire informazioni complete e interessanti agli utenti senza la necessità di avviare l'app. Come le notifiche di iOS, i riquadri animati possono essere aggiornati in risposta a notifiche push, notifiche locali o a livello di codice.

Riquadri animati delle app di Windows Store

Per un'app di Windows Store, il riquadro predefinito è specificato nel file manifesto dell'app (Package.appxmanifest). Gli sviluppatori possono scegliere di mostrare il logo dell'app, il nome o nessuno dei due. Vedi Guida introduttiva: Creazione di un riquadro predefinito tramite l'editor del manifesto di Microsoft Visual Studio. Dopo l'installazione del manifesto, il contenuto del riquadro può essere aggiornato in fase di esecuzione mediante notifiche. Vedi Guida introduttiva: Invio di un aggiornamento di riquadro.

I riquadri delle app di Windows Store possono essere di dimensioni diverse. Per impostazione predefinita, vengono usati e richiesti solo riquadri quadrati. Se l'app prevede il supporto per riquadri di dimensioni diverse, gli utenti possono cambiarne il formato in qualsiasi momento. Per altre informazioni sui riquadri animati, vedi Linee guida ed elenco di controllo per riquadri e notifiche.

Riquadri animati di Windows 8

Confronto tra numeri di notifica delle app di iOS e riquadri animati delle app di Windows Store

Se hai usato numero di notifica per mostrare informazioni dinamiche sulle icone delle tue app di iOS, scoprirai che i riquadri animati svolgono la stessa funzione e altro ancora.

Nella tabella seguente sono illustrati i vari passaggi necessari per definire l'icona o il riquadro di un'app e aggiornarli con una notifica o altro contenuto

PassaggiiOSWindows 8
Creare un'icona o un riquadro per l'app. Aggiungi una o più icone nel bundle dell'app. Definisci i file delle icone mediante la chiave Icon files CFBundleIconFiles nei file info.plist. Imposta i file icona nel riquadro Interfaccia utente dell'applicazione nel manifesto dell'applicazione in Visual Studio. Vedi Guida introduttiva: Creazione di un riquadro predefinito tramite l'editor del manifesto di Microsoft Visual Studio.
Definire il nome dell'applicazione.Imposta il valore della chiave CFBundleDisplayName (nome visualizzato del bundle) nel file info.plist.Imposta il nome breve dell'app nel riquadro Interfaccia utente dell'applicazione nel manifesto dell'applicazione in Visual Studio. Vedi Guida introduttiva: Creazione di un riquadro predefinito tramite l'editor del manifesto di Microsoft Visual Studio.
Aggiornare la notifica sull'icona/riquadro dell'app.Imposta la proprietà applicationIconBadgeNumber della classe UIApplication corrente.Recupera l'XML del modello di notifica nella classe BadgeUpdateManager. Imposta il valore dell'elemento Badge con il valore di un glifo e aggiornalo usando la classe BadgeUpdateManager. Vedi Guida introduttiva: Invio di un aggiornamento di notifica.
Cambiare l'immagine di icona/riquadro.Non applicabile.Recupera il documento XML che rappresenta il modello del riquadro usando la classe TileUpdateManager. Imposta il valore dell'elemento image del modello con una nuova immagine. Crea un nuovo oggetto TileNotification e aggiorna la notifica usando TileUpdateManager. Vedi Guida introduttiva: Invio di un aggiornamento di riquadro.
Cambiare il messaggio di notifica sul riquadro.Non applicabile.Recupera il documento XML che rappresenta il modello del riquadro usando la classe TileUpdateManager. Imposta il valore dell'elemento text del modello con una nuova immagine. Crea un nuovo oggetto TileNotification e aggiorna la notifica usando TileUpdateManager.

 

Esempio di app

Crea l'app.

In questo esempio creeremo l'app usando il modello di app vuota in C#.

  • Avvia Microsoft Visual Studio.
  • Scegli Nuovo progetto dal menu File.
  • Se l'opzione Windows Store non è già selezionata, espandi Installati > Modelli > Visual C# e fai clic su Windows Store.
  • Se non è già selezionata, fai clic su Applicazione vuota (XAML).
  • Nelle caselle Nome e Percorso digita un nome per l'app (ad esempio AppTile) e un percorso oppure lascia invariati i valori predefiniti.
  • Fai clic su OK.

Definisci un riquadro predefinito per l'app.

  • Prepara due immagini, una da 150 x 150 pixel (logo.png) e l'altra da 30 x 30 pixel (logo_small.png).
  • Nella finestra Esplora soluzioni di Visual Studio trascina entrambe le immagini nella directory Assets.
  • Nella finestra Esplora soluzioni fai clic sul file Package.appmanifest per aprirlo.
  • Nella scheda Interfaccia utente dell'applicazione immetti Assets\logo.png nella casella di testo Logo e Assets\logo_small.png nella casella di testo Logo piccolo.
  • Immetti, ad esempio Garden Flowers nella casella di testo Nome breve.
  • Fai clic su Debug > Avvia debug per eseguire l'app.

    Riquadro animato in azione

Aggiorna la notifica sul riquadro.

  • Fai clic su Debug > Termina debug per arrestare l'applicazione.
  • In Visual Studio, nel file MainPage.xaml, aggiungi questo codice XAML tra il tag di apertura <GridViewGrid.Row="0" Grid.Column="0" …> e il tag di chiusura </GridView>:
    
    
                <TextBlock HorizontalAlignment="Left" Margin="256,219,0,0" TextWrapping="Wrap"                        
    Text="This a simple app that shows you how to use Live Tile in Windows 8. Click below to update the tile." FontSize="30" VerticalAlignment="Top" Height="201" Width="851" />
                <Button Content="Update the tile" HorizontalAlignment="Left" Margin="256,425,0,0" VerticalAlignment="Top" Height="59" Width="194" FontSize="24" Click="UpdateTile_Click"/>
                <Button Content="Update the badge" HorizontalAlignment="Left" Margin="523,425,0,0" VerticalAlignment="Top" Height="59" Width="245" FontSize="24" Click="UpdateBadge_Click"/>
    
    
    
    

    In Visuali Studio, nel file MainPage.xaml.cs, aggiungi il codice seguente alla classe MainPage:

    
           private void UpdateBadge_Click(object sender, RoutedEventArgs e)
            {
                XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
                //Assign a value to badge
                XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
                badgeElement.SetAttribute("value", "1");
                // Create the badge notification and send it to the badge.
                BadgeNotification badge = new BadgeNotification(badgeXml);
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
            }
    private void UpdateTile_Click(object sender, RoutedEventArgs e)
            {
            }
    
    
    

    Assicurati di aggiungere quanto segue all'inizio del file:

    
    using Windows.Data.Xml.Dom;
    using Windows.UI.Notifications;
    
    

    Fai clic su Debug > Avvia debug per eseguire di nuovo l'app. Fai clic sul pulsante per aggiornare la notificanell'applicazione.

    Riquadro animato in azione

    Accedi alla schermata Start. A questo punto sul riquadro dovresti vedere un numero di notifica (1) aggiornato:

    Riquadro animato in azione

4. Cambia l'immagine del riquadro e il messaggio di notifica.

  • Fai clic su Debug > Termina debug per arrestare l'applicazione.
  • Trascina un'altra immagine da 150 x 150 pixel (Strelitzia.png) nella cartella Assets in Esplora soluzioni.
  • In Visual Studio, nel file MainPage.xaml.cs, sostituisci il metodo UpdateTile_Click con questo codice:
    
            private void UpdateLiveTile()
            {
                //Template for tile and retrieve its XML contents
                XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText03);
                XmlNodeList tileTextAttributes = tileXml.GetElementsByTagName("text");
                tileTextAttributes[0].InnerText = "Strelitzia";
                tileTextAttributes[1].InnerText = "growing";
                tileTextAttributes[2].InnerText = "in my garden";
                //Add an image for notification
                XmlNodeList tileImageAttributes = tileXml.GetElementsByTagName("image");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("src", "Assets\\Strelitzia.png");
                ((XmlElement)tileImageAttributes[0]).SetAttribute("alt", "Strelitzia");
                //Create the notification based on the XML content 
                TileNotification tileNotification = new TileNotification(tileXml);
                // Send the notification to the app tile
                TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);
            }
    
    
    

    Per il riquadro usiamo il modello TileSquarePeekImageAndText03. Sono disponibili numerosi modelli diversi tra cui scegliere, in base all'applicazione e al tipo di stato che vuoi mostrare all'utente. Vedi Catalogo di modelli di riquadro. Questo modello è costituito da un riquadro quadrato con un'immagine, senza testo, e da quattro righe di testo a scomparsa che scorrono verso l'alto e verso il basso.

    Recuperiamo l'elemento di testo dall'XML del modello e ne impostiamo il valore con le tre righe mostrate sopra. Recuperiamo anche l'elemento immagine dall'XML del modello e impostiamo l'attributo src su Assets\Strelitzia.png. Analogamente, impostiamo l'attributo alt su Strelitzia.

    Creiamo quindi un nuovo oggetto TileNotification e aggiorniamo il riquadro usando la classe TileUpdateManager. Aggiungiamo inoltre due righe al costruttore MainPage nel file MainPage.xaml.cs, come illustrato di seguito.

    
            public MainPage()
            {
                this.InitializeComponent();
                BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
                TileUpdateManager.CreateTileUpdaterForApplication().Clear();
            }
    
    
    

    Queste due righe cancellano le notifiche le volte successive che l'app viene eseguita.

    Fai clic su Debug > Avvia debug per eseguire di nuovo l'app. Fai clic sul pulsante per aggiornare il riquadro nell'applicazione.

    Accedi alla schermata Start. Dovresti vedere l'aggiornamento del riquadro.

    Riquadro animato in azione

    La prima immagine mostra il riquadro aggiornato con la nuova immagine Strelitzia, oltre al logo e a un numero di notifica. La seconda immagine mostra il riquadro pochi secondi dopo, con il messaggio a scomparsa, il logo e il numero di notifica.

Argomenti correlati

Argomenti per sviluppatori iOS
Risorse per sviluppatori iOS
Controlli di Windows 8 per sviluppatori iOS
Guida dettagliata di Windows 8 per sviluppatori iOS
Argomenti relativi a riquadri e notifiche
Riquadri e notifiche
Catalogo di modelli di riquadro
Guida introduttiva: Invio di un aggiornamento di riquadro
Linee guida ed elenco di controllo per i riquadri e le notifiche
Guida introduttiva: Invio di un aggiornamento di notifica

 

 

Mostra:
© 2014 Microsoft