ObservableCollection : Nedir, Ne işe yarar?

Merhaba arkadaşlar, bu yazımda .NET Framework’te yer alan özel bir koleksiyon sınıfı olan ‘ObservableCollection‘ hakkında bilgiler vermeye çalışacağım.

ObservableCollection Nedir?
ObservableCollection, System.Collections.ObjectModel namespace’i altında bulunan özel bir koleksiyon sınıfıdır. WPF, Windows Store ve Windows Phone uygulamalarında veri kaynağında oluşan değişiklikleri arayüze(UI) bildirme amaçlı kullanılır.

ObservableCollection’un yapısına baktığımızda Collection, INotifyPropertyChanged ve INotifyCollectionChanged sınıflarını base olarak kabul ettiğini göreceğiz.

ObservableCollection, generic veri tipini destekleyen bir koleksiyon olduğundan sadece tek bir tip veri barındırabilir.(ObservableCollection<T>)

 

Neden ObservableCollection?
Veri listelediğimiz herhangi bir sayfada veri kaynağında değişme olduğunda bir refresh ihtiyacı olmadan bu değişiklikleri ListBox, LongListSelector gibi kontrollere bildirir ve değişiklikler gerçekleşir. ListBox veya LongListSelector’ı yenilemek için kod yazma ihtiyacı ortadan kalkar.

Veri kaynağında gerçekleşen değişiklikler UI’a bildirilir.

 

1

Örnek Uygulama

Şimdi veri listelemeye, sonradan veri eklemeye dayanan basit bir örnek yapalım. Bu yazımda WPF üzerinden örnek vereceğim.

public class Person
    {
        public int personID { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }

        public static IEnumerable<Person> getPeople()
        {
            ObservableCollection<Person> People = new ObservableCollection<Person>();
            People.Add(new Person { personID = 1, Name = "Fatih Dumanlı", Title = "Jr. Software Developer" });
            People.Add(new Person { personID = 2, Name = "Hasan Hasan", Title = "Specialist" });
            People.Add(new Person { personID = 3, Name = "Ahmet Mehmet", Title = "Senior Software Developer" });

            return People;
        }
    }

Yukarda yapısını verdiğim sınıftan verileri bir listbox’ta görüntüleyelim.

Tasarım için de ben böyle birşey hazırladım :

3

 

<Window x:Class="ObservableCollectionOrnek.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="lstPeopleTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="20"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                    <RowDefinition Height="20"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Text="ID:" FontWeight="Bold" Grid.Row="0" Grid.Column="0"></TextBlock>
                <TextBlock Text="Name:" FontWeight="Bold" Grid.Row="1" Grid.Column="0"></TextBlock>
                <TextBlock Text="Title:" FontWeight="Bold" Grid.Row="2" Grid.Column="0"></TextBlock>
                <TextBlock Text="{Binding personID}" Grid.Row="0" Grid.Column="1"></TextBlock>
                <TextBlock Text="{Binding Name}" Grid.Row="1" Grid.Column="1"></TextBlock>
                <TextBlock Text="{Binding Title}" Grid.Row="2" Grid.Column="1"></TextBlock>
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding PeopleDataSource}" HorizontalAlignment="Left" Height="309" VerticalAlignment="Top" Width="305" Margin="212,0,0,0" ItemTemplate="{DynamicResource lstPeopleTemplate}">
            <ListBox.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </ListBox.BorderBrush>
        </ListBox>
        <TextBox x:Name="txtName" HorizontalAlignment="Left" Height="23" Margin="77,5,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <TextBox x:Name="txtTitle" HorizontalAlignment="Left" Height="23" Margin="77,33,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <TextBlock x:Name="tbName" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top"/>
        <TextBlock HorizontalAlignment="Left" Margin="10,34,0,0" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top"/>
        <Button x:Name="btnAddPerson" Content="Add to List" HorizontalAlignment="Left" Margin="10,61,0,0" VerticalAlignment="Top" Width="187"/>
    </Grid>
</Window>

 

MainWindow.xaml.cs:

namespace ObservableCollectionOrnek
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public static ObservableCollection<Person> PeopleDataSource { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            PeopleDataSource = new ObservableCollection<Person>(Person.getPeople());
            this.DataContext = this;
        }
    }
}

 

Uygulamayı bu haliyle çalıştırdığımızda sağ taraftaki ListBox’ta daha önceden hazırladığımız örnek verilerin listelendiğini göreceğiz.

4

 

Amacımız kişi bilgilerini girip add to list butonuna bastığımızda yeni kişinin sağdaki ListBox’a eklenmesi. Fakat burada dikkat edilmesi gereken nokta şudur ki : Person türündeki veriyi doğrudan ListBox’ın Items özelliğine değil ListBox’ın source’una yani PeopleDataSource adlı ObservableCollection‘a ekleyeceğiz.

O zaman Add To List butonu için bir click event handler oluşturup içini kodlayalım.

private void btnAddPerson_Click(object sender, RoutedEventArgs e)
{
    PeopleDataSource.Add(new Person { personID = PeopleDataSource.Count+1, Name = txtName.Text, Title = txtTitle.Text });
}

Şimdi Add To List butonuna basıldığında Person türündeki nesnenin ListBox’a eklendiğini göreceğiz.

5

 

Bu yazıda basitçe ObservableCollection’un ne işe yaradığına değindik ve basit bir uygulama yaptık. Faydalı olması dileğiyle…

Özet: Data bound sayfalarda Data Source’ta oluşan değişiklikleri standart generic
koleksiyonlar UI’a bildiremez. Data Source’ta oluşan değişiklikleri UI’a
bildirmek için ObservableCollection<T> kullanılır.Veri bağlarken kontrolün ObservableCollection‘a bind edilmesiyle kontrolü refresh etmek için ekstradan bir kod yazma ihtiyacı ortadan kalkar.

 

ObservableCollectionOrnek.rar (63KB)

Fazlasını Oku