[C# WPF] WPF MVVM 패턴 이용하여 TextBox 컨트롤 문자 입력 감지하기

안녕하세요.

 

오늘은 WPF에서 MVVM 패턴을 이용하여, TextBox 컨트롤에서 문자를 입력했을 때 감지하는 방법에 대해서 알려 드리려고 합니다.

 

쉽게 설명을 드리면, 제가 TextBox 컨트롤에 임의로 100 이상의 숫자를 입력을 하면 MessageBox 로 100 이상의 문자가 입력되었다는 메시지를 사용자에게 바로 보여주는 예제 프로그램을 만들려고 합니다.

 

그럼 실제로 소스 코드로 어떻게 위의 내용을 작업하는지 보여 드리도록 하겠습니다.

 

 

MVVM 패턴으로 소스코드를 작성할거니까 View, Model, ViewModel 각각의 xaml과 Class들이 있어야겠죠?

 

저는 Calculate 라는 Model 클래스 하나를 만들었고, 해당 Calculate 클래스에는 Num 이라는 숫자를 지징하는 변수를 하나 둬서 해당 변수를 이용하여 ViewModel 의 작업 내용을 소스코드로 작성하여 View에서 TextBox 컨트롤에 데이터 바인딩을 시켜 보도록 하겠습니다.

 

MainWindows.xaml

<Window x:Class="MVVMTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MVVMTest"
        xmlns:ViewModels="clr-namespace:MVVMTest.ViewModels"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="400">
    <Window.DataContext>
        <ViewModels:MainViewModel/>
    </Window.DataContext>
    
    <Grid>
        <TextBox x:Name="uiTb_Message" HorizontalAlignment="Left" 
                 Margin="150,123,0,0" Text="{Binding Number, Mode=TwoWay , UpdateSourceTrigger=PropertyChanged}"
                 TextWrapping="Wrap" 
                 VerticalAlignment="Top" Width="120"/>
 
    </Grid>
</Window>
 

 

MainWindowViewModel.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Windows;
 
namespace MVVMTest.ViewModels
{
    public class MainViewModel : INotifyPropertyChanged
    {
        Models.Calculate cal = null;
 
        public MainViewModel()
        {
            cal = new Models.Calculate();
        }
 
        public Models.Calculate CalculateModel
        {
            get
            {
                return cal;
            }
            set
            {
                cal = value;
            }
        }
 
        /// <summary>
        /// Number 프로퍼티
        /// </summary>
        public int Number
        {
            get
            {
                return CalculateModel.Num;
            }
            set
            {
                CalculateModel.Num = value;
                OnPropertyChanged("Number");
 
                CheckNumberRange(CalculateModel.Num);
            }
        }
 
        /// <summary>
        /// 숫자 범위 체크해주는 메서드
        /// </summary>
        /// <param name="number"></param>
        private void CheckNumberRange(int number)
        {
            if (number > 99 && number >= 0)
            {
                MessageBox.Show("숫자 범위를 초과하였습니다.");
            }
        }
 
        //PropertyChaneged 이벤트 선언 및 이벤트 핸들러
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
 

 

Calculate.cs

using System;
using System.Collections.Generic;
using System.Text;
 
namespace MVVMTest.Models
{
    public class Calculate
    {
        public int Num { get; set; }
    }
}
 

 

실행 결과

위와  같이 TextBox 컨트롤이 있고 이 컨트롤에 키보드로 100 이상의 숫자를 입력하게 되면 “정상 범위 값을 벗어났습니다.” 라는 메시지박스를 사용자에게 보여주는 것을 확인하실 수 있습니다.

 

위의 소스코드에서의 핵심은 TextBox 컨트롤 Binding을 할 때 Mode와 트리거 속성입니다.

 

이 부분을 추가하여야 Xaml과 비하인드 소스코드에서 바로바로 데이터 변경을 캐치할 수 있습니다.

 

글 읽어 주셔서 감사합니다.^^