Grazie alla Universal Windows Platform, ci viene molto più comodo e semplice realizzare effettivi visivi in XAML per rendere le nostre applicazioni più accattivanti dal punto di vista grafico. Questi effetti, non solo rendono l'applicazione più bella, ma anche più fruibile, in alcuni casi, migliorando la user experience della stessa.
Uno di questi casi, è rappresentato da ThemeShadow, un effetto di ombra pre-configurato in WinRT che può essere applicato ad ogni controllo presente nello XAML sulle tre dimensioni x, y e z. ThemeShadow, essendo built-in nel sistema, è in grado di adattarsi alle specifiche dell'ambiente come, ad esempio, il tema chiaro/scuro e così via. Per realizzarlo, abbiamo prima di tutto necessità di capire l'elemento alla quale vogliamo applicarlo:
<Grid x:Name="ImageGrid" Width="255" Height="124" Shadow="{StaticResource BackgroundShadow}"> <Image Source="ms-appx:///Assets/Pool.png"/> </Grid> </Grid>
In questo caso, l'oggetto è rappresentato da una immagine, contenuta all'interno di una griglia che fungerà da bordo. Se osserviamo bene l'oggetto Grid, noteremo che l'ombra è stata impostata sul controllo tramite l'oggetto ThemeShadow di sistema, definito come risorsa della pagina.
<Grid> <Grid.Resources> <ThemeShadow x:Name="BackgroundShadow"/> </Grid.Resources> <Grid x:Name="ShadowGrid" /> <Grid x:Name="ImageGrid" Width="255" Height="124" Shadow="{StaticResource BackgroundShadow}"> <Image Source="ms-appx:///Assets/Pool.png"/> </Grid> </Grid>
Il contenitore ShadowGrid, invece, fungerà da receiver per l'ombra che, quindi, dovrà essere registrato a livello di code-behind al termine del caricamento della pagina:
private void OnPageLoaded(object sender, RoutedEventArgs e) { BackgroundShadow.Receivers.Add(ShadowGrid); }
Avviando l'applicazione, non noteremo però alcun miglioramento visivo sul controllo ImageGrid, in quanto quello che manca, ancora, è definire lo z-index, ovvero di quanto l'asse Z deve "elevarsi" rispetto al piano. Per farlo, possiamo creare uno slider e impostare il livello dell'ombra utilizzando un vettore a tre dimensioni:
<Slider x:Name="DepthSlider" Minimum="0" Maximum="100" ValueChanged="OnSliderValueChanged" Header="Z-index" />
private void OnSliderValueChanged(object sender, RangeBaseValueChangedEventArgs e) { var SliderValue = (float)e.NewValue; ImageGrid.Translation = new Vector3(0, 0, (float)(SliderValue * 0.2)); }
Cambiando il valore dello slider, cambierà di conseguenza anche il valore dell'ombra:
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare il trigger SQL con le Azure Function
Usare le collection expression per inizializzare una lista di oggetti in C#
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Generare file per il download da Blazor WebAssembly
Le novità di Angular: i miglioramenti alla CLI
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Reactive form tipizzati con FormBuilder in Angular
Migliorare la sicurezza dei prompt con Azure AI Studio
Utilizzare la session affinity con Azure Container Apps
Utilizzare un service principal per accedere a Azure Container Registry
Eseguire attività pianificate con Azure Container Jobs
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
I più letti di oggi
- Aggiungere il metodo SelectMany alla classe Array in TypeScript
- Usare gateway dedicati con Azure Cosmos DB per migliorare le prestazioni
- Recuperare i Popup aperti in una Windows Store app
- AI&ML Conf 2020 - Online
- Preview 4 per ASP.NET MVC
- Speciale Windows Store app: costruire app con WinRT per Windows 8
- Microsoft Security Bulletin MS02-050
- Microsoft Security Bulletin MS04-033
- Attivare l'output caching su ASP.NET Web API
- Ottimizzare l'utilizzo di banda tramite ETag in ASP.NET Core Web API