Questo articolo è tratto dal libro Sviluppare applicazioni per Windows 8 con XAML, C# e VB di Daniele Bochicchio, Cristian Civera, Marco De Sanctis, Alessio Leoncini, Marco Leoncini, Stefano Mostarda.
Nel precedente capitolo abbiamo iniziato a esplorare i controlli che abbiamo a disposizione in WinRT, molti dei quali sono sicuramente già noti a chi ha avuto esperienze di sviluppo in Silverlight, Windows Phone o WPF. Questi controlli rappresentano sicuramente dei mattoni fondamentali, ma da soli non sono sufficienti a realizzare applicazioni "vincenti". Se abbiamo avuto modo di visionare qualcuna delle applicazioni presenti nello store di Windows 8, infatti, ci saremo resi conto di come esistano dei pattern specifici secondo i quali organizzare l'interfaccia, tra cui, per esempio, l'aggregazione dei vari elementi in strutture a griglia o a lista, magari suddivise in gruppi. Per imparare a realizzare interfacce di questo tipo, è piuttosto importante conoscere i controlli pensati per rappresentare sullo schermo molteplici elementi; GridView, ListView, nella fattispecie, rappresentano delle assolute novità, introdotte appositamente per le applicazioni Windows 8, ed è proprio a queste novità, ma anche a molto altro, che è dedicato questo capitolo. Una new entry è anche SemanticZoom, che ci consente di reagire a una gesture di zoom da parte dell'utente per mostrare, per esempio, delle informazioni di riepilogo. Anche per ciò che concerne la navigazione o la gestione di comandi e opzioni, esiste un oggetto specifico, che ha già fatto la sua comparsa in Windows Phone: stiamo parlando di AppBar, che in WinRT è stato ulteriormente potenziato. L'obiettivo di questo capitolo è proprio quello di imparare a sfruttare tutti questi oggetti, in modo che, al termine, abbiamo in mano tutti gli strumenti necessari per realizzare applicazioni, anche complesse, con la necessaria padronanza.
Visualizzare elenchi di elementi
Il controllo più elementare messo a disposizione da WinRT quando vogliamo mostrare un elenco di elementi è ItemsControl. Questo oggetto tipicamente si utilizza in binding con una collezione di oggetti, come nell'esempio 5.1.
<Grid ... /> <ItemsControl ItemsSource="{Binding Items}" /> </Grid>
Public Property Items As List(Of String) Public Sub New() InitializeComponent() Me.Items = New List(Of String)() From {"Marco", "Cristian", "Alessio", "Stefano"} End Sub
public List<string> Items { get; set; } public MainPage() { this.InitializeComponent(); this.Items = new List<string>() { "Marco", "Cristian", "Alessio", "Stefano" }; }
La collezione Items che abbiamo utilizzato non è altro che una lista di stringhe, che per default vengono rappresentate da ItemsControl con degli elementi di testo. Come abbiamo accennato nel capitolo 3, grazie ai data template possiamo però personalizzare la modalità secondo cui rappresentare ogni singolo elemento; in questo modo, siamo anche in grado di legare in binding oggetti complessi. Se, per esempio, ogni elemento della lista è un oggetto Person, con le proprietà Name ed Email, possiamo definire l'ItemTemplate secondo cui visualizzarli, come nell'esempio 5.2.
<ItemsControl ItemsSource="{Binding Items}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" /> <HyperlinkButton Content="Invia Email..." Tag="{Binding Email}" Click="SendEmail" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
Ogni elemento della lista, è uno StackPanel che contiene un TextBlock, in binding con la proprietà Name, e un HyperLinkButton. Quest'ultimo, in particolare, contiene l'indirizzo email all'interno della proprietà Tag, così che possiamo recuperarlo nel gestore dell'evento Click con il codice dell'esempio 5.3.
Public Async Function SendEmail(sender As Object, e As RoutedEventArgs) As Task Dim button = DirectCast(e.OriginalSource, HyperlinkButton) Dim email = DirectCast(button.Tag, String) Await Launcher.LaunchUriAsync(New Uri("mailto:" + email)) End Function
Private async void SendEmail(object sender, RoutedEventArgs e) { var button = (HyperlinkButton)e.OriginalSource; var email = (string)button.Tag; await Launcher.LaunchUriAsync(new Uri("mailto:" + email)); }
ItemsControl ci è utile per iniziare a capire come funzionano i controlli basati su liste di elementi, ed è l'oggetto da preferire quando dobbiamo ripetere un determinato template un certo numero di volte; nonostante questo, però, si tratta di un controllo molto limitato, che fa davvero poco più di quanto abbiamo visto. Per esempio, non gestisce la selezione né il click sul singolo elemento, tant'è che siamo stati costretti a sfruttare degli HyperLinkButton. Inoltre, nel caso sia necessario supportare lo scrolling, è compito di noi sviluppatori gestirlo, per esempio inserendo quest'oggetto all'interno di uno ScrollViewer.Fortunatamente, in WinRT esistono anche due oggetti più avanzati, che racchiudono tutte queste funzionalità insieme a diverse altre, che saranno l'argomento delle prossime pagine: GridView e ListView.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di componenti personalizzati in React.js con Tailwind CSS
Gestione degli stili CSS con le regole @layer
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Miglioramenti nelle performance di Angular 16
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Come migrare da una form non tipizzata a una form tipizzata in Angular
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Triggerare una pipeline su un altro repository di Azure DevOps
Utilizzare la funzione EF.Parameter per forzare la parametrizzazione di una costante con Entity Framework
Miglioramenti nell'accessibilità con Angular CDK
Ottimizzare la latenza in Blazor 8 tramite InteractiveAuto render mode