La diffusione sempre più ampia di Windows Phone e la facilità di sviluppo attraverso i tool di Visual Studio 2010 ha favorito anche la relativa crescita del marketplace e delle applicazioni che contiene. Grazie alla comunità degli sviluppatori che si crea, si diffondono anche nuove idee ed effetti grafici che vanno ad integrarsi piacevolmente con Metro e la UI di Windows Phone.
Tra questi effetti vi è ad esempio l'uso di sfondi animati, e più precisamente una traslazione lenta di un'immagine, per rendere più piacevole una pagina. Per realizzare questo genere di effetto bastano poche righe, grazie alla potenzialità di Silverlight e alla facilità del markup XAML.
Si comincia prima di tutto con la definizione del pannello contenitore della pagina, il quale dispone degli elementi di interfaccia e, cosa più importante, l'immagine di sfondo da applicare. Nel codice seguente si utilizza l'ImageBrush come elemento di Background:
<Grid x:Name="LayoutRoot"> <Grid.Background> <ImageBrush ImageSource="girasole.jpg" Stretch="None"> <ImageBrush.Transform> <TranslateTransform x:Name="transform"/> </ImageBrush.Transform> </ImageBrush> </Grid.Background> <!-- Elementi visuali --> </Grid>
Da notare l'uso dell'oggetto TranslateTransform per preparare la trasformazione che ha il compito di traslare l'immagine, partendo da zero sull'asse delle X. Sempre sulla griglia si definisce quindi un EventTrigger che, attraverso una DoubleAnimation, sposta nel tempo il valore di X della trasformazione.
<Grid.Triggers> <EventTrigger RoutedEvent="Control.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation AutoReverse="True" RepeatBehavior="Forever" Duration="0:1:0" From="0" To="-580" Storyboard.TargetName="transform" Storyboard.TargetProperty="X" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Grid.Triggers>
L'immagine originale è orizzontalmente più grande rispetto alla pagina così da ottenere un movimento lento (impiega un minuto), fluido e infinito, poiché AutoReverse è impostato a true. Il risultato che si ottiene è il seguente:
E' importante non abusare e non utilizzare immagini troppo grandi, perché vanno a pesare sia sulla ram, sia sulla GPU, per effettuare la traslazione, penalizzando prestazioni e dispositivo.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Code scanning e advanced security con Azure DevOps
Eseguire attività pianificate con Azure Container Jobs
Elencare le container images installate in un cluster di Kubernetes
Usare una container image come runner di GitHub Actions
Load test di ASP.NET Core con k6
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Generare file per il download da Blazor WebAssembly
Eseguire operazioni con timeout in React
Eseguire attività basate su eventi con Azure Container Jobs
Evitare il flickering dei componenti nel prerender di Blazor 8
Generare token per autenicarsi sulle API di GitHub
I più letti di oggi
- Utilizzare WebAssembly con .NET, ovunque
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Utilizzare il trigger SQL con le Azure Function
- Ottimizzazione dei block template in Angular 17
- Disabilitare automaticamente un workflow di GitHub (parte 2)