UWP Immagini circolari per le nostre app

Con Windows 10 Microsoft ho inserito alcuni cambiamenti nelle linee guida consigliate nello sviluppo di app ed una di queste è di rendere le immagini che rappresentano gli utenti circolari.
Possiamo vederne un esempio nell’app mappa
uwp_imm_circolari
Oppure in quella dei contatti
uwp_imm_circolari_2

Per realizzare lo stesso effetto nelle nostre applicazioni possiamo usare tutta la potenza dello xaml ed inserire un oggetto Ellipse da riempire con un ImageBrush che ha come sorgente una BitmapImage, quindi con poche righe di codice come queste.


	
		
			
				
			
		
	

I parametri DecodePixelHeight e DecodePixelWidth ci permettono di ottimizzare la decodifica dell’immagine per le dimensioni scelte.

A questo punto possiamo decidere se inserire l’immagine da codice valorizzando semplicemente la proprietà UriSource per utilizzare un’immagine remota o una locale

//Immagine da url
userPicture.UriSource = new Uri("http://www.miosito.it/image.jpg");
//immagine da assets
userPicture.UriSource = new Uri("ms:appx://Assets/Images/pippo.png");

oppure inserirla fissa direttamente nello xaml modificando il codice in


Adesso le vostre applicazioni avranno uno stile conforme alle altre app di sistema, buon coding!!

  1. Ti consiglio di non usare la BitmapImage all’interno della ImageSource (ma di fare il binding ImageSource -> Uri dell’immagine) perché altrimenti alcune immagini rischiano di stretcharsi creando un brutto effetto.

Lascia un commento


NOTA - Puoi usare questiHTML tag e attributi:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi