Müşterileri listede görüntüleme

Kullanıcı arabiriminde gerçek verileri görüntülemek ve işlemek, birçok uygulamanın işlevselliği için çok önemlidir. Bu makalede, bir müşteri nesneleri koleksiyonunu listede görüntülemek için bilmeniz gerekenler gösterilir.

Bu bir öğretici değildir. Eğer bir tane istiyorsanız, size adım adım kılavuzlu bir deneyim sağlayacak veri bağlama öğreticimizebakın.

Veri bağlamanın ne olduğu ve nasıl çalıştığı hakkında hızlı bir tartışmayla başlayacağız. Ardından kullanıcı arabirimine bir ListView ekleyecek, veri bağlaması ekleyeceğiz ve ek özelliklerle veri bağlamayı özelleştireceğiz.

Ne bilmeniz gerekiyor?

Veri bağlama, bir uygulamanın verilerini kullanıcı arabiriminde görüntülemenin bir yoludur. Bu, uygulamanızda kapsamların ayrılmasına olanak tanır ve kullanıcı arayüzünüzü diğer kodlarınızdan ayrı tutar. Bu, okunmasını ve bakımının daha kolay olduğu daha temiz bir kavramsal model oluşturur.

Her veri bağlamanın iki parçası vardır:

• Bağlanacak verileri sağlayan bir kaynak.
• Kullanıcı arabiriminde verilerin görüntülendiği hedef.

Veri bağlaması uygulamak için kaynağınıza bağlamaya veri sağlayan kod eklemeniz gerekir. Veri kaynağı özelliklerini belirtmek için XAML'nize iki işaretleme uzantısından birini de eklemeniz gerekir. İkisi arasındaki önemli fark şu şekildedir:

• x:Bind güçlü bir şekilde yazılmıştır ve daha iyi performans için derleme zamanında kod üretir. x:Bind varsayılan olarak tek seferlik bir bağlamaya sahiptir ve bu da değişmeyen salt okunur verilerin hızlı görüntülenmesi için iyileştirir.
• Bağlama, çalışma zamanında zayıf bir şekilde türlenip bir araya getirilir. Bu, x:Bind değerinden daha düşük performansa neden olur. Neredeyse tüm durumlarda Bağlama yerine x:Bind kullanmanız gerekir. Ancak, büyük olasılıkla eski kodda karşılaşırsınız. Bağlama varsayılan olarak tek yönlü veri aktarımı yapar ve bu, kaynakta değişebilen salt okunur veriler için bir optimizasyon sağlar.

Mümkün olduğunda x:Bind kullanmanızı öneririz ve bunu bu makaledeki kod parçacıklarında göstereceğiz. Farklılıklar hakkında daha fazla bilgi için bkz. {x:Bind} ve {Binding} özellik karşılaştırması.

Veri kaynağı oluşturun

İlk olarak, Müşteri verilerinizi temsil etmek için bir sınıfa ihtiyacınız olacaktır. Size bir referans noktası vermek için bu çıplak kemik örneğinde işlemi göstereceğiz:

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

Liste oluştur

Herhangi bir müşteriyi görüntüleyebilmeniz için önce, bu müşterileri tutmak için listeyi oluşturmanız gerekir. Liste Görünümü, bu görev için ideal olan temel bir XAML denetimidir. ListView'unuz şu anda sayfada bir konum gerektirir ve kısa süre içinde ItemSource özelliği için bir değere ihtiyaç duyar.

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

ListView'unuza veri bağladıktan sonra belgelere dönmenizi ve görünüm ve düzenini ihtiyaçlarınıza en uygun şekilde özelleştirmeyi denemenizi öneririz.

Verileri listenize bağlama

Artık bağlamalarınızı tutmak için temel bir kullanıcı arabirimi oluşturduğunuza göre, kaynağınızı bunları sağlayacak şekilde yapılandırmanız gerekir. Bunun nasıl yapilabileceğini gösteren bir örnek aşağıda verilmişti:

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>

Veri Bağlamaya genel bakış, bir öğe koleksiyonuna bağlamayla ilgili bölümünde benzer bir sorunda size yol gösterir. Buradaki örneğimizde aşağıdaki önemli adımlar gösterilmektedir:

• Kullanıcı arabiriminizin arkasındaki kodda, Müşteri nesnelerinizi tutmak için ObservableCollection<T> türünde bir özellik oluşturun.
• ListView'unuzun ItemSource değerini bu özelliğe bağlayın.
• ListView için listedeki her öğenin nasıl görüntüleneceğini yapılandıracak temel bir ItemTemplate sağlayın.

Düzeni özelleştirmek, öğe seçimi eklemek veya az önce yaptığınız Veri Şablonu'u ayarlamak istiyorsanız Liste Görünümü dokümanlarına göz atabilirsiniz. Peki müşterilerinizi düzenlemek istiyorsanız ne olacak?

Kullanıcı arabirimi aracılığıyla Müşterilerinizi düzenleme

Müşterileri listede görüntülediniz, ancak veri bağlama daha fazlasını yapmanıza olanak tanır. Verilerinizi doğrudan kullanıcı arabiriminden düzenleyebilirseniz ne olur? Bunu yapmak için öncelikle üç veri bağlama modundan bahsedelim:

• Tek Seferlik: Bu veri bağlama yalnızca bir kez etkinleştirilir ve değişikliklere tepki vermez.
• Tek Yönlü: Bu veri bağlama, kullanıcı arabirimini veri kaynağında yapılan tüm değişikliklerle güncelleştirir.
• İki Yönlü: Bu veri bağlama, kullanıcı arabirimini veri kaynağında yapılan tüm değişikliklerle güncelleştirir ve ayrıca kullanıcı arabiriminde yapılan değişikliklerle de verileri güncelleştirir.

Kod parçacıklarını daha önce takip ettiyseniz, yaptığınız bağlama x:Bind kullanır ve bir mod belirtmez ve bunu bir One-Time bağlaması haline getirir. Müşterilerinizi doğrudan kullanıcı arabiriminden düzenlemek istiyorsanız, verilerden gelen değişikliklerin Müşteri nesnelerine geri geçirilmesi için bunu bir Two-Way bağlamasına değiştirmeniz gerekir. Ayrıntılı veri bağlama daha fazla bilgi içerir.

İki yönlü bağlama, veri kaynağı değiştirilirse kullanıcı arabirimini de güncelleştirir. Bu işin çalışması için, kaynakta INotifyPropertyChanged uygulamanız ve özellik ayarlayıcılarının PropertyChanged olayını tetiklediğinden emin olmanız gerekir. Yaygın uygulama, aşağıda gösterildiği gibi OnPropertyChanged yöntemi gibi bir yardımcı yöntemi çağırmalarını sağlamaktır:

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

Ardından TextBlock yerine TextBox kullanarak ListView'unuzda metni düzenlenebilir hale getirin ve veri bağlamalarınızdaki ModuTwoWay olarak ayarladığınızdan emin olun.

<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>

Bunun işe yaramasını sağlamanın hızlı bir yolu, TextBox denetimleri ve OneWay bağlamalarıyla ikinci bir ListView eklemektir. İkinci listedeki değerler, siz ilkini düzenledikçe otomatik olarak değişir.

Uyarı

Doğrudan ListView içinde düzenleme yapmak, Two-Way bağlamayı çalışır durumda göstermenin basit bir yoludur, ancak kullanılabilirlik komplikasyonlarına yol açabilir. Uygulamanızı daha ileriye götürmek istiyorsanız verilerinizi düzenlemek diğer XAML denetimlerini kullanmayı ve ListView'unuzu yalnızca görüntüleme olarak tutmayı göz önünde bulundurun.

Daha Fazla

Artık iki yönlü bağlamaya sahip bir müşteri listesi oluşturduğunuza göre, sizi bağladığımız belgeleri tekrar gözden geçirip denemeler yapmaktan çekinmeyin. Ayrıca veri bağlama öğreticimize göz atabilir temel ve gelişmiş bağlamaların adım adım izlenecek bir adım adım izlenecek yolu veya daha sağlam bir kullanıcı arabirimi oluşturmak için listesi/ayrıntılar deseni gibi denetimleri araştırabilirsiniz.

Yararlı API'ler ve belgeler

Veri Bağlama ile çalışmaya başlamanıza yardımcı olacak API'lerin ve diğer yararlı belgelerin hızlı bir özeti aşağıda verilmiştir.

Yararlı API'ler

Uygulama Programlama Arayüzü (API)	Açıklama
Veri şablonu	Kullanıcı arabiriminde belirli öğelerin görüntülenmesine olanak sağlayan bir veri nesnesinin görsel yapısını açıklar.
x:Bind	Önerilen x:Bind işaretleme uzantısıyla ilgili belgeler.
Bağlama	Eski Binding işaretleme uzantısına ilişkin belgeler.
ListView	Veri öğelerini dikey yığında görüntüleyen kullanıcı arabirimi denetimi.
Metin Kutusu	Kullanıcı arabiriminde düzenlenebilir metin verilerini görüntülemek için temel bir metin denetimi.
INotifyPropertyChanged	Verileri gözlemlenebilir hale getirip veri bağlamaya sunan arabirim.
ItemsControl	Bu sınıfın ItemsSource özelliği, ListView'un bir veri kaynağına bağlanmasına izin verir.

Yararlı belgeler

Konu	Açıklama
Ayrıntılı Veri Bağlama	Veri bağlama ilkelerine temel bir genel bakış
Veri Bağlamaya genel bakış	Veri bağlama hakkında ayrıntılı kavramsal bilgiler.
Liste Görünümü	DataTemplate uygulaması dahil olmak üzere ListView oluşturma ve yapılandırma hakkında bilgi

Yararlı kod örnekleri

Kod örneği	Açıklama
Veri bağlama öğreticisi	Veri bağlamanın temelleri boyunca adım adım kılavuzlu bir deneyim.
ListView ve GridView	Veri bağlama ile daha ayrıntılı ListView'ları keşfedin.
QuizGame	BindableBase sınıfı (''Ortak'' klasöründe) dahil olmak üzere, INotifyPropertyChangediçin standart bir uygulaması olan veri bağlamanın işleyişini görün.