Riquadri per le app di Windows

  • Articolo

Un riquadro è la rappresentazione di un'app nel menu Start. Ogni app di Windows ha un riquadro. Quando crei un nuovo progetto di app di Windows in Microsoft Visual Studio, include un riquadro predefinito che visualizza il nome e il logo dell'app. Windows visualizza questo riquadro quando l'app viene installata per la prima volta. Dopo l'installazione dell'app, puoi modificare il contenuto del riquadro tramite le notifiche; ad esempio, puoi modificare il riquadro per comunicare nuove informazioni all'utente, ad esempio i titoli delle notizie o l'oggetto del messaggio non letto più recente.

Configurazione del riquadro predefinito

Quando crei un nuovo progetto in Visual Studio, viene creato un semplice riquadro predefinito che visualizza il nome e il logo dell'app.

Per modificare il riquadro, fai doppio clic sul file Package.appxmanifest nel progetto UWP principale per aprire la finestra di progettazione oppure fai clic con il pulsante destro del mouse sul file e seleziona Visualizza codice.

  <Applications>
    <Application Id="App"
      Executable="$targetnametoken$.exe"
      EntryPoint="ExampleApp.App">
      <uap:VisualElements
        DisplayName="ExampleApp"
        Square150x150Logo="Assets\Square150x150Logo.png"
        Square44x44Logo="Assets\Square44x44Logo.png"
        Description="ExampleApp"
        BackgroundColor="#464646">
        <uap:SplashScreen Image="Assets\SplashScreen.png" />
      </uap:VisualElements>
    </Application>
  </Applications>

È necessario aggiornare alcuni elementi:

  • DisplayName: sostituisci questo valore con il nome che vuoi visualizzare nel riquadro.

  • ShortName: poiché il nome visualizzato è limitato per adattarsi ai riquadri, ti consigliamo di specificare anche shortName, per assicurarti che il nome dell'app non venga troncato.

  • Immagini di logo:

    devi sostituire queste immagini con le tue immagini personali. È possibile fornire immagini per scale visive diverse, ma non è necessario fornirle tutte. Per assicurarsi che l'app abbia un aspetto ottimale in un'ampia gamma di dispositivi, è consigliabile fornire versioni di scala del 100%, 200% e 400% di ogni immagine. Per altre informazioni sulla generazione di questi asset, vedere Icone e logo dell'app.

    Le immagini ridimensionate seguono questa convenzione di denominazione:

    <nome immagine>.scale-<fattore di scala>.<estensione file di immagine>

    Ad esempio: SplashScreen.scale-100.png

    Quando si fa riferimento all'immagine, si fa riferimento al nome <nome immagine>.<estensione file di immagine> ("SplashScreen.png" in questo esempio). Il sistema selezionerà automaticamente l'immagine ridimensionata appropriata per il dispositivo dalle immagini fornite.

  • Non è necessario, ma consigliamo vivamente di fornire logo per dimensioni di riquadri ampie e grandi in modo che l'utente possa ridimensionare il riquadro dell'app in base a tali dimensioni. Per fornire queste immagini aggiuntive, crea un elemento DefaultTile e usa gli attributi Wide310x150Logo e Square310x310Logo per specifica immagini aggiuntive:

  <Applications>
        <Application Id="App"
          Executable="$targetnametoken$.exe"
          EntryPoint="ExampleApp.App">
          <uap:VisualElements
            DisplayName="ExampleApp"
            Square150x150Logo="Assets\Square150x150Logo.png"
            Square44x44Logo="Assets\Square44x44Logo.png"
            Description="ExampleApp"
            BackgroundColor="#464646">
            <uap:DefaultTile
              Wide310x150Logo="Assets\Wide310x150Logo.png"
              Square310x310Logo="Assets\Square310x310Logo.png">
            </uap:DefaultTile>
            <uap:SplashScreen Image="Assets\SplashScreen.png" />
          </uap:VisualElements>
        </Application>
      </Applications>

Usa le notifiche per personalizzare il riquadro

Dopo aver installato l'app, puoi usare le notifiche per personalizzare il riquadro. Puoi eseguire questa operazione la prima volta che l'app viene avviata o in risposta a un evento, ad esempio una notifica push.

Per informazioni su come inviare notifiche di riquadri, vedere Invia una notifica di riquadro locale.