Windows Dev Center

Uso dei riquadri in un'app aziendale per Windows Store scritta in C#, XAML e Prism

Da: Sviluppo di un'app aziendale per Windows Store scritta in C#, XAML e Prism per Windows Runtime

Logo Patterns & Practices

Pagina precedente | Pagina successiva

Scopri come creare un riquadro dell'app aggiornato da notifiche periodiche e come creare riquadri secondari e collegamenti diretti per dare maggiore risalto a contenuto specifico da un'app nella schermata Start. L'implementazione di riferimento AdventureWorks Shopper offre una dimostrazione e illustra come avviare l'app da un riquadro secondario tramite Prism per Windows Runtime.

Download

Download dell'esempio AdventureWorks Shopper
Download della libreria StoreApps di Prism
Download della guida (PDF)

Dopo il download del codice, vedi Introduzione all'uso di Prism per Windows Runtime per istruzioni su come compilare ed eseguire l'implementazione di riferimento, oltre a informazioni sulla struttura di soluzioni di Microsoft Visual Studio.

Contenuto della sezione

Si applica a

  • Windows Runtime per Windows 8.1
  • C#
  • eXtensible Application Markup Language (XAML)

Decisioni fondamentali

Un riquadro è una rappresentazione dell'app nella schermata Start e ti consente di presentare all'utente contenuti elaborati e coinvolgenti, quando l'app non è in esecuzione. Se accattivanti, i riquadri ti consentono di generare un'ottima prima impressione negli utenti della tua app di Windows Store. L'elenco seguente riepiloga le decisioni da prendere per creare riquadri per la tua app:

  • Perché dovrei investire in un riquadro animato?
  • Come posso rendere accattivante un riquadro animato?
  • Di che forma deve essere il mio riquadro?
  • Quali devono essere le dimensioni dell'immagine del mio riquadro?
  • Quali modelli di riquadro devo usare?
  • Quale meccanismo devo usare per recapitare le notifiche dei riquadri?
  • Con quale frequenza il contenuto del riquadro animato deve cambiare?
  • La mia app deve includere l'opzione per aggiungere riquadri secondari a Start?

I riquadri possono essere animati, ovvero aggiornati mediante notifiche, oppure statici. Per informazioni sui riquadri, inclusi i motivi per cui investire in un riquadro animato, come rendere accattivante un riquadro animato, le dimensioni e la forma da preferire per un riquadro, i modelli di riquadro da usare, la frequenza di aggiornamento del contenuto del riquadro animato e i riquadri secondari, vedi Linee guida per i riquadri e le notifiche, Dimensioni delle immagini di riquadri e avvisi popup, Catalogo di modelli di riquadro, Invio di notifiche e Panoramica dei riquadri secondari.

La scelta del meccanismo da usare per il recapito di una notifica di tipo riquadro dipende sostanzialmente dal contenuto che intendi visualizzare e dalla frequenza con cui deve essere aggiornato. Le notifiche locali ti consentono di aggiornare il riquadro dell'app, anche se usi altri meccanismi di notifica. Per la maggior parte delle app verranno usate le notifiche locali per aggiornare il riquadro all'avvio dell'app o quando il suo stato cambia. Questo assicura che il riquadro sia aggiornato quando l'app viene avviata o chiusa. Le notifiche pianificate sono ideali per situazioni in cui si conosce in anticipo il contenuto che deve essere aggiornato, ad esempio l'invito a una riunione. Le notifiche periodiche offrono aggiornamenti di riquadri con un servizio cloud di base e un investimento client minimi e costituiscono anche un'ottima soluzione per la distribuzione dello stesso contenuto a un grande pubblico. Le notifiche push sono ideali per situazioni in cui l'app contiene dei dati in tempo reale oppure dati personalizzati per l'utente. Le notifiche push sono anche utili in situazioni in cui i dati sono soggetti a limiti di tempo e quando i contenuti sono generati in tempi imprevedibili. Le notifiche periodiche sono la soluzione di notifica più adatta per app con sideload, ma non forniscono notifiche a richiesta. Con questo tipo di notifiche, inoltre, dopo il polling iniziale al servizio Web o cloud, Windows continuerà a eseguire il polling per verificare la disponibilità di aggiornamenti del riquadro anche se l'app non viene più avviata. Per altre informazioni, vedi Scelta di un metodo di recapito delle notifiche.

Nota  Con le notifiche push viene usato Servizi notifica Push Windows per recapitare gli aggiornamenti agli utenti. Prima che tu possa inviare notifiche tramite WNS è necessario registrare l'app nel Dashboard di Windows Store. Per altre informazioni, vedi Panoramica delle notifiche push.

[Torna all'inizio]

Riquadri in AdventureWorks Shopper

Nell'implementazione di riferimento AdventureWorks Shopper sono inclusi riquadri predefiniti medi e larghi, che sono stati creati in base ai requisiti di pixel di ciascuno. La scelta di un piccolo logo che rappresenti l'app è importante perché consente agli utenti di identificare l'app quando il riquadro visualizza i contenuti personalizzati. Per altre informazioni, vedi Creazione di riquadri dell'app.

Per rendere animati i riquadri predefiniti, questi vengono aggiornati con notifiche periodiche a intervalli di 30 minuti, per pubblicizzare prodotti specifici agli utenti nella schermata Start. Nelle notifiche periodiche vengono usati modelli con contenuto in modo che il riquadro diventi animato tra due frame. Il primo frame visualizza un'immagine del prodotto pubblicizzato, mentre il secondo include i dettagli del prodotto. Vengono usati entrambi i modelli di riquadro con contenuto medio e largo. Per impostazione predefinita, in AdventureWorks Shopper viene usato il riquadro largo, che può essere cambiato in quello medio dall'utente. Per altre info, vedi Uso di notifiche periodiche per l'aggiornamento del contenuto dei riquadri.

In AdventureWorks Shopper è possibile creare riquadri secondari aggiungendo prodotti specifici alla schermata Start da ItemDetailPage. Il diagramma seguente mostra i due frame di un riquadro secondario creato da uno dei prodotti venduti in AdventureWorks Shopper.

Riquadro secondario di AdventureWorks Shopper nella schermata Start

Selezionando un riquadro secondario viene avviata l'app e viene visualizzato il prodotto aggiunto in precedenza in ItemDetailPage. Per altre informazioni, vedi Creazione di riquadri secondari.

[Torna all'inizio]

Creazione di riquadri dell'app

Per creare riquadri si parte da un riquadro predefinito, definito nel manifesto dell'app. In un riquadro statico viene sempre visualizzato il contenuto predefinito, che corrisponde in genere a un'immagine del logo che occupa l'intero spazio del riquadro. Un riquadro animato può invece aggiornare quello predefinito e visualizzare nuovo contenuto, ma tornare al contenuto predefinito se la notifica scade o viene rimossa. Nelle figure seguenti sono mostrate le immagini di logo piccoli, medi e larghi disponibili nella cartella Assets della soluzione di Visual Studio AdventureWorks Shopper. Lo sfondo di ogni logo è trasparente. Questa caratteristica è particolarmente importante per il logo piccolo perché consente di fonderlo con il contenuto della notifica del riquadro.

Logo del riquadro piccolo di AdventureWorks Shopper

30 x 30 pixel

Logo del riquadro quadrato di AdventureWorks Shopper

150 x 150 pixel

Logo del riquadro largo di AdventureWorks Shopper

310 x 150 pixel

Nota  Le risorse immagine, compresi i logo, sono segnaposto e a solo scopo di formazione. Non possono essere usate come marchio o per altri scopi commerciali.

Grazie all'editor del manifesto di Visual Studio aggiungere i riquadri predefiniti è semplice. Per altre informazioni, vedi Guida introduttiva: Creazione di un riquadro predefinito tramite l'editor del manifesto di Visual Studio. Per altre informazioni sull'uso delle risorse immagine, vedi Guida introduttiva: Uso delle risorse di file o immagini e Come assegnare nomi alle risorse con qualificatori.

Se nel file manifesto dell'app è disponibile solo un logo medio, il riquadro dell'app sarà sempre quadrato. Se il manifesto contiene sia un logo medio che uno largo, all'installazione dell'app verrà usato per impostazione predefinita un riquadro largo. Devi decidere se vuoi consentire anche un riquadro medio. Per impostare un riquadro largo, specifica un'immagine grande del logo quando definisci il tuo riquadro predefinito nel manifesto dell'app.

Uso di notifiche periodiche per l'aggiornamento del contenuto dei riquadri

Le notifiche periodiche, cui talvolta si fa riferimento come polling delle notifiche, aggiornano riquadri a intervalli fissi scaricando contenuto direttamente da un servizio Web o cloud. Per usare le notifiche periodiche l'app deve specificare l'URI (Uniform Resource Identifier) di una posizione Web di cui Windows esegue il polling per ricevere aggiornamenti di riquadri, oltre alla frequenza di polling dell'URI.

Le notifiche periodiche richiedono che l'app ospiti un servizio Web o cloud. Come URI di cui Windows esegue il polling è possibile usare qualsiasi indirizzo Web HTTP o HTTPS (Secure Hypertext Transfer Protocol) valido. Nell'esempio di codice seguente è illustrato il metodo GetTileNotification della classe TileNotificationController nel progetto AdventureWorks.WebServices, che viene usato per inviare il contenuto del riquadro all'implementazione di riferimento AdventureWorks Shopper.

AdventureWorks.WebServices\Controllers\TileNotificationController.cs


public HttpResponseMessage GetTileNotification()
{
    var tileXml = GetDefaultTileXml("http://localhost:2112/Images/hotrodbike_red_large.jpg",
                                    "Mountain-400-W Red, 42");
    tileXml = string.Format(CultureInfo.InvariantCulture, tileXml, DateTime.Now.ToShortDateString(), DateTime.Now.ToShortTimeString());

    // create HTTP response
   var response = new HttpResponseMessage();

    // format response
    response.StatusCode = System.Net.HttpStatusCode.OK;
    response.Content = new StringContent(tileXml);

    //Need to return xml format to TileUpdater.StartPeriodicUpdate
    response.Content.Headers.ContentType = 
        new System.Net.Http.Headers.MediaTypeHeaderValue("text/xml");
    return response;
} 


Questo metodo genera il contenuto del riquadro in formato XML, lo formatta e lo restituisce sotto forma di risposta HTTP. Il contenuto del riquadro deve essere conforme allo schema per i riquadri e codificato in formato UTF-8 (Unicode Transformation Format a 8 bit). Per specificare il contenuto del riquadro, vengono usati i modelli TileWidePeekImage01 e TileSquarePeekImageAndText02. Questa operazione è necessaria perché per impostazione predefinita nell'app viene usato il riquadro largo, che può essere cambiato in quello quadrato dall'utente. Per altre informazioni, vedi Catalogo di modelli di riquadro.

A un intervallo di polling di 30 minuti, Windows invia all'URI una richiesta HTTP GET, scarica il contenuto del riquadro come XML e lo visualizza sul riquadro dell'app. Per eseguire questa operazione viene usato il metodo OnInitialize della classe App, come illustrato nell'esempio di codice seguente.

AdventureWorks.Shopper\App.xaml.cs


_tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();
_tileUpdater.StartPeriodicUpdate(new Uri(Constants.ServerAddress + "/api/TileNotification"), PeriodicUpdateRecurrence.HalfHour);


Per aggiornare il riquadro dell'app, viene creata una nuova istanza di TileUpdater dal metodo CreateTileUpdaterForApplication della classe TileUpdateManager. Per impostazione predefinita, un riquadro della schermata Start mostra il contenuto di una sola notifica finché questa non viene sostituita da una nuova. Puoi però abilitare il ciclo delle notifiche in modo da mantenere nella coda fino a cinque notifiche, che vengono visualizzate a rotazione nel riquadro. Per questa operazione viene chiamato il metodo EnableNotificationQueue con il parametro true sull'istanza di TileUpdater. Viene infine effettuata una chiamata a StartPeriodicUpdate per eseguire il polling dell'URI specificato e aggiornare il riquadro con il contenuto ricevuto. Dopo il polling iniziale, Windows continuerà a fornire aggiornamenti ogni 30 minuti, come specificato. Il polling continua finché non lo interrompi esplicitamente o la tua app non viene disinstallata. In caso contrario, Windows continuerà a eseguire il polling degli aggiornamenti di riquadri anche se l'app non verrà avviata mai più.

Nota  Tieni presente che, sebbene Windows faccia del suoi meglio per eseguire il polling come richiesto, l'intervallo non è preciso. C'è la possibilità che l'intervallo di polling richiesto subisca un ritardo massimo di 15 minuti.

Per impostazione predefinita, le notifiche periodiche dei riquadri scadono entro tre giorni dal loro download. Di conseguenza è consigliabile impostare una scadenza per tutte le notifiche di riquadro periodiche, specificando un periodo di tempo ragionevole per l'app, ed evitare che il contenuto della notifica persista più a lungo del necessario. Garantisce inoltre l'eliminazione di contenuto obsoleto nel caso in cui il servizio Web o cloud diventi irraggiungibile o se l'utente si scollega dalla rete per un lungo periodo di tempo. Per questa operazione viene restituita l'intestazione HTTP X-WNS-Expires per specificare data e ora di scadenza.

Per altre info, vedi Panoramica delle notifiche periodiche, Uso della coda notifiche e Linee guida per le notifiche periodiche .

[Torna all'inizio]

Creazione di riquadri secondari

Un riquadro secondario consente a un utente di accedere direttamente dalla schermata Start a una posizione specifica dell'app. Le app non possono aggiungere riquadri secondari a livello di programmazione senza approvazione dell'utente. Gli utenti hanno inoltre controllo esplicito sulla rimozione di riquadri secondari. In questo modo gli utenti possono personalizzare la schermata Start con le esperienze che utilizzano di più.

I riquadri secondari non dipendono da quello dell'applicazione principale e possono ricevere in modo indipendente notifiche di tipo riquadro. Quando si attiva un riquadro secondario, all'applicazione padre viene presentato un contesto di attivazione per consentirne l'avvio nel contesto del riquadro secondario.

L'opzione che consente di creare un riquadro secondario è visualizzata sulla barra dell'app di ItemDetailPage sotto forma di pulsante Aggiungi a Start. In questo modo puoi creare un riquadro secondario per il prodotto da visualizzare. Selezionando il riquadro secondario viene avviata l'app e viene visualizzato il prodotto aggiunto in precedenza in ItemDetailPage. Nel diagramma seguente è illustrato un esempio del riquadro a comparsa visualizzato quando selezioni il pulsante Aggiungi a Start. Il riquadro a comparsa mostra un'anteprima del riquadro secondario e chiede di confermarne la creazione.

Riquadro a comparsa del riquadro secondario di AdventureWorks Shopper

La funzionalità di aggiunta e rimozione del riquadro secondario è offerta dalla classe SecondaryTileService, che implementa l'interfaccia ISecondaryTileService. Nel metodo OnInitialize della classe App la classe SecondaryTileService è registrata come mapping dei tipi rispetto al tipo ISecondaryTileService con il contenitore di inserimento delle dipendenze Unity. Quando viene creata un'istanza della classe ItemDetailPageViewModel, che accetta il tipo ISecondaryTileService, il contenitore Unity risolve il tipo e restituisce un'istanza della classe SecondaryTileService.

Il flusso di lavoro usato in AdventureWorks Shopper per aggiungere un riquadro secondario a Start è il seguente:

  1. PinProductCommand viene richiamato facendo clic sul pulsante Aggiungi a Start della barra dell'app su ItemDetailPage.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    PinProductCommand = DelegateCommand.FromAsyncHandler(PinProduct, () => SelectedProduct != null);
    
    
    
  2. AdventureWorks Shopper verifica che il riquadro non sia già stato aggiunto chiamando il predicato SecondaryTileExists nell'istanza di SecondaryTileService.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    bool isPinned = _secondaryTileService.SecondaryTileExists(tileId);
    
    
    
  3. AdventureWorks Shopper chiama il metodo PinWideSecondaryTile sull'istanza di SecondaryTileService per creare un riquadro secondario. Come ID univoco viene usata la proprietà SelectedProduct.ProductNumber.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    isPinned = await _secondaryTileService.PinWideSecondaryTile(tileId, SelectedProduct.Title, SelectedProduct.ProductNumber);
    
    
    

    Il metodo PinWideSecondaryTile crea una nuova istanza della classe SecondaryTile, fornendo informazioni tra cui il nome breve, il nome visualizzato e il logo.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    var secondaryTile = new SecondaryTile(tileId, displayName, arguments, _squareLogoUri, TileSize.Wide310x150);
    secondaryTile.VisualElements.ShowNameOnWide310x150Logo = true;
    secondaryTile.VisualElements.Wide310x150Logo = _wideLogoUri;
    
    
    
  4. Il metodo RequestCreateAsync viene chiamato sull'istanza di SecondaryTile per visualizzare un riquadro a comparsa che mostra un'anteprima del riquadro e chiede di confermarne la creazione.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    bool isPinned = await secondaryTile.RequestCreateAsync();
    
    
    
  5. In seguito alla conferma il riquadro secondario viene aggiunto alla schermata Start.

Il flusso di lavoro usato in AdventureWorks Shopper per rimuovere un riquadro secondario da Start è il seguente:

  1. AdventureWorks Shopper richiama UnpinProductCommand tramite il pulsante Rimuovi da Start della barra dell'app su ItemDetailPage.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    UnpinProductCommand = DelegateCommand.FromAsyncHandler(UnpinProduct, () => SelectedProduct != null);
    
    
    
  2. AdventureWorks Shopper verifica che il riquadro non sia già stato rimosso chiamando il predicato SecondaryTileExists nell'istanza di SecondaryTileService.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    bool isPinned = _secondaryTileService.SecondaryTileExists(tileId);
    
    
    
  3. AdventureWorks Shopper chiama il metodo UnpinTile sull'istanza di SecondaryTileService per rimuovere il riquadro secondario. Per identificare il riquadro, viene usato come ID univoco la proprietà SelectedProduct.ProductNumber.

    AdventureWorks.UILogic\ViewModels\ItemDetailPageViewModel.cs

    
    isPinned = (await _secondaryTileService.UnpinTile(tileId)) == false;
    
    
    

    Il metodo UnpinTile crea una nuova istanza della classe SecondaryTile, usando come ID univoco la proprietà SelectedProduct.ProductNumber. Se viene fornito lo stesso ID di un riquadro secondario esistente, quest'ultimo verrà sovrascritto.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    var secondaryTile = new SecondaryTile(tileId);
    
    
    
  4. Il metodo RequestDeleteAsync viene chiamato sull'istanza di SecondaryTile per visualizzare un riquadro a comparsa che mostra un'anteprima del riquadro da rimuovere e chiede di confermarne la rimozione.

    AdventureWorks.UILogic\Services\SecondaryTileService.cs

    
    bool isUnpinned = await secondaryTile.RequestDeleteAsync();
    
    
    
  5. In seguito alla conferma il riquadro secondario viene rimosso dalla schermata Start.
Nota  I riquadri secondari possono essere rimossi anche tramite la barra dell'app nella schermata Start. In questo caso non vengono richieste all'app informazioni sulla rimozione, non viene richiesto all'utente di confermare e non viene inviata all'app una notifica dell'avvenuta rimozione del riquadro. Ogni ulteriore operazione di pulizia che l'app avrebbe eseguito per rimuovere il riquadro dovrà essere eseguita al successivo avvio dell'app.

Per altre info, vedi Panoramica dei riquadri secondari e Linee guida per i riquadri secondari.

Avvio dell'app da un riquadro secondario

Ogni volta che si avvia l'app, viene chiamato il metodo OnLaunched della classe MvvmAppBase. La classe MvvmAppBase viene fornita dalla libreria Microsoft.Practices.Prism.StoreApps. Il parametro LaunchActivatedEventArgs del metodo OnLaunched include lo stato precedente dell'app e gli argomenti di attivazione. Se l'app viene avviata dal riquadro principale, il valore della proprietà TileId del parametro LaunchActivatedEventArgs sarà identico all'ID applicazione nel manifesto del pacchetto. Se l'app viene avviata da un riquadro secondario, l'ID della proprietà TileId sarà quello specificato durante la creazione del riquadro. Il metodo OnLaunched della classe MvvmAppBase chiamerà il metodo OnLaunchApplication della classe App solo se l'esecuzione dell'app non riprende in seguito a una sospensione oppure se l'app è stata avviata tramite un riquadro secondario. Il metodo OnLaunchApplication, illustrato nell'esempio di codice seguente, fornisce il comportamento di avvio specifico dell'app.

AdventureWorks.Shopper\App.xaml.cs


protected override Task OnLaunchApplication(LaunchActivatedEventArgs args)
{
    if (args != null && !string.IsNullOrEmpty(args.Arguments))
    {
        // The app was launched from a Secondary Tile
        // Navigate to the item's page
        NavigationService.Navigate("ItemDetail", args.Arguments);
    }
    else
    {
        // Navigate to the initial page
        NavigationService.Navigate("Hub", null);
    }

    Window.Current.Activate();
    return Task.FromResult<object>(null);
}


In questo metodo il parametro LaunchActivatedEventArgs contiene lo stato precedente dell'app e gli argomenti di attivazione. Se l'app viene avviata dal riquadro dell'app, la proprietà Arguments di attivazione non conterrà dati e si passerà a HubPage. Se l'app viene avviata da un riquadro secondario, la proprietà Arguments di attivazione conterrà il codice del prodotto da visualizzare. Si passerà quindi a ItemDetailPage e il codice prodotto verrà passato all'override OnNavigatedTo nell'istanza di ItemDetailPageViewModel, in modo da visualizzare il prodotto specificato.

[Torna all'inizio]

 

 

Mostra:
© 2015 Microsoft