[WPF DevExpress] GridControl이 하위 객체 속성 변경이 UI에 반영되지 않을 때 해결방법

DevExpress의 GridControl과 함께 사용할 때, 하위 객체의 속성 변경이 UI에 반영되지 않는 문제를 겪는 경우가 있습니다.
GridControl에서 중첩 객체의 속성 바인딩은 매우 자주 사용됩니다.
Customer.Name, Product.Category.Name과 같은 구조를 바인딩할 때,
값은 잘 표시되지만 변경이 반영되지 않는 문제가 발생한다면 어떻게 해야 할까요?

이번 글에서는 그 상황을 재현해보고, 이를 해결할 수 있는 방법 두 가지에 대해 소개합니다.

---

시나리오

예를 들어 다음과 같이 Order와 Customer 클래스를 포함하는 구조가 있다고 가정합니다.
UI에서 변경을 감지할 수 있도록 INotifyPropertyChanged를 상속받는 BindableData도 만들었습니다.

public class BindableData : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    protected bool SetProperty<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, value)) {
            return false;
        }

        field = value;
        OnPropertyChanged(propertyName);
        return true;
    }
}

public class Customer : BindableData
{
    private string name;
    public string Name
    {
        get => name;
        set => SetProperty(ref name, value);
    }
}

public class Order : BindableData
{
    private int id;
    public int Id
    {
        get => id;
        set => SetProperty(ref id, value);
    }

    private Customer customer;
    public Customer Customer
    {
        get => customer;
        set => SetProperty(ref customer, value);
    }
}

그리고 ViewModel에서는 다음과 같이 간단한 주문 목록과 Customer Name을 변경하는 메서드를 제공합니다.

public class MainViewModel
{
    public virtual ObservableCollection<Order> Orders { get; set; }

    public MainViewModel()
    {
        Orders = new ObservableCollection<Order>
        {
            new Order { Id = 1, Customer = new Customer { Name = "홍길동" } },
            new Order { Id = 2, Customer = new Customer { Name = "김철수" } }
        };
    }

    public void ChangeCustomerName(string newValue)
    {
        Orders[0].Customer.Name = newValue;
    }
}

---

XAML 구성

GridControl을 사용하여 Order 목록을 바인딩합니다.
Customer의 이름도 컬럼으로 표시하고 있습니다:

<StackPanel>
    <dxg:GridControl MaxHeight="1000" ItemsSource="{Binding Orders}">
        <dxg:GridControl.Columns>
            <dxg:GridColumn FieldName="Id" Header="주문 번호"/>
            <dxg:GridColumn FieldName="Customer.Name" Header="고객 이름"/>
        </dxg:GridControl.Columns>
    </dxg:GridControl>

    <Button Content="이름 변경" Height="20" Width="100" HorizontalAlignment="Left"
            Click="Button_Click"/>
</StackPanel>

---

예상한 동작

• 이름 변경 버튼을 클릭하면 Customer.Name의 값인 'Hanav'가 '변경 완료!'로 변경되어 GridControl의 해당 셀도 함께 갱신되어야 합니다.

---

실제 동작

• Customer.Name이 변경되어도 GridControl은 UI를 갱신하지 않습니다.
• 데이터를 분명히 변경했음에도, 셀 내용이 그대로 유지되는 현상이 발생합니다.

---

해결 방법 1 – GridControl에 DetectNestedPropertyChanges 설정

이 문제는 GridControl에 다음과 같이
DetectNestedPropertyChanges="True" 속성을 추가하면 해결됩니다.

<dxg:GridControl DetectNestedPropertyChanges="True">
    ...
</dxg:GridControl>

이 속성을 설정하면 GridControl이 중첩된 객체의 PropertyChanged 이벤트도 자동으로 구독하게 됩니다.
따라서 Customer.Name이 변경되면 해당 셀을 갱신할 수 있게 됩니다.

---

해결 방법 2 - Binding={Binding Property, UpdateSourceTrigger=PropertyChanged}

GridColumn에 FieldName="Customer.Name" 대신 Binding="{Binding ...}"을 명시적으로 설정하면,
DevExpress는 내부적으로 WPF의 표준 바인딩 시스템을 그대로 따르게 됩니다.
즉, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, Converter 등을 사용할 수 있게 돼요.

<dxg:GridControl MaxHeight="1000" ItemsSource="{Binding Orders}">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Id" Header="주문 번호"/>
        <dxg:GridColumn Binding="{Binding Customer.Name, UpdateSourceTrigger=PropertyChanged}" Header="고객 이름"/>
    </dxg:GridControl.Columns>
</dxg:GridControl>

이 바인딩은 속성이 INotifyPropertyChanged를 구현하고 있다면
Customer.Name이 변경될 때 셀 내용도 즉시 갱신됩니다.

---

정리

항목	설명
문제	GridControl이 중첩 속성(Customer.Name)의 변경을 감지하지 못함
원인	내부 객체의 변경은 기본적으로 자동 추적되지 않음
해결	1. GridControl에 DetectNestedPropertyChanges="True" 설정
	2. Binding="{Binding ...}"을 명시적으로 설정