WPF DataGrid에서 CommandBinding을 만드는 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2021-12-01 15:46 조회 2,974회 댓글 0건

본문

관련링크

MVVM 디자인 패턴에 따라 WPF 응용 프로그램을 개발하는 경우에는 결국 명령을 바인딩하기 위한 요구 사항이 발생합니다. MVVM을 사용하면 일반적으로 XAML 페이지 뒤에 click 이벤트 등과 같은 코드를 작성하지 않습니다. Microsoft Interactivity 라이브러리 덕분에 UI 컨트롤을 위해 뷰 모델에 click 이벤트를 바인딩할 수 있습니다. 아래 내용에서는 Interactivity 라이브러리를 사용하여 ComponentOne FlexGrid for WPF에서 명령 바인딩을 구현하는 방법에 대해 살펴보겠습니다.

MVVM 프로젝트 만들기

먼저, 아주 간단한 MVVM 프로젝트의 기본 골격을 만들어 보겠습니다. 새 WPF 프로젝트 "CommandBinding"을 만들고 폴더 3개(View, Model, ViewModel)를 추가합니다. 그런 다음 "Model" 폴더 아래에 "Employee"라는 새 클래스를 추가합니다. 이는 도메인 엔터티로, 몇 가지 속성을 포함하고 있습니다.

namespace CommandBinding.Model{
  class Employee{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
  }
}

"DelegateCommand"라고 하는 ICommand 구현을 위한 클래스를 "ViewModel" 폴더에 추가합니다.

namespace CommandBinding.ViewModel{
  class DelegateCommand : ICommand{
    private Action m_action;
    public DelegateCommand(Action action){
      this.m_action = action;
    }
    public bool CanExecute(object parameter){
      return true;
    }
    public void Execute(object parameter){
      m_action();
    }
    public event EventHandler CanExecuteChanged;
    public void OnCanExecuteChanged(){
      CanExecuteChanged(this, EventArgs.Empty);
    }
  }
}

다른 클래스 "EmployeeListView"를 "ViewModel" 폴더에 추가합니다. 이 뷰 모델은 데이터 전송과 뷰에서 트리거되는 명령을 처리합니다.

namespace CommandBinding.ViewModel{
  class EmployeeListView{
    private ICommand m_RowClickCommand;
    public EmployeeListView(){
      m_RowClickCommand = new DelegateCommand(() => {
        var set = this.SelectedData;
        if (set != null){
          MessageBox.Show(set.FirstName,"First Name");
        }
      });
    }
    public Employee SelectedData { get; set; }
    public ICommand RowClickCommand{
      get{
        return m_RowClickCommand;
      }
    }
    public IList<Employee> EmployeeList{
      get{
        List<Employee> _list = new List<Employee>();
        _list.Add(new Employee() { FirstName = "John", LastName = "Wayne", Age = 35 });
        _list.Add(new Employee() { FirstName = "Maximus", LastName = "Decimus", Age = 33 });
        _list.Add(new Employee() { FirstName = "Alexander", LastName = "Conklin", Age = 42 });
        _list.Add(new Employee() { FirstName = "Jason", LastName = "Bourne", Age = 66 });
        return _list;
      }
    }
  }
}

명령 바인딩을 사용하여 FlexGrid 추가

다음으로, 프로젝트에 C1.WPF.FlexGrid와 System.Windows.Interactivity에 대한 참조를 추가합니다. nuget.org에서 찾아 추가할 수 있습니다.

마지막으로, MainWindow.xaml을 "View" 폴더로 드래그합니다. App.xaml을 열고 "StartupUri" 태그를 "MainWindow.xaml"에서 "View/MainWindow.xaml"로 변경합니다.

C1FlexGrid를 배치하고 Interactivity를 사용하여 "MouseLeftButtonUp" 이벤트 트리거에 대한 명령 바인딩을 설정한 MainWindow.xaml에 대한 아래 XAML 마크업을 살펴보세요.

<!--xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"-->


<Grid>
<Grid.DataContext>
  <ViewModel:EmployeeListView />
</Grid.DataContext>
  <c1:C1FlexGrid ItemsSource="{Binding EmployeeList}"
              SelectedItem="{Binding SelectedData, Mode=TwoWay}">
  <i:Interaction.Triggers>
  <i:EventTrigger EventName="MouseLeftButtonUp">
    <i:InvokeCommandAction
                      Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=c1:C1FlexGrid},
                      Path=DataContext.RowClickCommand}" />
  </i:EventTrigger>
  </i:Interaction.Triggers>
</c1:C1FlexGrid>
</Grid>

다 되었습니다! 이제 아무 행이나 클릭하면 해당 행이 선택되고 선택한 DataItem의 필드 값을 표시하는 메시지 상자가 표시됩니다. 일반적으로, 이 작업 유형은 코드 숨김 click 이벤트를 사용하여 수행됩니다. Microsoft Interactivity 라이브러리 덕분에 앱을 MVVM에 가장 친화적으로 만들 수 있도록 관리되지 않는 코드 숨김을 피할 수 있습니다.

C# 샘플 다운로드

WPF DataGrid에서 CommandBinding을 만드는 방법