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
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Implementare il throttling in ASP.NET Core
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode
Utilizzare il trigger SQL con le Azure Function
Eseguire una query su SQL Azure tramite un workflow di GitHub
Utilizzare i primary constructor di C# per inizializzare le proprietà
Generare file per il download da Blazor WebAssembly
Gestire domini wildcard in Azure Container Apps
Creare moduli CSS in React
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Usare lo spread operator con i collection initializer in C#
Eseguire query verso tipi non mappati in Entity Framework Core