Visualizzare i clienti in un elenco

Visualizzare e manipolare i dati reali nell'interfaccia utente è essenziale per la funzionalità di molte app. Questo articolo illustra le informazioni necessarie per visualizzare una raccolta di oggetti cliente in un elenco.

Non si tratta di un'esercitazione. Vedere in proposito l'esercitazione sul data binding, che offre un'esperienza guidata dettagliata.

Si inizia con una descrizione rapida del data binding: cos'è e come funziona. Quindi verrà aggiunto un controllo ListView all'interfaccia utente, verrà aggiunto il data binding che verrà personalizzato con funzionalità aggiuntive.

Cosa sapere.

Il data binding è un modo per visualizzare i dati di un'app nella relativa interfaccia utente. Questo consente la suddivisione delle problematiche nell'app, mantenendo l'interfaccia utente separata dal resto del codice. In questo modo si crea un modello concettuale più pulito e semplice da leggere e da gestire.

Ogni data binding è costituito da due parti:

• Un'origine che fornisce i dati per il binding.
• Una destinazione nell'interfaccia utente in cui vengono visualizzati i dati.

Per implementare un data binding, è necessario aggiungere codice all'origine che fornisce i dati per il binding. È anche necessario aggiungere una di due estensioni di markup al codice XAML per specificare le proprietà dell'origine dati. Ecco la differenza principale tra le due estensioni:

• x:Bind è fortemente tipizzata e genera il codice in fase di compilazione per garantire prestazioni migliori. L'impostazione predefinita di x:Bind è un binding una tantum, che ottimizza la visualizzazione rapida dei dati di sola lettura che non cambiano.
• Binding ha una tipizzazione debole e viene assemblata in fase di esecuzione. Ne risultano prestazioni inferiori rispetto a x:Bind. Nella maggior parte dei casi, è consigliabile usare x:Bind anziché Binding. Tuttavia, è probabile ritrovarla nel codice meno recente. L'impostazione predefinita di Binding è un trasferimento dati unidirezionale, che ottimizza i dati di sola lettura che possono cambiare all'origine.

È consigliabile usare x:Bind quando possibile. L'estensione viene illustrata nei frammenti di codice riportati in questo articolo. Per altre informazioni sulle differenze, vedere Confronto delle funzionalità di {x:Bind} e {Binding}.

Creare un'origine dati

Prima di tutto, scegliere una classe per rappresentare i dati dei clienti. Come punto di riferimento, viene illustrato il processo in questo esempio essenziale:

public class Customer
{
    public string Name { get; set; }
}

Creazione di un elenco

Prima di poter visualizzare i clienti, occorre creare l'elenco che deve contenerli. Visualizzazione elenco è un controllo XAML di base ideale per questa attività. Il controllo ListView attualmente richiede una posizione nella pagina e richiederà presto un valore per la relativa proprietà ItemSource.

<ListView ItemsSource=""
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>

Dopo aver associato i dati a ListView, è consigliabile tornare alla documentazione e provare a personalizzarne l'aspetto e il layout in base alle esigenze.

Binding dei dati all'elenco

Dopo aver creato un'interfaccia utente di base per contenere i binding, configurare l'origine che li fornisce. Ecco un esempio di come eseguire questa operazione:

public sealed partial class MainPage : Page
{
    public ObservableCollection<Customer> Customers { get; }
        = new ObservableCollection<Customer>();

    public MainPage()
    {
        this.InitializeComponent();
          // Add some customers
        this.Customers.Add(new Customer() { Name = "NAME1"});
        this.Customers.Add(new Customer() { Name = "NAME2"});
        this.Customers.Add(new Customer() { Name = "NAME3"});
    }
}

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

La Panoramica del data binding illustra in modo dettagliato un problema simile, nella relativa sezione sul binding a una raccolta di elementi. L'esempio seguente illustra questi passaggi fondamentali:

• Nel code-behind dell'interfaccia utente creare una proprietà di tipo ObservableCollection<T> per contenere gli oggetti Customer.
• Associare l'oggetto ItemSource del controllo ListView a tale proprietà.
• Specificare un ItemTemplate di base per il controllo ListView, che configura la modalità di visualizzazione di ogni elemento nell'elenco.

Per personalizzare il layout, aggiungere la selezione di elementi o modificare il DataTemplate appena creato, non esitare a rileggere la documentazione di Visualizzazione elenco. Modifica dei clienti.

Modificare i clienti tramite l'interfaccia utente

I clienti sono stati visualizzati in un elenco, ma il data binding consente di fare di più. È possibile modificare i dati direttamente dall'interfaccia utente? A tale scopo, verranno analizzate innanzitutto le tre modalità di data binding:

• One-Time: questo data binding viene attivato una sola volta e non reagisce alle modifiche.
• One-Way: questo tipo di data binding aggiorna l'interfaccia utente con le modifiche apportate all'origine dati.
• Two-Way: questo tipo di data binding aggiorna l'interfaccia utente con le modifiche apportate all'origine dati e inoltre aggiorna i dati con le modifiche apportate all'interno dell'interfaccia utente.

Nei frammenti di codice visti in precedenza, il binding eseguito usa x:Bind e non specifica una modalità; si tratta quindi di un binding One-Time. Per modificare i clienti direttamente dall'interfaccia utente, è necessario renderlo un binding Two-Way, in modo che le modifiche apportate dai dati passino agli oggetti cliente. Per altre informazioni, vedere Informazioni approfondite sul data binding.

Il binding Two-Way aggiorna anche l'interfaccia utente se l'origine dati viene modificata. A tale scopo, implementare INotifyPropertyChanged sull'origine e verificare che i setter di proprietà generino l'evento PropertyChanged. È pratica comune fare in modo che chiamino un metodo helper come OnPropertyChanged, come illustrato di seguito:

public class Customer : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
                {
                    _name = value;
                    this.OnPropertyChanged();
                }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string propertyName = null) =>
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Rendere poi modificabile il testo del controllo ListView tramite TextBox anziché TextBlock e assicurarsi che Mode nei data binding sia impostato su TwoWay.

<ListView ItemsSource="{x:Bind Customers}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Customer">
            <TextBox Text="{x:Bind Name, Mode=TwoWay}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Un modo rapido per garantire il funzionamento consiste nell'aggiungere un secondo controllo ListView con controlli TextBox e binding impostati su OneWay. I valori del secondo elenco cambiano automaticamente quando il primo viene modificato.

Nota

Apportare modifiche direttamente all'interno di ListView è un modo semplice per vedere il binding Two-Way in azione, ma può portare a problemi di usabilità. Per sviluppare ulteriormente l'app, è consigliabile usare altri controlli XAML per modificare i dati e mantenere ListView per la sola visualizzazione.

Approfondimenti

Dopo la creazione di un elenco di clienti con un binding Two-Way, rivedere i documenti indicati nei collegamenti e fare alcune prove. Vedere anche l'esercitazione sul data binding per una procedura dettagliata su binding di base e avanzati o per analizzare controlli come il modello elenco/dettagli per creare un'interfaccia utente più affidabile.

API e documentazione utili

Di seguito un breve riepilogo delle API e di altra documentazione utile per iniziare a usare il data binding.

API utili

API	Descrizione
Modello di dati	Descrive la struttura visiva di un oggetto dati, consentendo la visualizzazione di elementi specifici nell'interfaccia utente.
x:Bind	Documentazione relativa all'estensione di markup x:Bind consigliata.
Binding	Documentazione relativa all'estensione di markup Binding precedente.
ListView	Controllo dell'interfaccia utente per la visualizzazione di elementi di dati in uno stack verticale.
TextBox	Controllo di testo di base per la visualizzazione di dati di testo modificabili nell'interfaccia utente.
INotifyPropertyChanged	Interfaccia per rendere osservabili i dati, fornendoli a un data binding.
ItemsControl	La proprietà ItemsSource di questa classe consente un controllo ListView di eseguire il binding a un'origine dati.

Documentazione utile

Argomento	Descrizione
Informazioni approfondite sul data binding	Panoramica di base dei principi del data binding
Panoramica del data binding	Informazioni concettuali dettagliate sul data binding.
Visualizzazione elenco	Informazioni sulla creazione e configurazione di un controllo ListView, inclusa l'implementazione di un DataTemplate

Esempi utili di codice

Esempio di codice	Descrizione
Esercitazione sul data binding	Presentazione guidata dettagliata dei concetti di base del data binding.
ListView e GridView	Esplorare controlli ListView più elaborati con il data binding.
QuizGame	Vedere il data binding in azione, inclusa la classe BindableBase, nella cartella "Common", per un'implementazione standard di INotifyPropertyChanged.