Revisione delle visualizzazioni tabella in iOS

Applies to Windows and Windows Phone

Per chi è abituato a usare UITableView in iOS, ecco come eseguire il data binding con controlli simili nelle app di Windows Store.

Nel video seguente vengono confrontate le visualizzazioni tabella in iOS e le visualizzazioni elenco nelle app di Windows Store.

In iOS le visualizzazioni tabella vengono usate per mostrare elenchi di dati, ad esempio di contatti, cose da fare o articoli da acquistare. Ecco come sfruttare le capacità di creazione di app di iOS per creare elenchi di dati nelle app di Windows Store per Windows 8 con i controlli ListView e GridView. Descriveremo le visualizzazioni elenco nelle app di Windows Store e le confronteremo con i controlli UITableView di iOS usati per organizzare i dati sotto forma di elenchi o di visualizzazioni master/dettaglio. I dati usati da questi controlli possono far parte delle app o provenire da database locali o remoti oppure dal Web tramite download.

Panoramica delle visualizzazioni tabella di iOS

In iOS le visualizzazioni tabella vengono spesso usate per mostrare elenchi di dati. Si tratta di uno dei controlli dell'interfaccia utente più usati nelle app di iOS. Le visualizzazioni tabella prevedono una singola colonna di elementi con scorrimento verticale che può essere divisa in sezioni. Possono essere usate in molti modi, ad esempio:

  • Per visualizzare elenchi indicizzati di elementi
  • Per esplorare dati strutturati in modo gerarchico mediante elenchi di elementi
  • Per organizzare i dati in raggruppamenti visivamente distinti

Ecco una semplice visualizzazione tabella in iOS che mostra un elenco di elementi.

App di iOS con visualizzazione tabella

Le visualizzazioni tabella vengono spesso usate nella programmazione di elenchi master/dettaglio. Vengono usate insieme alle doppie visualizzazioni per mostrare un elenco di elementi con la possibilità di eseguire il drill-down nei dettagli di ognuno di essi, come illustrato qui:

App di iOS con visualizzazione tabella

ListView nelle app di Windows Store

La libreria di controlli di Windows 8 include i controlli ListView e GridView, che è possibile usare per visualizzare elenchi di dati. ListView è un controllo versatile e personalizzabile per mostrare gli elementi in un elenco o su una griglia. Ecco un esempio di un controllo ListView usato per mostrare un elenco scorrevole di elementi:

App di Windows 8 con visualizzazione elenco

I controlli ListView e GridView possono usare come origine dati un elenco statico in memoria, un database locale o remoto, un documento XML, un servizio Web remoto o un feed. Il controllo ListView può essere associato alle origini dati mediante una tecnica chiamata "data binding", che fornisce un modo semplice per visualizzare, aggiungere, eliminare o gestire i dati delle app di Windows Store. Per altre informazioni, vedi Panoramica del data binding e Controlli di data binding.

I controlli ListView possono inoltre essere usati per visualizzare elenchi master/dettaglio, come illustrato qui. L'elenco di elementi viene mostrato usando il controllo ListView a sinistra, mentre i dettagli vengono mostrati usando i controlli Label a destra. I pannelli usati per mostrare l'elenco master e i dettagli possono essere programmati in diversi modi, tra cui con i controlliGridView o StackPanel.

App di Windows 8 con visualizzazione elenco

A differenza del controllo UITableView di iOS, il controllo ListView può anche essere usato per visualizzare elementi in una griglia, in modo da sfruttare al meglio lo spazio disponibile. Gli elementi dell'elenco mostrati in precedenza sono disposti in una griglia, con gli elementi consecutivi posizionati uno sotto l'altro. È possibile specificare il numero di righe di una colonna per controllare il layout della griglia, come in questo caso.

App di Windows 8 con visualizzazione elenco

Per altre informazioni, vedi Guida introduttiva: Aggiunta dei controlli ListView e GridView e Guida introduttiva: Definizione dei layout.

Confronto della progettazione di elenchi nelle app di iOS e in quelle di Windows Store

Se hai usato UITableView per implementare visualizzazioni elenco in iOS, scoprirai che una funzionalità simile è fornita dal controllo ListView nelle app di Windows Store per Windows 8. Nella tabella seguente sono illustrati i vari passaggi necessari per implementare un controllo ListView nella tua app. Viene indicato come completare questi passaggi sia in iOS che in Windows 8. Come puoi vedere, i passaggi di iOS sono molto simili a quelli di Windows 8.

PassaggiiOSWindows 8
Creare il controllo dell'interfaccia utente. Usa UITableView.Usa la classe ListView. Per altre informazioni, vedi Come aggiungere una visualizzazione elenco.
Definire l'aspetto dell'elenco.Usa UITableViewPlain o UITableViewGrouped.Definisci il layout impostando la proprietà ItemsPanel del controllo ListView mediante la classe ItemsPanelTemplate. Raggruppa elementi in ListView per un layout raggruppato. Per altre informazioni, vedi Guida introduttiva: Aggiunta di controlli ListView e GridView. Per informazioni sul layout raggruppato, vedi Come raggruppare elementi in un elenco o una griglia.
Definire l'aspetto degli elementi.Usa UITableViewCellStyle per stili fissi. Per un layout personalizzato, definisci la visualizzazione personalizzata per la cella. Definisci la proprietà ItemTemplate della classe ItemsControl per l'aspetto di ogni elemento. Per altre informazioni, vedi Guida introduttiva: Aggiunta di controlli ListView e GridView.
Eseguire il data binding del controllo a un'origine dati.Implementa l'interfaccia UITableViewDelegate nel controller.Imposta la proprietà ItemsSource del controllo ListView su una raccolta di elementi. Per un elenco raggruppato, imposta la proprietà ItemsSource su un'istanza della classe CollectionViewSource. Per altre informazioni, vedi Guida introduttiva: Aggiunta di controlli ListView e GridView. Per informazioni sull'elenco raggruppato, vedi Come raggruppare elementi in un elenco o una griglia.

 

Esempio di ListView

Ora compileremo una semplice app di Windows Store che usa il controllo ListView per mostrare un elenco di foto. L'app di iOS originale mostrata qui usa UITableView con lo stile UITableViewCellStyleSubtitle per le celle della tabella. Lo stile delle celle consente di visualizzare un titolo, un sottotitolo e un'immagine.

App di iOS con UITableView

Ecco l'aspetto dell'app di Windows Store equivalente:

Versione dell'app per Windows 8

Compilazione dell'app

Ecco i passaggi dettagliati necessari per creare questa app.

Questa semplice app verrà creata usando un controllo ListView con data binding.

  • Crea l'app.

    In questo esempio creeremo l'app usando il modello di app vuota in C#.

    • Avvia Microsoft Visual Studio.
    • Scegli Nuovo progetto dal menu File.
    • Se l'opzione Windows Store non è già selezionata, espandi Installati > Modelli > Visual C# e fai clic su Windows Store.
    • Se non è già selezionata, fai clic su Applicazione vuota (XAML).
    • Nelle caselle Nome e Percorso digita un nome per l'app (ad esempio Space Photos) e un percorso oppure lascia invariati i valori predefiniti.
    • Fai clic su OK.
  • Definisci l'origine dati.

    Windows 8 consente di usare un'ampia varietà di origini dati nell'app. In questa app useremo i dati definiti nel programma e di cui è stata creata un'istanza in memoria. Per informazioni su come usare altre origini dati, vedi Panoramica del data binding.

    La nostra app è una raccolta di foto che mostra la foto, il titolo e la descrizione di ognuna. Per impostare l'origine dati, definiremo prima una classe per creare un elenco di elementi, come mostrato nel codice seguente.

    • Scegli Add Class dal menu Progetto.
    • Nella casella Name sostituisci il testo predefinito con Photo.cs.
    • Fai clic su OK.
    • All'inizio del file aggiungi le seguenti istruzioni using:

      using Windows.UI.Xaml.Media;

      using Windows.UI.Xaml.Media.Imaging;

    • Sostituisci il codice class Photo { } con quello mostrato qui:

      
      public class Photo
      {
      
          public Photo(string title,  string description, string imagePath, string category)
          {
              this.Title = title;
              this.Description = description;
              this._imagePath = imagePath;
              this.Category = category;
          }
          public string Title{ get; set; }
          public string Description{ get; set; }
          public string Category { get; set; }
          private ImageSource _image = null;
          private String _imagePath = null;
          public ImageSource Image
          {
              get
              {
                  if (this._image == null && this._imagePath != null)
                  {
                      this._image = new BitmapImage(new Uri(this._imagePath));
                  }
                  return this._image;
              }
          }
      }
      
      

      Nel costruttore del file MainPage.xaml.cs creiamo un elenco di foto che fungerà da origine dati per il controllo ListView, come mostrato nel codice seguente.

      • Nella finestra Esplora soluzioni di Visual Studio espandi MainPage.xaml e fai doppio clic su MainPage.xaml.cs.
      • Nella classe MainPage, prima del metodo MainPage, aggiungi questa riga di codice:

        private List<Photo> photos = new List<Photo>();

      • Nel metodo MainPage, prima della riga di codice

        this.InitializeComponent();

        aggiungi il resto del codice mostrato qui:
        
        Photo photo1 = new Photo("The Cat's Eye Nebula", "Cat's Eye Nebula (NGC 6543) is revealed in this detailed view from NASA's Hubble Space Telescope.",
            "http://www.nasa.gov/images/content/64883main_image_feature_211_jw4.jpg", "Nebula");
        photos.Add(photo1);
        Photo photo2 = new Photo("Chaos at the Heart of Orion", "The chaos that baby stars are creating 1,500 light years away in a cosmic cloud called the Orion nebula.",
            "http://www.nasa.gov/images/content/162283main_image_feature_693_ys_4.jpg", "Nebula");
        photos.Add(photo2);
        Photo photo3 = new Photo("An Eyeful of Saturn", "Saturn and its rings completely  in this natural color image taken on March 27, 2004.", 
            "http://www.nasa.gov/images/content/59802main_pia05389-516.jpg", "Planets");
        photos.Add(photo3);
        Photo photo4 = new Photo("Jupiter Gets a Close-up", "NASA's Cassini spacecraft took this true color mosaic of Jupiter.",
            "http://www.nasa.gov/images/content/53254main_MM_image_feature_97_jw4.jpg", "Planets");
        photos.Add(photo4);
        Photo photo5 = new Photo("A Long Way From Home", "This image of the Earth and moon in a single frame was recorded by Voyager 1 ",
            "http://www.nasa.gov/images/content/151232main_image_feature_601_ys_4.jpg", "Earth/Moon");
        photos.Add(photo5);
        Photo photo6 = new Photo("Milky Way Neighbor", "Our Sun and solar system are embedded in a broad pancake of stars deep within the Milky Way galaxy.",
            "http://www.nasa.gov/images/content/63375main_image_feature_202_jw4.jpg", "Galaxy");
        photos.Add(photo6);
        Photo photo7 = new Photo("Moon Aglow", "Framed by the Earth's horizon and airglow, the full moon floats in the blackness of space .",
            "http://www.nasa.gov/images/content/111199main_image_feature_290_ys4.jpg", "Earth/Moon");
        photos.Add(photo7);
        
        
        

        L'elenco di foto di tipo List<Photo> viene definito come elenco generico di C#. Per altre informazioni, vedi Introduzione ai generics di C#.

        • Aggiungi un controllo ListView nella pagina. Aggiungi un controllo ListView all'app usando codice XAML (Extensible Application Markup Language) come segue. Nella finestra Esplora soluzioni di Visual Studio fai doppio clic su MainPage.xaml.
        • Sostituisci le righe di codice

          <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"></Grid>

          con il codice mostrato qui:
          
          // Windows 8
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          // Windows 8.1
          <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
              <TextBlock Text="NASA/JPL Photos" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
              <ListView x:Name="photoListView" ItemsSource="{Binding}" >
              </ListView>
              </StackPanel>
          
          
          

          Il data binding viene creato in XAML con la sintassi {Binding..}. L'origine del binding viene creata impostando la proprietà DataContext del controllo ListView. L'attributo ItemsSource con il valore {Binding} specifica che è stato eseguito il data binding degli elementi dell'elenco alla proprietà DataContext del controllo ListView. Per altre informazioni sul data binding, vedi Panoramica del data binding.

          Il controllo ListView può essere aggiunto all'app anche a livello di programmazione. Per i dettagli, vedi Guida introduttiva: aggiunta di controlli e gestione di eventi

    • Progetta l'aspetto dell'elenco.

      Per la visualizzazione elenco useremo l'aspetto predefinito, ossia un elenco scorrevole simile agli elenchi di iOS. Per altre informazioni su come cambiare l'aspetto dell'elenco, vedi Guida introduttiva: Aggiunta di controlli ListView e GridView.

    • Progetta l'aspetto degli elementi dell'elenco.

      In Visual Studio, nel file MainPage.xaml, aggiungi questo codice XAML tra il tag di apertura <ListView x:Name="photoListView" ItemsSource="{Binding}"> e il tag di chiusura </ListView>:

      
      // Windows 8
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      // Windows 8.1
      <ListView.ItemTemplate>
          <DataTemplate>
              <Grid Height="110" Margin="6">
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Image}" Stretch="UniformToFill" Grid.Column="0"  Width="110" Height="110"/>
                  <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
                      <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
                      <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
                  </StackPanel>
              </Grid>
          </DataTemplate>
      </ListView.ItemTemplate>
      
      
      

      Per specificare l'aspetto degli elementi dell'elenco, dobbiamo impostare la proprietà ItemsTemplate del controllo ListView specificando un oggetto DataTemplate, mediante codice XAML. Per altre informazioni, vedi Guida introduttiva: Aggiunta di controlli ListView e GridView. I controlli nel layout possono essere associati alle proprietà di un oggetto dati oppure il loro contenuto può essere definito in linea.

      Abbiamo definito il modello per gli elementi in ListView in linea. Il modello è costituito da una griglia nella cui colonna sinistra mostriamo le foto. E nella colonna destra mostreremo il titolo dell'immagine con la relativa descrizione al di sotto. Gli elementi titolo e descrizione vengono visualizzati uno sotto l'altro.

      La proprietà Source dell'oggetto Image è specificata come {Binding Image} che la associa alla proprietà Image dell'oggetto Photo sottostante l'elemento. Analogamente, i due controlli TextBlock sono associati rispettivamente alle proprietà Title e Description dell'oggetto Photo sottostante l'elemento.

      Quando si usa Windows 8, lo stile dei due controlli TextBlock viene definito con due stili definiti in modo statico, in particolare TitleTextStyle e BodyTextStyle. Le definizioni di questi stili si trovano nel file StandardStyles.xaml del progetto. Per visualizzare questo file, nella finestra Esplora soluzioni espandi la cartella Comuni e fai doppio clic su StandardStyles.xaml).

      Quando si usa Windows 8.1, il file StandardStyles.xaml non è più presente e devono invece essere usati gli stili predefiniti TitleTextBlockStyle e BodyTextBlockStyle. Vedi Da Windows 8 a Windows 8.1 Preview iniziando con i modelli XAML.

    • Imposta l'origine degli elementi.

      Dopo la creazione dell'elenco di elementi, l'impostazione dell'origine degli elementi è un'operazione piuttosto semplice. In Visual Studio aggiungi il codice mostrato qui nel metodo OnNavigatedTo del file MainPage.xaml.cs.

      
       protected override void OnNavigatedTo(NavigationEventArgs e) 
              {
                  photoListView.ItemsSource = photos;
              }
      
      

      App di Windows 8 con ListView

Uso del controllo ListView in un layout griglia

In Visual Studio, nel file MainPage.xaml, aggiungi questo codice XAML tra il tag di apertura <ListView x:Name="photoListView" ItemsSource="{Binding}"> e il tag di chiusura </ListView>:


<ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="-1" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

Questo codice definisce il layout di ListView come controllo WrapGrid in un orientamento verticale. Il valore -1 per la proprietà MaximumRowsOrColumns è un valore speciale che non indica nessun massimo. Questo significa che verranno visualizzati tutti i controlli adattabili nell'altezza del controllo ListView.

ListView in azione

Layout raggruppato della visualizzazione elenco

In modo simile alla visualizzazione tabella raggruppata di iOS, anche il controllo ListView offre la possibilità di raggruppare elementi, come mostrato qui. Le foto sono raggruppate in base alla relativa categoria, in particolare Earth/Moon, Galaxies, Nebulae o Planets. Per altre informazioni sul layout raggruppato di elenchi, vedi Come raggruppare elementi in un elenco o una griglia.

Controllo ListView raggruppato

Argomenti correlati

Argomenti per sviluppatori iOS
Risorse per sviluppatori iOS
Controlli di Windows 8 per sviluppatori iOS
Guida dettagliata di Windows 8 per sviluppatori iOS
Argomenti relativi a ListView e GridView
Guida introduttiva: Aggiunta dei controlli ListView e GridView
Come aggiungere una visualizzazione elenco
Creazione di un semplice elenco in stile UITableView in Windows 8.1
Come raggruppare elementi in un elenco o una griglia
Guida introduttiva: Definizione dei layout
Classe ListView
Panoramica del data binding
Da Windows 8 a Windows 8.1 Preview iniziando con i modelli XAML

 

 

Mostra:
© 2014 Microsoft