2014-05-25 9 views
25

Quando si esegue una funzione asincrona per ottenere dati locali, accedere a un file o chiamare un'API, come si attiva l'animazione di caricamento durante questa, possibilmente, lunga routine?Come si mostra l'animazione di caricamento per le app di Windows Phone Universal Phone 8.1?

Ecco un esempio:

<Button onClick="Button_Click" /> 

public async void Button_Click(object sender, RoutedEventArgs e) 
{ 
    var myData = await MyDataManager.GetMyData(); 
    await new MessageDiaglog("Data Loaded!").ShowAsync(); 
} 

Dal momento che è un app store universale, suppongo che dovrebbe funzionare lo stesso in entrambe le finestre 8.1 e Windows Phone 8.1.

AGGIORNAMENTO DA SOLUZIONE

Per risposta igrali, ho aggiornato il mio codice di riferimento futuro:

<ProgressBar x:Name="LoadingBar" Visibility="Collapsed" IsEnabled="False" IsIndeterminate="true" Height="4" HorizontalAlignment="Stretch"/> 
<Button onClick="Button_Click" /> 

public async void Button_Click(object sender, RoutedEventArgs e) 
{ 
    LoadingBar.IsEnabled = true; 
    LoadingBar.Visibility = Visibility.Visible; 
    var myData = await MyDataManager.GetMyData(); 
    await new MessageDiaglog("Data Loaded!").ShowAsync(); 
    LoadingBar.IsEnabled = false; 
    LoadingBar.Visibility = Visibility.Collapsed; 
} 

Questo codice funziona sia sul telefono e tablet.

risposta

26

C'è un modo abbastanza standardizzato di farlo su Windows Phone. Poiché si tratta di un'app universale, probabilmente la scelta migliore è quella di mostrare un anello di progresso.

si aggiunge in XAML

<ProgressRing IsActive="True"/> 

È possibile mostrare in modo esplicito nel codice dietro quando fa clic sul pulsante, o utilizzare una proprietà bool in un ViewModel (se si utilizza MVVM) e una ValueConverter per mostrarlo o nascondilo semplicemente cambiando una proprietà da vera a falsa e viceversa.

Ho anche suggerire la lettura della documentazione ufficiale about progress controls e finirò questa risposta con una punta da documentazione ProgressRing che can be found here

Impostare la proprietà IsActive per accendere il ProgressRing acceso o spento. Se IsActive è falso, l'avanzamento non viene mostrato, ma lo spazio è riservato per esso nel layout dell'interfaccia utente. Per non riservare spazio per l'avanzamento progressivo , impostarne la proprietà Visibility su Collapsed.

Suggerimento Quando l'avanzamento è attivo, l'animazione di avanzamento continua anche se non è visibile sullo schermo, ad esempio quando è Visibilità è Compresso. Ciò può mantenere sveglio il thread dell'interfaccia utente, utilizzare le risorse e compromettere il rendimento dell'app. Quando ProgressRing non è visibile, è necessario disattivare l'animazione impostando IsActive su falso .

+0

Ok fantastico - quindi, per essere chiari, lo attivo/lo mostro prima della chiamata in attesa e poi lo disattivo/lo nascondo dopo la chiamata di attesa? – EdenMachine

+1

@EdenMachine esattamente. –