Un effetto semplice, ma che appaga l'utente nell'utilizzo di un'applicazione è la comparsa delle immagini di una lista durante lo scorrimento della stessa. Realizzare questo effetto richiede qualche riga di codice e in ottica di riutilizzo del codice con questo script si vuole mostrare come realizzare un attached behavior che permetta facilmente di ottenere l'effetto desiderato.
Innanzitutto si crea una classe, ad esempio FadeImage, dove vengono definite due attached property.
public class FadeImage { public static readonly DependencyProperty UriSourceProperty = DependencyProperty.RegisterAttached("UriSource", typeof(Uri), typeof(FadeImage), new PropertyMetadata(null, OnUriSourceChanged)); private static readonly DependencyProperty StoryboardProperty = DependencyProperty.RegisterAttached("Storyboard", typeof(Storyboard), typeof(FadeImage), new PropertyMetadata(null)); public static void SetUriSource(DependencyObject image, Uri uri) { image.SetValue(UriSourceProperty, uri); } public static Uri GetUriSource(DependencyObject image) { return image.GetValue(UriSourceProperty) as Uri; }
La prima rappresenta l'URI dell'immagine da caricare, mentre la seconda serve per mantenere il riferimento alla storyboard che, quando necessario, si utilizza per animare l'opacity dell'immagine. Il callback OnUriSourceChanged viene invocato quando l'URI dell'immagine viene impostata sulla proprietà. Grazie alla virtualizzazione degli elementi, l'oggetto Image viene riutilizzato più volte quando questo scompare per via dell'attività di scrolling dell'utente. Per questo motivo nel callback si crea l'oggetto BitmapImage solo la prima volta, così come per la Storyboard di animazione, per agire solo sull'immagine da caricare nelle volte successive. In virtù di questo si procede sempre ad impostare l'opacity a zero, per nascondere l'immagine.
private static void OnUriSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { Image image = (Image)d; // Creo la prima volta l'oggetto per caricare le immagini // da un Uri BitmapImage bitmapImage = image.Source as BitmapImage; if (bitmapImage == null) { bitmapImage = new BitmapImage(); // Opzione per migliorare le prestazioni bitmapImage.CreateOptions = BitmapCreateOptions.DelayCreation | BitmapCreateOptions.BackgroundCreation; image.Source = bitmapImage; // Intercetto il caricamento dell'immagine image.ImageOpened += Image_ImageOpened; // Preparo l'animazione sull'opacity DoubleAnimation animation = new DoubleAnimation(); animation.To = 1; animation.Duration = TimeSpan.FromSeconds(1); Storyboard.SetTarget(animation, image); Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity")); // Avvio l'animazione Storyboard storyboard = new Storyboard(); storyboard.Children.Add(animation); // Mantengo un riferimento image.SetValue(StoryboardProperty, storyboard); } // Fermo la storyboard già in corso, per evitare strani effetti Storyboard oldStoryboard = (Storyboard)image.GetValue(StoryboardProperty); if (oldStoryboard != null) oldStoryboard.Stop(); // Rimetto sempre a zero l'opacity image.Opacity = 0d; // Imposto il nuovo Uri bitmapImage.UriSource = (Uri)e.NewValue; }
Poiché l'utente può eseguire scroll veloci, una stessa immagine può subire più avvii di storyboard, e per questo motivo si effettua sempre lo Stop. L'evento ImageOpened intercettato esegue infine l'attività di comparsa dell'immagine, avviando la storyboard già pronta all'uso.
static void Image_ImageOpened(object sender, RoutedEventArgs e) { Image image = (Image)sender; Storyboard storyboard = (Storyboard)image.GetValue(StoryboardProperty); storyboard.Begin(); }
Grazie all'uso dell'opacity, l'animazione creata sfrutta la GPU e quindi garantisce ottime prestazioni. Non resta a questo punto che utilizzare l'attached behavior.
<Image Width="100" Height="100" Local:FadeImage.UriSource="{Binding Image}"> </Image>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Le novità di Angular: i miglioramenti alla CLI
Effettuare delete massive con Entity Framework Core 7
Effettuare il binding di date in Blazor
Utilizzare le Cache API di JavaScript per salvare elementi nella cache del browser
Aggiungere interattività lato server in Blazor 8
Utilizzare le collection expression in C#
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Migrare una service connection a workload identity federation in Azure DevOps
Come migrare da una form non tipizzata a una form tipizzata in Angular
C# 12: Cosa c'è di nuovo e interessante