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 al massimo i topic space di Event Grid MQTT
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Utilizzare Azure AI Studio per testare i modelli AI
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Introduzione alle Container Queries
Utilizzare il metodo IntersectBy per eseguire l'intersection di due liste
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Le novità di Angular: i miglioramenti alla CLI
Gestione dei nomi con le regole @layer in CSS
Miglioramenti nell'accessibilità con Angular CDK
Filtering sulle colonne in una QuickGrid di Blazor
Supportare il sorting di dati tabellari in Blazor con QuickGrid