Windows 8 si apre ad una varietà di device come tablet, PC e TV, con dimensioni e risoluzioni dello schermo molto diverse tra loro.
Mentre questa varietà non è un problema per immagini vettoriali o elementi XAML, che si possono adattare dinamicamente senza perdita di qualità, nel caso di immagini BMP queste hanno dimensioni ben precise e lasciare che vengano adattate automaticamente può generare artefatti inattesi o scarsa visibilità.
Poichè in Windows 8 è stata fatta grande cura all'usabilità complessiva, questo scenario è stato gestito nativamente in WinRT il quale, a fronte di una immagine, cerca autonomamente la presenza di un file corrispondente ai DPI del sistema operativo, per mostrarla in alternativa all'immagine di base, solitamente a 96dpi.
Per sfruttare questa funzionalità dobbiamo rispettare una serie di convenzioni dei nomi dei file.
Le proporzioni di riferimento sono quattro: 80, 100, 140 e 180.
- 100: corrisponde alle risoluzioni di base (normal DPI) come 1024x768px e 1366x768px;
- 140: risoluzioni HD 1920x1080px;
- 180: oltre HD, come 2560x1440px;
- 80: solo per logo, wideLogo e smallLogo;
A ciascuna proporzione corrisponde un suffisso scale-* da aggiungere al nome del file; prendiamo ad esempio winrtitalia.png, per ognuna di esse dovremo creare i seguenti file di immagine:
- winrtitalia.scale-100.png;
- winrtitalia.scale-140.png
- winrtitalia.scale-180.png
- winrtitalia.scale-80.png (ma solo in caso sia uno dei tre logo per l'app)
Dobbiamo considerare le immagini 140, 180 e 80 come le dimensioni in percentuali dell'immagine 100, quindi se tale immagine di base fosse 100x100px la relativa 180 sarà di 180x180px.
Comunque, sia nel codice che nel markup, dobbiamo sempre riferirci a winrtitalia.png con le modalità di cui abbiamo parlato nello script #6, l'accesso al file specifico avviene in modo trasparente.
Per migliorare la qualità complessiva delle immagini è consigliato che queste abbiano dimensioni in multiplio di 5 pixel.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire domini wildcard in Azure Container Apps
Recuperare l'ultima versione di una release di GitHub
Utilizzare i primary constructor di C# per inizializzare le proprietà
Potenziare Azure AI Search con la ricerca vettoriale
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Implementare l'infinite scroll con QuickGrid in Blazor Server
Creazione di componenti personalizzati in React.js con Tailwind CSS
Applicare un filtro per recuperare alcune issue di GitHub
Effettuare il refresh dei dati di una QuickGrid di Blazor
Utilizzare QuickGrid di Blazor con Entity Framework
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Disabilitare automaticamente un workflow di GitHub
I più letti di oggi
- ora è la volta di #azure. http://aspitalia.com/build-win8 #BldWin
- Implementare il pattern Dispose del .NET Framework
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare la cancellazione logica in #azure Container Registry https://aspit.co/ccy di @CristianCivera
- Centrare elementi in HTML tramite CSS
- Annunciato #PowerBI Embedded e disponibile in preview a partire da oggi! https://aspit.co/build2016 #build2016
- con il code inspector si potrà vedere il codice server associato all'HTML prodotto, ... http://aspitalia.com/build-win8 #BldWin
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!