Sdílet prostřednictvím

Zobrazení zákazníků v seznamu

Zobrazení a manipulace se skutečnými daty v uživatelském rozhraní je zásadní pro funkčnost mnoha aplikací. Tento článek vám ukáže, co potřebujete vědět, abyste v seznamu zobrazili kolekci objektů Zákazníků.

Nejedná se o kurz. Pokud chcete jeden, podívejte se na náš kurz datové vazby, který vám poskytne zážitek s podrobným vedením krok za krokem.

Začneme rychlou diskuzí o datové vazbě – co je a jak funguje. Pak přidáme ListView do uživatelského rozhraní, přidáme datovou vazbu a přizpůsobíme datovou vazbu dalšími funkcemi.

Co potřebujete vědět?

Datová vazba je způsob, jak zobrazit data aplikace v uživatelském rozhraní. To umožňuje oddělení zájmů v aplikaci, čímž zůstává uživatelské rozhraní oddělené od ostatního kódu. Tím se vytvoří přehlednější koncepční model, který se snadněji čte a udržuje.

Každá datová vazba má dvě části:

  • Zdroj, který poskytuje data, která mají být svázaná.
  • Cíl v uživatelském rozhraní, kde se data zobrazují.

Pokud chcete implementovat datovou vazbu, budete muset do zdroje přidat kód, který do vazby poskytuje data. Budete také muset do XAML přidat jednu ze dvou značkových rozšíření, abyste mohli specifikovat vlastnosti zdroje dat. Tady je hlavní rozdíl mezi těmito dvěma:

  • x:Bind je silně typovaný a generuje kód během kompilace pro lepší výkon. x:Bind ve výchozím nastavení používá jednorázovou vazbu, která optimalizuje rychlé zobrazení dat jen pro čtení, která se nemění.
  • vazba je slabě typovaná a sestavená za běhu. Výsledkem je horší výkon než u x:Bind. Ve skoro všech případech byste měli místo Binding použít x:Bind. Pravděpodobně se na něj ale setkáte ve starším kódu. Vazba je standardně jednosměrný přenos dat, který optimalizuje data určená jen pro čtení, která se můžou změnit ve zdroji.

Doporučujeme použít x:Bind, kdykoli je to možné, a my ho zobrazíme v fragmentech kódu v tomto článku. Pro více informací o rozdílech se podívejte na porovnání funkcí {x:Bind} a {Binding}.

Vytvoření zdroje dat

Nejprve budete potřebovat třídu, která bude představovat vaše zákaznická data. Abychom vám poskytli referenční bod, ukážeme si proces na tomto základním příkladu:

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

Vytvoření seznamu

Než budete moct zobrazit všechny zákazníky, musíte vytvořit seznam, který je bude uchovávat. Zobrazení seznamu je základní ovládací prvek XAML, který je ideální pro tento úkol. Váš ListView aktuálně vyžaduje pozici na stránce a brzy bude potřebovat hodnotu pro jeho ItemSource vlastnost.

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

Jakmile máte svázaná data s objektem ListView, doporučujeme se vrátit do dokumentace a experimentovat s přizpůsobením jejího vzhledu a rozložení tak, aby vyhovovalo vašim potřebám.

Připojit data k vašemu seznamu

Teď, když jste vytvořili základní uživatelské rozhraní, které drží vaše vazby, musíte zdroj nakonfigurovat, abyste je mohli poskytovat. Tady je příklad toho, jak to může být provedeno:

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>

Přehled datových vazeb vás provede podobným problémem v jeho části o vazbě na kolekci položek. V našem příkladu vidíte následující zásadní kroky:

  • V kódu pozadí vašeho uživatelského rozhraní vytvořte vlastnost typu ObservableCollection<T> pro uložení objektů Customer.
  • Vytvořte vazbu objektu ListView ItemSource této vlastnosti.
  • Zadejte základní ItemTemplate pro ListView, který nakonfiguruje způsob zobrazení jednotlivých položek v seznamu.

Máte-li zájem přizpůsobit rozložení, přidat výběr položek nebo upravit DataTemplate, které jste právě vytvořili, podívejte se zpět na dokumentaci k Zobrazení seznamu. Ale co když chcete upravit své zákazníky?

Úprava zákazníků pomocí uživatelského rozhraní

V seznamu jste zobrazili zákazníky, ale datové vazby vám umožní dělat víc. Co když byste mohli data upravovat přímo z uživatelského rozhraní? Pojďme si nejprve promluvit o třech režimech datové vazby:

  • jednorázové: Tato datová vazba se aktivuje jenom jednou a nereaguje na změny.
  • jednosměrné: Tato datová vazba aktualizuje uživatelské rozhraní o všechny změny provedené ve zdroji dat.
  • obousměrné: Tato datová vazba aktualizuje uživatelské rozhraní všemi změnami provedenými ve zdroji dat a také aktualizuje data o všechny změny provedené v uživatelském rozhraní.

Pokud jste postupovali podle fragmentů kódu z předchozích verzí, vazba, kterou jste vytvořili, používá x:Bind a nezadá režim, takže se jedná o One-Time vazbu. Pokud chcete upravit zákazníky přímo z uživatelského rozhraní, budete ho muset změnit na Two-Way vazbu, aby se změny dat předávaly zpět do objektů Zákazník. Podrobný popis datové vazby, kde lze nalézt více informací.

Obousměrná vazba také aktualizuje uživatelské rozhraní, pokud se změní zdroj dat. Aby to fungovalo, musíte implementovat INotifyPropertyChanged na zdroj a zajistit, aby nastavovače jeho vlastností vyvolaly událost PropertyChanged. Běžným postupem je volat pomocnou metodu, jako je metoda OnPropertyChanged, jak je uvedeno níže:

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

Text v Objektu ListView pak upravte pomocí Textového pole místo TextBlock a ujistěte se, že jste na datových vazbách nastavili režimu na 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>

Rychlý způsob, jak zajistit, aby to fungovalo, je přidat druhý ListView s ovládacími prvky TextBox a vazbami OneWay. Hodnoty ve druhém seznamu se automaticky změní při úpravách prvního seznamu.

Poznámka:

Úprava přímo v ListView je jednoduchý způsob, jak zobrazit Two-Way vazbu v akci, ale může vést ke komplikacím v uživatelské přívětivosti. Pokud chcete aplikaci dál používat, zvažte použití jiných ovládacích prvků XAML, k úpravám dat, a ponechte listView jen pro zobrazení.

Jít dál

Teď, když jste vytvořili seznam zákazníků s obousměrnou vazbou, můžete se vrátit k dokumentům, se kterými jsme vás propojili, a experimentovat. Můžete si také projít náš kurz datových vazeb, pokud chcete podrobný návod na základní a pokročilé vazby, nebo prozkoumat ovládací prvky, jako je šablona seznam/podrobnosti, pro vytvoření robustnějšího uživatelského rozhraní.

Užitečná rozhraní API a dokumentace

Tady je stručný přehled rozhraní API a další užitečné dokumentace, které vám pomůžou začít pracovat s datovými vazbami.

Užitečná rozhraní API

API (rozhraní pro programování aplikací) Popis
šablona dat Popisuje vizuální strukturu datového objektu, která umožňuje zobrazení konkrétních prvků v uživatelském rozhraní.
x:Bind Dokumentace k doporučenému značkovacímu rozšíření x:Bind
Vazba Dokumentace ke staršímu rozšíření značek Binding
ListView Ovládací prvek uživatelského rozhraní, který zobrazuje datové položky ve svislém uspořádání.
Textové pole Základní textový ovládací prvek pro zobrazení upravitelných textových dat v uživatelském rozhraní.
INotifyPropertyChanged (oznámení o změně vlastnosti) Rozhraní pro umožnění viditelnosti dat, které je poskytováno datové vazbě.
ItemsControl Vlastnost ItemsSource této třídy umožňuje ListView vytvořit vazbu ke zdroji dat.

Užitečné dokumenty

Téma Popis
Datová vazba do hloubky Základní přehled principů datových vazeb
Přehled datových vazeb Podrobné koncepční informace o datové vazbě
zobrazení seznamu Informace o vytváření a konfiguraci Objektu ListView, včetně implementace dataTemplate

Užitečné ukázky kódu

Ukázka kódu Popis
Tutoriál datové vazby Podrobné zkušenosti se základy datových vazeb.
ListView a GridView Prozkoumejte složitější ListViews s datovou vazbou.
KvízováHra Prohlédněte si datovou vazbu v akci, včetně třídy BindableBase (ve složce Common) pro standardní implementaci INotifyPropertyChanged.
  • Last updated on