Dela via

Visa kunder i en lista

Att visa och manipulera verkliga data i användargränssnittet är avgörande för funktionerna i många appar. Den här artikeln visar vad du behöver veta för att visa en samling kundobjekt i en lista.

Det här är inte en handledning. Om du vill ha det kan du läsa vår -självstudie om databindning, som ger dig en steg-för-steg guidad upplevelse.

Vi börjar med en snabb diskussion om databindning – vad det är och hur det fungerar. Sedan lägger vi till en ListView i användargränssnittet, lägger till databindning och anpassar databindningen med ytterligare funktioner.

Vad behöver du veta?

Databindning är ett sätt att visa en apps data i användargränssnittet. Detta möjliggör avgränsning av problem i din app, så att användargränssnittet hålls separat från din andra kod. Detta skapar en renare konceptuell modell som är lättare att läsa och underhålla.

Varje databindning har två delar:

  • En källa som tillhandahåller de data som ska bindas.
  • Ett mål i användargränssnittet där data visas.

Om du vill implementera en databindning måste du lägga till kod i din källa som tillhandahåller data till bindningen. Du måste också lägga till ett av två påläggstillägg i XAML för att ange egenskaperna för datakällan. Här är den viktigaste skillnaden mellan de två:

  • x:Bind är starkt skrivet och genererar kod vid kompileringstid för bättre prestanda. x:Bind är som standard en engångsbindning, vilket optimerar för snabb visning av skrivskyddade data som inte ändras.
  • Bindning är svagt typad och sammanställs vid körning. Detta resulterar i sämre prestanda än med x:Bind. I nästan alla fall bör du använda x:Bind i stället för Bindning. Det är dock troligt att du stöter på det i äldre kod. Bindningar är som standard enkelriktad dataöverföring, vilket optimerar för läsbehöriga data som kan ändras vid källan.

Vi rekommenderar att du använder x:Bind när det är möjligt, så visar vi det i kodfragmenten i den här artikeln. Mer information om skillnaderna hittar du i funktionsjämförelsen mellan {x:Bind} och {Binding}.

Skapa en datakälla

Först behöver du en klass för att representera dina kunddata. För att ge dig ett riktmärke visar vi processen med det här enkla exemplet:

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

Skapa en lista

Innan du kan visa några kunder måste du skapa listan för att lagra dem. Listvyn är en grundläggande XAML-kontroll som är perfekt för den här uppgiften. ListView kräver för närvarande en position på sidan och behöver snart ett värde för egenskapen ItemSource .

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

När du har bundit data till Din ListView rekommenderar vi att du återgår till dokumentationen och experimenterar med att anpassa dess utseende och layout efter dina behov.

Binda data till din lista

Nu när du har skapat ett grundläggande användargränssnitt för att lagra dina bindningar måste du konfigurera källan för att tillhandahålla dem. Här är ett exempel på hur detta kan göras:

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>

Översikten över databindning beskriver ett liknande problem i avsnittet om bindning till en samling objekt. Vårt exempel här visar följande viktiga steg:

  • I koden bakom användargränssnittet skapar du en egenskap av typen ObservableCollection<T> för att lagra dina kundobjekt.
  • Binda listvyns ItemSource- till den egenskapen.
  • Ange ett grundläggande ItemTemplate för ListView, som konfigurerar hur varje objekt i listan visas.

Titta gärna tillbaka på listvyn dokument om du vill anpassa layouten, lägga till objektval eller justera DataTemplate du precis har gjort. Men vad händer om du vill redigera dina kunder?

Redigera dina kunder via användargränssnittet

Du har visat kunder i en lista, men med databindning kan du göra mer. Vad händer om du kan redigera dina data direkt från användargränssnittet? För att göra detta ska vi först prata om de tre lägena för databindning:

  • Engångs: Den här databindningen aktiveras bara en gång och reagerar inte på ändringar.
  • Enkelriktad: Den här databindningen uppdaterar användargränssnittet med alla ändringar som gjorts i datakällan.
  • Tvåvägs: Den här databindningen uppdaterar användargränssnittet med eventuella ändringar som gjorts i datakällan och uppdaterar även data med eventuella ändringar som görs i användargränssnittet.

Om du har följt kodfragmenten från tidigare använder bindningen du gjorde x:Bindning och anger inte något läge, vilket gör det till en One-Time bindning. Om du vill redigera dina kunder direkt från användargränssnittet måste du ändra den till en Two-Way bindning, så att ändringar från data skickas tillbaka till kundobjekten. Databindning i detalj innehåller mer information.

Dubbelriktad bindning uppdaterar även användargränssnittet om datakällan ändras. För att detta ska fungera måste du implementera INotifyPropertyChanged på källan och se till att dess egenskapsuppsättningar genererar händelsen PropertyChanged . Vanlig praxis är att låta dem anropa en hjälpmetod som metoden OnPropertyChanged , som du ser nedan:

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));
}

Gör sedan texten i listvyn redigerbar genom att använda en textruta i stället för en TextBlock och se till att du anger Läget för dina databindningar till 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>

Ett snabbt sätt att se till att detta fungerar är att lägga till en andra ListView med TextBox-kontroller och OneWay-bindningar. Värdena i den andra listan ändras automatiskt när du redigerar den första.

Anmärkning

Att redigera direkt i en ListView är ett enkelt sätt att visa Two-Way bindning i praktiken, men kan leda till användbarhetskomplikationer. Om du vill ta appen vidare kan du överväga att använda andra XAML-kontroller för att redigera dina data och behålla ListView som endast visning.

Gå vidare

Nu när du har skapat en lista över kunder med tvåvägsbindning kan du gå tillbaka till de dokument som vi har länkat dig till och experimentera. Du kan också läsa vår självstudie om databindning om du vill ha en stegvis genomgång av grundläggande och avancerade bindningar, eller undersöka kontroller som list-/informationsmönstret för att skapa ett mer robust användargränssnitt.

Användbara API:er och dokument

Här är en snabb sammanfattning av API:er och annan användbar dokumentation som hjälper dig att komma igång med databindning.

Användbara API:er

API (gränssnitt för programmering av applikationer) Beskrivning
data mall Beskriver den visuella strukturen för ett dataobjekt, vilket möjliggör visning av specifika element i användargränssnittet.
x:Bind Dokumentation om det rekommenderade x:Bind-markeringstillägget.
bindning Dokumentation om det äldre markup-tillägget.
ListVy En användargränssnittskontroll som visar dataobjekt i en lodrät stack.
Textruta En grundläggande textkontroll för att visa redigerbara textdata i användargränssnittet.
INotifyPropertyChanged Gränssnittet för att göra data observerbara och tillhandahålla dem till en databindning.
ItemsControl Egenskapen ItemsSource för den här klassen tillåter att en ListView binder till en datakälla.

Användbara dokument

Ämne Beskrivning
Databindning på djupet En grundläggande översikt över databindningsprinciper
översikt över databindning Detaljerad konceptuell information om databindning.
Listvy Information om hur du skapar och konfigurerar en ListView, inklusive implementering av en DataTemplate

Användbara kodexempel

Kodexempel Beskrivning
En självstudie om data-bindning En stegvis guidad upplevelse genom grunderna i databindning.
ListView och GridView Utforska mer detaljerade ListViews med databindning.
QuizGame Se databindning i praktiken, inklusive klassen BindableBase (i mappen "Common" ) för en standardimplementering av INotifyPropertyChanged.
  • Last updated on