[C# WPF] MVVM패턴 TextBox Enter눌렀을 때 Command (KeyBinding)

안녕하세요.

 

오늘은 WPF MVVM패턴에서 TextBox에서 특정 버튼을 눌렀을 때 ViewModel의 함수로 연결하는 방법에 대해 알아보도록 하겠습니다.

 

 

우선 View입니다.

<!-- MainWindow.xaml -->
<Window x:Class="WPF_TextBox_KeyBinding.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:WPF_TextBox_KeyBinding"
        mc:Ignorable="d"
        Title="MainWindow" Height="100" Width="300">
    <Grid>
        <TextBox Text="{Binding Id, UpdateSourceTrigger=PropertyChanged}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" FontSize="15">
            <TextBox.InputBindings>
                <KeyBinding Command="{Binding LoginCommand}" Key="Enter"/>
            </TextBox.InputBindings>
        </TextBox>
    </Grid>
</Window>

 

 

여기서 중요하게 보여야 할 부분은 두 가지입니다.

 

우선 첫 번째는 아래 코드입니다.

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

UpdateSourceTrigger의 자세한 설명은 chashtag.tistory.com/1 를 참고하시면 됩니다.

(간략하게 설명드리자면 UpdateSourceTrigger=PropertyChanged가 없으면 엔터를 눌렀을 때 텍스트가 비어있는 것처럼 보이게 됩니다.)

 

 

 

두 번째는 아래 코드입니다.

 

<TextBox.InputBindings>
    <KeyBinding Command="{Binding LoginCommand}" Key="Enter"/>
</TextBox.InputBindings>

KeyBinding은 특정 키가 눌렸을 때 Command를 호출해주는 부분입니다.

Key의 리스트는 자동완성으로도 알 수 있지만 아래 링크에 자세하게 설명되어 있습니다.

docs.microsoft.com/en-us/dotnet/api/system.windows.input.key?view=net-5.0

Key Enum (System.Windows.Input)

 

 

MainWindow.xaml.cs파일은 View와 ViewModel을 연결해 주는 역할뿐이므로 생략하도록 하겠습니다.

// MainWindow.xaml.cs
using System.Windows;

namespace WPF_TextBox_KeyBinding
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private MainWindowViewModel _viewModel;
        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new MainWindowViewModel();
            this.DataContext = _viewModel;
        }
    }
}

 

 

마지막으로 ViewModel입니다.

 

ViewModel에서는 View에서 연결하려고 하는 Command를 선언하고, 해당 Command가 불렸을 때 어떤 함수(Action)로 연결해줄 것인지 선언합니다.

 

해당 Action 또한 정의하여야겠지요.

 

여기에선 Command가 LoginCommand이고, Action이 Login입니다.

(실제로 로그인 기능을 구현하진 않았습니다.)

// MainWindowViewModel.cs
using Prism.Commands;
using Prism.Mvvm;
using System.Windows;

namespace WPF_TextBox_KeyBinding
{
    public class MainWindowViewModel : BindableBase
    {
        private string _id;
        public string Id
        {
            get => _id;
            set => SetProperty(ref _id, value);
        }

        public DelegateCommand LoginCommand { get; private set; }
        
        public MainWindowViewModel()
        {
            LoginCommand = new DelegateCommand(Login);
        }

        private void Login()
        {
            // ViewModel에서 MessageBox를 사용하는 것은 좋지 않지만 이해를 돕기위해 MessagegBox를 사용하였습니다.
            MessageBox.Show("Id: " + Id);
        }
    }
}

 

 

여기까지 잘 따라오셨다면 결과도 한번 확인해 보도록 하겠습니다.

적당한 text를 입력하고 Enter키를 입력하면 입력한 내용이 MessageBox에 출력되는 것을 확인하실 수 있습니다.

(Enter키를 제외한 Text가 출력됩니다.)

 

 

 

오늘도 도움이 되셨길 바랍니다.

 

감사합니다.