Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > Windows 10

Nuovi controlli in Windows 10: Pull-to-refresh, Title bar, Context Menu e OCR

di Matteo TumiatiMatteo Tumiati, in Windows 10,

Abbiamo già visto con gli articoli precedenti che Windows 10 introduce tantissime novità dal punto di vista dell'SDK (aggiornato anche in versione 1511 con l'update di novembre).

La Universal Windows Platform si espande ulteriormente e, all'interno di questo articolo, vedremo come è possibile, attraverso degli esempi studiati sia per PC che per Mobile, sfruttare nuovi controlli, come il pull-to-refresh, oppure controlli di sistema, come la barra del titolo e il menu contestuale. Infine, parleremo di riconoscimento del testo con il nuovo motore di OCR.

Pull-to-refresh

Il Pull-To-Refresh è una tecnica che viene sfruttata da tantissimo tempo all'interno delle applicazioni per iOS e Android, ma che non ha mai preso piede, forse per la complessità di realizzazione, nelle applicazioni Windows Phone. In breve, per chi non la conoscesse, è una gesture che consente di "tirare" una lista di elementi verso il basso, per poi rilasciarla ed aggiornare gli elementi contenuti all'interno della lista.

Ad oggi, con Windows 10, rimane ancora complesso da realizzare poiché non è integrato direttamente all'interno dei controlli GridView o ListView. Quindi, dobbiamo ricorrere ad altri oggetti, come Border e Panel custom, che vanno a gestire lo scrolling per conto della lista. Si può vedere direttamente questa implementazione nel sample dell'SDK disponibile da Microsoft a questo indirizzo.

In realtà, a nessuno di noi piace reinventare la ruota e, sarà perché scriviamo codice continuamente, cerchiamo di riutilizzare più codice possibile. In questo caso, andiamo a sfruttare un controllo disponibile direttamente da NuGet, che utilizza lo stesso codice fornito da Microsoft nell'esempio fornito poco sopra: il pacchetto si chiama Comet, è realizzato da un Program Manager di Microsoft, Nikola Metulev, e contiene il controllo PullToRefreshListView.

Una volta installato il controllo, andiamo nello XAML e scriviamo il seguente codice:

<c:PullToRefreshListView x:Name="listView"
                         RefreshRequested="listView_RefreshCommand"
                         PullProgressChanged="listView_PullProgressChanged">
 
<c:PullToRefreshListView.ItemTemplate>
<DataTemplate>
  <TextBlock Text="{Binding Title}" />
</DataTemplate>
</c:PullToRefreshListView.ItemTemplate>
 
<c:PullToRefreshListView.RefreshIndicatorContent>
  <Border HorizontalAlignment="Center"
                x:Name="refreshindicator"
                CornerRadius="30"
                Background="Red"
                Height="20"
                Width="20" />
</c:PullToRefreshListView.RefreshIndicatorContent>
</c:PullToRefreshListView>

In questo caso, siamo andati a mettere il controllo PullToRefreshListView che, tra le varie proprietà tipiche della ListView, aggiunge anche una attached property RefreshIndicatorContent che ci permette di definire il contenitore e lo stile dell'indicatore visibile durante la fase di pull. In questo caso, siamo andati ad utilizzare un semplice Border, a cui poi cambieremo il colore, ma si può specificare qualsiasi oggetto.

Oltre all'attached property che abbiamo appena visto, abbiamo a disposizione anche gli eventi RefreshRequested e PullProgressChanged: l'evento PullProgressChanged viene invocato ogni volta che l'utente sta facendo il pull, ovvero sta tirando la lista verso il basso e, negli argomenti dell'evento, viene inviato un valore double (da zero ad uno) che rappresenta la percentuale di trascinamento.

private void listView_PullProgressChanged(object sender, Comet.Controls.RefreshProgressEventArgs e)
{
  refreshindicator.Opacity = e.PullProgress;
 
        refreshindicator.Background = e.PullProgress < 1.0 ?
                new SolidColorBrush(Colors.Red) : new SolidColorBrush(Colors.Blue);
 
}

In questo caso abbiamo sfruttato l'evento per cambiare l'opacità del bordo ed il colore in base alla percentuale di cui abbiamo appena discusso.

L'evento RefreshRequested viene invocato quando l'utente rilascia la lista ed il PullProgress dell'evento precedente ha raggiunto il valore 1.0: possiamo sfruttarlo per aggiornare la lista degli elementi.

private void listView_RefreshCommand(object sender, EventArgs e)
{
  RefreshListAsync();
}

Il risultato che otterremo sarà simile al seguente:

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2024 - Milano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

I più letti di oggi

In evidenza

Misc