All'avvio di una Windows Store app abbiamo la possibilità di mostrare un'immagine come splash screen. Questa viene mostrata il tempo necessario per caricare l'applicazione ma è svincolata dalla logica della stessa. Quindi ci troveremo l'applicazione in esecuzione, ma priva di dati, e quindi non utilizzabile dall'utente.
Intervenendo sul flusso d'esecuzione all'avvio dell'applicazione e utilizzando la classe SplashScreen possiamo mantenere l'immagine visualizzata e mostrare un'animazione di caricamento fin quando l'applicazione non avrà recuperato i dati necessari al suo funzionamento.
Per prima cosa aggiungiamo alla solution del nostro progetto un nuovo UserControl, e modifichiamo lo XAML come nell'esempio seguente.
<UserControl.Resources> <Storyboard x:Name="EnterLoadingStoryBoard"> <DoubleAnimation Duration="0:0:0.6" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ProgressRing" d:IsOptimized="True" /> <DoubleAnimation Duration="0:0:0.6" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ProgressRing" d:IsOptimized="True" /> </Storyboard> </UserControl.Resources> <Canvas Background="#FF6600"> <Image x:Name="logoImage" Source="Assets/SplashScreen.png" Stretch="None" Width="620" Height="300" /> <ProgressRing x:Name="ProgressRing" Height="80" Width="80" IsActive="True" Foreground="Black" Opacity="0" RenderTransformOrigin="0.5,0.5"> <ProgressRing.RenderTransform> <CompositeTransform TranslateY="20" /> </ProgressRing.RenderTransform> </ProgressRing> </Canvas>
L'interfaccia dello UserControl è estremamente semplice, è composta dall'immagine utilizzata come splash screen e da un ProgressRing, in più abbiamo aggiunto una semplice animazione per rendere l'entrata della ProgressRing più piacevole.
E' il momento di modificare il flusso d'esecuzione. Apriamo il file App.xaml.cs e identifichiamo il metodo OnLaunched modificandolo come segue.
protected override void OnLaunched(LaunchActivatedEventArgs args) { if (args.PreviousExecutionState != ApplicationExecutionState.Running) { Window.Current.Content = new PreloadSplashScreen(args.SplashScreen); } Window.Current.Activate(); }
Il metodo OnLaunch riceve come parametro un'istanza dell'oggetto LaunchActivatedEventArgs, a noi interessa la proprietà del tipo SplashScreen, che useremo per inizializzare una nuova istanza dello UserControl aggiunto in precedenza al progetto. L'istanza così ottenuta viene impostata come contenuto della Window corrente e resa attiva.
Torniamo all'UserControl e modifichiamo il costruttore nel code behind come segue.
public PreloadSplashScreen(SplashScreen splashScreen) : this() { splashScreen.Dismissed += splashScreen_Dismissed; Canvas.SetLeft(this.logoImage, splashScreen.ImageLocation.Left); Canvas.SetTop(this.logoImage, splashScreen.ImageLocation.Top); Canvas.SetLeft(this.ProgressRing, splashScreen.ImageLocation.Left + logoImage.Width / 2 - ProgressRing.Width / 2); Canvas.SetTop(this.ProgressRing, splashScreen.ImageLocation.Bottom); //Inizio il caricamento delle risorse PreLoadData(); }
Nel costruttore come prima cosa ci registriamo all'evento Dismissed, così da poter gestire la chiusura della splash. Proseguiamo posizionando l'immagine della splash contenuta nell'UserControl esattamente dove era posizionata quella all'avvio dell'applicazione. Questa operazione può essere compiuta comodamente utilizzando la proprietà ImageLocation del tipo Rect.
Posizionare esattamente la splash screen consente di non notare la transizione dall'immagine usata all'avvio a quella presente nell'UserControl.
Una volta terminato il posizionamento degli elementi dell'UI iniziamo il caricamento dei dati richiamando il metodo PreLoadData.
private async void PreLoadData() { //Simulo operazioni lunghe await Task.Delay(2500); //Creo un nuovo frame var rootFrame = new Frame(); //Navigo rootFrame.Navigate(typeof(MainPage)); //Imposto il contenuto corrente dell'applicazione Window.Current.Content = rootFrame; }
Trattandosi di una demo, simuliamo l'attesa dovuta alle chiamate remote e quanto altro necessario a popolare di dati l'applicazione, mediante il metodo Task.Delay(2500). Successivamente creiamo una nuova istanza dell'oggetto Frame e navighiamo alla home. Infine impostiamo il frame come contenuto della Window.
Diamo un ultimo tocco eseguendo nell'event handler splashScreen_Dismissed l'animazione d'entrata creata per la ProgressRing.
void splashScreen_Dismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object args) { this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, ((Storyboard)Resources["EnterLoadingStoryBoard"]).Begin); }
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 browser per rilevare Javascript e CSS non utilizzati nel codice
Eseguire query in parallelo con Entity Framework Core and ASP.NET Core
Come utilizzare il nuovo componente OffCanvas di Bootstrap 5
Impostare il contenuto dell'head all'interno di ogni pagina Blazor
Le novità di Blazor in .NET 6.0
Introduzione al nuovo tipo TimeOnly di .NET
Continuous Deployment tramite GitOps
Comprimere le immagini contenute in un repository con una GitHub Action
Serializzare e deserializzare un tipo TimeOnly con System.Text.Json
Usare l'option pattern per gestire la configurazione in ASP.NET Core
Creare automaticamente una pipeline YAML da una sua definizione in Azure DevOps
Utilizzare la keyword with in JavaScript
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestire form con più di un pulsante submit in ASP.NET MVC
- Usare TryUpdateModelAsync per aggiornare le entity nelle action di POST in ASP.NET Core MVC
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!