[C#] WPF에 대해서 알아보자 #3 INotifyPropertyChanged, INotifyCollectionChanged

속성이 변경되기 시작할때 이벤트를 발생시켜야 하는 경우 (이벤트에 대한 응답 또는 웹 서비스에서 오는 데이터..) 로 인해 속성이 변경되면 해당 속성에 바인딩된 컨트롤이 업데이트 되지 않는다. 이때 사용하는 것이 INotifyPropertyChanged이다.  

 

챗GPT를 통해 대략적으로 정리해본내용

ObservableCollection 클래스의 oncollectionChanged 이벤트에 콜렉션 변경시 요청을 추가하여 구현. 

 

 

 

아래는 챗 GPT의 응답.

 

INotifyCollectionChanged와 INotifyPropertyChanged는 .NET 프레임워크에서 데이터 바인딩을 구현하는 데 사용되는 인터페이스입니다.

INotifyCollectionChanged 인터페이스는 컬렉션에서 항목이 추가, 제거, 수정될 때 UI에 알리는 데 사용됩니다. 이 인터페이스를 구현하면 ObservableCollection 클래스와 같은 컬렉션을 사용할 때 항목이 추가, 제거, 수정될 때 UI가 자동으로 업데이트됩니다. INotifyCollectionChanged 인터페이스는 CollectionChanged 이벤트를 제공합니다. 이 이벤트는 컬렉션에서 항목이 추가, 제거, 수정될 때 발생하며, UI 요소는 이 이벤트를 구독하여 자동으로 업데이트됩니다.

예를 들어, ObservableCollection 클래스를 사용하여 컬렉션을 정의하고 데이터 바인딩을 설정할 때 INotifyCollectionChanged 인터페이스를 자동으로 구현할 수 있습니다.

public class MyViewModel
{
   public ObservableCollection<string> Items { get; set; }
}

INotifyPropertyChanged 인터페이스는 객체에서 속성 값이 변경될 때 UI에 알리는 데 사용됩니다. 이 인터페이스를 구현하면 ViewModel에서 속성 값이 변경될 때 UI가 자동으로 업데이트됩니다. INotifyPropertyChanged 인터페이스는 PropertyChanged 이벤트를 제공합니다. 이 이벤트는 ViewModel에서 속성 값이 변경될 때 발생하며, UI 요소는 이 이벤트를 구독하여 자동으로 업데이트됩니다.

예를 들어, 다음과 같이 ViewModel 클래스를 정의하고 INotifyPropertyChanged 인터페이스를 구현할 수 있습니다.

 

public class MyViewModel : INotifyPropertyChanged
{
   private string _name;
   
   public string Name
   {
      get { return _name; }
      set
      {
         _name = value;
         OnPropertyChanged("Name");
      }
   }
   
   public event PropertyChangedEventHandler PropertyChanged;
   
   protected virtual void OnPropertyChanged(string propertyName)
   {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
}

INotifyCollectionChanged 인터페이스는 컬렉션에서 항목이 추가, 제거, 수정될 때 UI에 알리는 데 사용되는 인터페이스입니다. 이 인터페이스를 구현하면 ObservableCollection 클래스와 같은 컬렉션을 사용할 때 항목이 추가, 제거, 수정될 때 UI가 자동으로 업데이트됩니다.

INotifyCollectionChanged 인터페이스는 CollectionChanged 이벤트를 제공합니다. 이 이벤트는 컬렉션에서 항목이 추가, 제거, 수정될 때 발생하며, UI 요소는 이 이벤트를 구독하여 자동으로 업데이트됩니다.

다음은 INotifyCollectionChanged 인터페이스를 구현한 ObservableCollection 클래스의 예입니다.

using System.Collections.ObjectModel;
using System.Collections.Specialized;

public class MyObservableCollection<T> : ObservableCollection<T>
{
   public MyObservableCollection() : base()
   {
   }

   public MyObservableCollection(IEnumerable<T> collection) : base(collection)
   {
   }

   protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
   {
      base.OnCollectionChanged(e);
   }
}

 

위의 코드에서는 ObservableCollection 클래스를 상속하고 OnCollectionChanged 메서드를 오버라이드하여 CollectionChanged 이벤트를 발생시킵니다. 이 클래스를 사용하면 컬렉션에서 항목이 추가, 제거, 수정될 때 UI가 자동으로 업데이트됩니다.

아래는 INotifyCollectionChanged 인터페이스를 구현한 예제 코드입니다.

 

using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;

public class MyViewModel : INotifyPropertyChanged
{
   public MyViewModel()
   {
      Items = new MyObservableCollection<string>();
      Items.CollectionChanged += Items_CollectionChanged;
   }

   private MyObservableCollection<string> _items;
   public MyObservableCollection<string> Items
   {
      get { return _items; }
      set
      {
         _items = value;
         OnPropertyChanged("Items");
      }
   }

   private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
   {
      // Handle collection changed event here.
   }

   public event PropertyChangedEventHandler PropertyChanged;

   protected virtual void OnPropertyChanged(string propertyName)
   {
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
}

 

위의 코드에서는 MyViewModel 클래스에서 MyObservableCollection<T> 클래스를 사용하여 Items 속성을 정의하고, CollectionChanged 이벤트를 구독합니다. Items_CollectionChanged 메서드에서는 컬렉션에서 항목이 추가, 제거, 수정될 때 처리할 코드를 작성합니다. ObservableCollection 클래스와 마찬가지로 이 클래스를 사용하면 컬렉션에서 항목이 추가, 제거, 수정될 때 UI가 자동으로 업데이트됩니다.

<Grid>
    <TextBlock HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="Search"/>
    <TextBox HorizontalAlignment="Left" Height="23" Margin="83,9,0,0" TextWrapping="Wrap" Name="textBox" Text="" VerticalAlignment="Top" Width="399" TextChanged="TextBox_TextChanged"/>
    <DataGrid HorizontalAlignment="Left" Height="403" Margin="10,37,0,0" VerticalAlignment="Top" Width="320" Name="dataGrid"/>
    <Border
        DataContext="{Binding SelectedItem, ElementName=dataGrid}"
        BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="403" Margin="335,37,0,0" VerticalAlignment="Top" Width="147" Background="Wheat">
        <StackPanel Margin="10">
        <TextBlock Text="Prodeuct Details"
            FontWeight="Bold"
            FontSize="16"
            HorizontalAlignment="Center"
            Margin="10"/>
        <TextBlock Text="Title"/>
        <TextBox Text="{Binding Title, Mode=TwoWay}"/>
        <TextBlock Text="Price"/>
        <TextBox Text="{Binding Price, Mode=TwoWay}"/>
        <TextBlock Text="Color"/>
        <TextBox Text="{Binding Color, Mode=TwoWay}"/>
        <Border Background="{Binding Color}" Height="10"/>
        <TextBlock Text="Reference"/>
        <TextBox Text="{Binding Reference, Mode=TwoWay}"/>
        </StackPanel>
    </Border>
</Grid>