[C#] [WPF] TextBox의 실시간 Binding(바인딩)

결론부터 알려드리겠습니다.

Text="{Binding SomeProperty, UpdateSourceTrigger=PropertyChanged}"

---

 

 

WPF 개발을 하다 보면 Binding이 실시간으로 되지 않는 것 같은 느낌이 들 때가 있습니다.

간단한 예를 들어보겠습니다.

 

최대 10자까지 입력이 가능한 작은 메모장을 하나 만들어 보겠습니다.

이 프로그램의 가장 중요한 요소는 10자 이상 넘어가지 않도록 하는 것입니다.

(10자 이상 넘어갈 시 배경을 붉게 하여 표시해보도록 하겠습니다.)

 

<!-- MainWindow.xaml -->
<Window.Resources>
    <local:OverTenToColorConverter x:Key="OverTenToColorConverter"/>
</Window.Resources>

<Grid Background="{Binding OverTen, Converter={StaticResource ResourceKey=OverTenToColorConverter}}">
    <TextBox Width="100" Height="30" Text="{Binding SomeText}"/>
</Grid>

 

// OverTenToColorConverter.cs
class OverTenToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool overTen = (bool)value;
        if (overTen)
        {
            return new SolidColorBrush(Colors.Red);
        }
        else
        {
            return new SolidColorBrush(Colors.Transparent);
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

 

// SomeModel.cs
public class SomeModel : INotifyPropertyChanged
{
    private string someText;
    public string SomeText
    {
    	get { return someText; }
        set
        {
            if(value.Length > 10)
            {
            	OverTen = true;
            }
            else
            {
            	OverTen = false;
            }
            someText = value;
            NotifyPropertyChanged();
        }
    }

    private bool overTen;
    public bool OverTen
    {
    	get { return overTen; }
        set
        {
            overTen = value;
            NotifyPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    public void NotifyPropertyChanged([CallerMemberName] string name = null)
    {
    	if (!String.IsNullOrEmpty(name))
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}

 

// MainWindow.cs
public partial class MainWindow : Window
{
    SomeModel _viewModel;
    public MainWindow()
    {
        InitializeComponent();
        _viewModel = new SomeModel();
        this.DataContext = _viewModel;
    }
}

이때 TextBox에 텍스트를 10자 이상 입력하여도 아무런 변화가 나타나지 않습니다.

그러나 아무 일도 나타나지 않았다.

그 이유는 TextBox가 Focus를 잃을 때 바인딩 대상에게 값을 전달하기 때문입니다.

이러한 이유 때문에 입력되는 데이터에 대한 실시간 처리를 할 수 없었던 것입니다.

 

이때 TextBox의 바인딩 UpdateSourceTrigger 옵션을 PropertyChanged로 설정하면 해결이 가능합니다.

<TextBox Width="120" Height="20" Text="{Binding SomeText, UpdateSourceTrigger=PropertyChanged}"/>

붉다. 몹시 붉다.

 

전체 코드는 아래 링크에서 확인하실 수 있습니다.

https://github.com/Hyo-Seong/ChangeUpdateSourceTrigger

Hyo-Seong/ChangeUpdateSourceTrigger