Condividi tramite

Visualizzare i clienti in un elenco

La visualizzazione e la modifica dei dati reali nell'interfaccia utente sono fondamentali per la funzionalità di molte app. Questo articolo illustra le informazioni necessarie per visualizzare una raccolta di oggetti Customer in un elenco.

Questa non è un'esercitazione. Se ne desideri una, consulta il nostro tutorial sul data binding , che fornirà un'esperienza guidata passo passo.

Si inizierà con una rapida descrizione del data binding: che cos'è e come funziona. Aggiungeremo quindi un ListView all'interfaccia utente, implementeremo l'associazione dati e la personalizzeremo con funzionalità aggiuntive.

Cosa c'è da sapere?

Il data binding è un modo per visualizzare i dati di un'app nell'interfaccia utente. Ciò consente separazione dei problemi nell'app, mantenendo l'interfaccia utente separata dall'altro codice. In questo modo viene creato un modello concettuale più pulito che è più facile da leggere e gestire.

Ogni data binding ha due parti:

  • La fonte che fornisce i dati da associare.
  • Destinazione nell'interfaccia utente in cui vengono visualizzati i dati.

Per implementare un'associazione dati, è necessario aggiungere codice alla sorgente che mette a disposizione i dati per il binding. Dovrai anche aggiungere una delle due estensioni di markup al codice XAML per specificare le proprietà dell'origine dati. Ecco la differenza principale tra i due:

  • x:Bind è fortemente tipizzato e genera codice in fase di compilazione per ottenere prestazioni migliori. Di default, x:Bind è un binding a una sola esecuzione, che ottimizza per la rapida visualizzazione di dati di sola lettura che non cambiano.
  • legatura è debolmente tipizzata e assemblata in fase di esecuzione. Ciò comporta prestazioni inferiori rispetto a x:Bind. In quasi tutti i casi, è consigliabile usare x:Bind invece di Binding. Tuttavia, è probabile che venga incontrato nel vecchio codice. L'associazione per impostazione predefinita utilizza un trasferimento di dati unidirezionale, ottimizzando così i dati di sola lettura che possono variare all'origine.

È consigliabile usare x:Bind quando possibile e verrà visualizzato nei frammenti di codice di questo articolo. Per altre informazioni sulle differenze, vedere confronto delle funzionalità {x:Bind} e {Binding}.

Creare un'origine dati

Prima di tutto, è necessaria una classe per rappresentare i dati del cliente. Per fornire un punto di riferimento, illustreremo il processo in questo esempio essenziale:

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

Creazione di un elenco

Prima di poter visualizzare tutti i clienti, è necessario creare l'elenco per conservarli. La visualizzazione elenco è un controllo XAML di base ideale per questa attività. Il controllo ListView richiede attualmente una posizione nella pagina e richiederà a breve 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 sperimentare la personalizzazione dell'aspetto e del layout in base alle proprie esigenze.

Associare i dati all'elenco

Dopo aver creato un'interfaccia utente di base per gestire le associazioni, è necessario configurare la sorgente per fornirle. 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 un problema simile, nella sezione relativa all'associazione a una raccolta di elementi. L'esempio seguente illustra i passaggi cruciali seguenti:

  • Nel code-behind dell'interfaccia utente, crea una proprietà di tipo ObservableCollection<T> per contenere gli oggetti 'Customer'.
  • Associare il ItemSource di listView a tale proprietà.
  • Specificare un ItemTemp late di base per ListView, che consente di configurare la modalità di visualizzazione di ogni elemento nell'elenco.

È possibile consultare la documentazione sulla visualizzazione elenco se si desidera personalizzare il layout, aggiungere la selezione degli articoli o modificare il DataTemplate appena creato. Ma cosa succede se vuoi modificare i tuoi clienti?

Modifica i Clienti tramite l'interfaccia utente

Hai visualizzato i clienti in un elenco, ma il data binding ti consente di fare di più. Cosa succede se è possibile modificare i dati direttamente dall'interfaccia utente? A tale scopo, si esaminerà prima di tutto le tre modalità di data binding:

  • "una sola volta": questo data binding si attiva una sola volta e non reagisce alle modifiche.
  • unidirezionale: questo data binding aggiornerà l'interfaccia utente ogni volta che vengono apportate modifiche all'origine dati.
  • Bidirezionale: Questo legame dati aggiornerà la UI con le modifiche apportate all'origine dati, e aggiornerà anche i dati con eventuali modifiche effettuate nella UI.

Se sono stati seguiti i frammenti di codice precedenti, l'associazione effettuata usa x:Bind e non specifica una modalità, rendendola un'associazione One-Time. Se vuoi modificare i tuoi clienti direttamente dall'interfaccia utente, dovrai modificarla in un binding Two-Way, in modo che le modifiche dai dati vengano passate agli oggetti Cliente. data binding in modo approfondito contiene altre informazioni.

Il binding bidirezionale aggiornerà anche l'interfaccia utente se l'origine dati viene modificata. Affinché ciò funzioni, è necessario implementare INotifyPropertyChanged nella sorgente e assicurarsi che i relativi metodi setter delle proprietà generino l'evento PropertyChanged. La pratica comune consiste nel far chiamare un metodo di supporto come il metodo 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 quindi modificabile il testo in ListView usando un TextBox anziché un TextBlocke assicurarsi di impostare la modalità sui data binding 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 assicurarsi che funzioni è aggiungere un secondo ListView con controlli TextBox e associazioni OneWay. I valori nel secondo elenco verranno modificati automaticamente durante la modifica della prima.

Annotazioni

La modifica direttamente all'interno di un controllo ListView è un modo semplice per mostrare Two-Way binding in azione, ma può causare complicazioni di usabilità. Se vuoi espandere la funzionalità della tua app, prendi in considerazione l'uso di altri controlli XAML per modificare i tuoi dati e mantenere ListView come sola visualizzazione.

Andare oltre

Ora che hai creato un elenco di clienti con binding bidirezionale, puoi tornare alla documentazione che ti abbiamo fornito e sperimentare. Puoi anche consultare la nostra esercitazione sul binding dei dati se desideri una guida passo-passo sui binding di base e avanzati, oppure esaminare controlli come il modello elenco/dettagli per realizzare un'interfaccia utente più solida.

API e documenti utili

Di seguito è riportato un breve riepilogo delle API e di altre utili documentazione che consentono di iniziare a usare il data binding.

API utili

API (Interfaccia di Programmazione delle Applicazioni) Descrizione
modello di dati Descrive la struttura visiva di un oggetto dati, consentendo la visualizzazione di elementi specifici nell'interfaccia utente.
x:Bind Documentazione sull'estensione di markup x:Bind consigliata.
Rilegatura Documentazione sull'estensione di markup binding precedente.
ListView Controllo dell'interfaccia utente che visualizza gli elementi di dati in uno stack verticale.
Casella di testo 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.
ControllaOggetti La proprietà ItemsSource di questa classe consente a un controllo ListView di associarsi a un'origine dati.

Documentazione utile

Argomento Descrizione
Associazione dati in profondità Panoramica di base dei principi di data binding
Panoramica del Data Binding Informazioni concettuali dettagliate sul data binding.
Visualizzazione Elenco Informazioni sulla creazione e configurazione di un ListView, inclusa l'implementazione di un DataTemplate

Esempi di codice utili

Esempio di codice Descrizione
esercitazione sull'associazione dati Un'esperienza guidata passo passo attraverso le nozioni di base dell'associazione dati.
ListView e GridView Esplorare visualizzazioni ListView più elaborate con il data binding.
QuizGame Vedere data binding in azione, inclusa la classe BindableBase (nella cartella "Common") per un'implementazione standard di INotifyPropertyChanged.
  • Last updated on