! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

페이지 정보

작성자 GrapeCity 작성일 2020-11-11 09:56 조회 5,398회 댓글 0건

본문

ComponentOne 2020v2 릴리스에서는 런타임에 데이터 소스를 필터링하기 위한 직관적 UI를 제공하는 WPF용 FilterEditor 컨트롤을 추가했습니다. 이 게시물에서는 WPF용 FilterEditor를 C1DataFilter 컨트롤과 통합하여 이메일 클라이언트 응용 프로그램을 위한 규칙 기반 필터링을 생성하는 방법을 보여 줍니다. 규칙 기반 필터링을 만들기 위해 필터 편집기를 사용하면서 사용자는 대용량 데이터 집합(여기서는 이메일 목록)을 논리적 형식의 노드로 이루어진 계층 구조 트리로 만드는 방법에 대해 알게 됩니다. 각 노드는 더 작고, 관련이 있고, 더 관리 가능한 데이터 집합에 해당합니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

이 블로그에서는 먼저 FilterEditor 구조를 빠르게 살펴보겠습니다. 이어서 다음 내용을 다룹니다.

  • 사서함에 필요한 모델 만들기

  • FilterEditor 컨트롤을 사용하여 RuleEditor 만들기

  • DataFilter에 표시할 RuleTree 만들기

  • RuleTree를 DataFilter용 사용자 정의 필터(이름 RuleBasedFilter)와 통합하기

  • 사용자 정의 필터를 DataFilter 컨트롤에 추가하기.

WPF용 FilterEditor: 구조 검토

다음 이미지는 FilterEditor 컨트롤의 모양을 보여 줍니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

필터 노드로 이루어진 트리에서 각 노드는 Combination 또는 Operation 식을 나타냅니다. 런타임에 데이터 소스에 대한 필터 조건을 생성하기 위한 빌딩 블록입니다. 문서 블로그에서 FilterEditor 구조에 대해 자세히 알아보십시오. 다음으로 여기서 만들게 될 사서함을 살펴보겠습니다.

사서함을 빌드하는 방법

이 게시물에서는 Gmail 사서함을 만들고, MailKit 및 Gmail API를 사용하여 로그인하고 이메일을 페치하는 방법을 알아보겠습니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

세부 정보는 이 블로그의 범위를 벗어나므로 검토하지 않습니다. 소스 코드는 이 블로그의 끝에 연결된 샘플에서 확인할 수 있습니다.

모델 만들기: 메시지 및 규칙

여기서 만들 사서함에는 다음 두 가지 모델이 있습니다.

  1. 메시지:

이메일 메시지는 다음과 같은 개체 모델을 갖게 됩니다.

      public class Message  
  {  
      public string From { get; set; }  
      public string To { get; set; }  
      public string Subject { get; set; }  
      public string Body { get; set; }  
      public bool SendByMe { get; set; }  
      public DateTime? Date { get; set; }  
  }

FilterEditor는 필터 식 정의를 위해 해당 속성을 사용합니다.

  1. 규칙:

규칙은 사용자가 런타임에 사서함에서 정의할 필터 조건을 나타냅니다. 해당 규칙은 위에서 설명한 'Message' 모델을 사용하여 식으로 해석됩니다. 예를 들어 “Amazon에서 보낸 모든 이메일”을 필터링하는 규칙은 다음 식으로 해석됩니다.

  '[Message.From] Contains [amazon]'

위와 유사한 규칙을 정의하기 위해 FilterEditor를 사용합니다. 해당 규칙이 정의되면 RuleTree에서 노드에 의해 표현됩니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

규칙에 대한 개체 모델은 다음과 같습니다.

public class Rule: INotifyPropertyChanged  
{  
  public string Name { get { return _name; } set { _name = value; OnPropertyChanged(nameof(Name)); } }  
  public bool IsExpanded { get { return _isExpanded; } set { _isExpanded = value; OnPropertyChanged(nameof(IsExpanded)); } }  
  public bool IsSelected { get { return _isSelected; } set { _isSelected = value; OnPropertyChanged(nameof(IsSelected)); } }  
  public bool CanDelete { get; set; } = true;  
  public Expression Expression { get; set; }  
  public ObservableCollection<Rule> ChildRules { get { return _child; } }  
  public Rule ParentRule { get; set; }  
  public Expression CombinedExpression  
  {  
      get  
      {  
          var combination = new CombinationExpression() { FilterCombination = FilterCombination.And };  
          if (this.Expression != null)  
            combination.Expressions.Add(this.Expression);  
          if (this.ParentRule?.Expression != null)  
            combination.Expressions.Add(this.ParentRule?. CombinedExpression);  
          return combination;  
      }  
      }  
}

규칙은 계층 구조로 표시되므로 하위 노드에서 필터링하려면 상위 노드에서 정의된 규칙을 고려해야 합니다. 필터링은 특정 규칙에 대한 식을 상위 항목과 결합하는 'CombinedExpression' 속성(위에서 설명)을 통해 이루어집니다. 실제 이메일 필터링은 CombinedExpression의 값을 기반으로 이루어집니다.

규칙 편집기 만들기

RuleEditor는 사서함 응용 프로그램의 필수적인 부분이며, 새 규칙을 생성하거나 기존 규칙을 편집하는 데 사용됩니다. 팝업으로 표시되는 규칙 편집기는 규칙에 대한 식을 정의할 수 있도록 C1FilterEditor 컨트롤을 사용하여 생성됩니다. 다음의 두 부분으로 이루어집니다.

  1. 규칙 이름: 규칙 트리에 노드를 묘사하는 규칙의 이름.

  2. 규칙 식: FilterEditor UI를 사용하여 규칙에 대한 논리 조건을 정의하는 식.

다음 스니펫은 RuleEditor를 정의하는 코드를 보여 줍니다.

<StackPanel Grid.Row="1" Orientation="Horizontal">  
      <Label VerticalAlignment="Center" Foreground="{DynamicResource foreground}" Content="Rule Name:"/>  
      <TextBox Text="{Binding Name}" Margin="10" Width="300"/>  
</StackPanel>  
<c1:C1FilterEditor x:Name="filterEditor" Grid.Row="2" Loaded="FilterEditor_Loaded"/>

이것은 앞에서 살펴본 'Amazon Mails' 규칙이 FilterEditor를 사용하여 생성되는 방식입니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

FilterEditor가 식이 빌드되는 속성 목록을 채우도록 하려면 해당 ItemSource를 설정해야 합니다. 마찬가지로 규칙에서 식을 편집하기 위해 아래와 같이 FilterEditor의 Expression 속성을 설정합니다.

public RuleEditorControl(Rule rule, IEnumerable source)  
{  

  InitializeComponent();  
  this.Rule = rule;  
  this.DataContext = Rule;  
  filterEditor.Expression = Rule.Expression;  
  filterEditor.ItemsSource = source;  
}

이 모든 작업에서 FilterEditor 기반의 RuleEditor를 처리합니다. 마지막으로 규칙 식의 변경 내용에 대해 DataFilter에 알려야 합니다. 이를 위해 Apply/ResetFilter 버튼 클릭을 처리하여 식을 업데이트하고 RuleChanged 이벤트를 트리거합니다. 이 이벤트는 나중에 RuleTree에서 처리됩니다.

private void FilterEditor_Loaded(object sender, RoutedEventArgs e)  
{  
  var applyButton = filterEditor.Template.FindName("Apply", filterEditor) as Button;  
  var resetButton = filterEditor.Template.FindName("Reset", filterEditor) as Button;

  applyButton.PreviewMouseDown += (ss, ee) => { OnRuleChanged(); };  
  resetButton.PreviewMouseDown += (ss, ee) => { OnRuleChanged(); };  
}  
private void OnRuleChanged()  
{  
    Rule.Expression = filterEditor.Expression;  
    RuleChanged?.Invoke(this, EventArgs.Empty);  
}

규칙 트리 만들기

RuleTree는 사서함에 사용된 DataFilter에서 사용자 정의 필터의 역할을 합니다. 규칙 트리에는 다음 두 가지 목적이 있습니다.

  1. 사서함에서 정의된 규칙 목록을 표시하는 컨테이너 역할을 합니다. 해당 규칙은 계층적일 수 있으므로 RuleTree는 C1TreeView 컨트롤을 사용하여 생성됩니다. 여기서 각 노드는 정의된 규칙을 나타냅니다. 트리의 각 노드는 규칙의 ‘이름’과 규칙을 추가/편집하기 위한 버튼을 표시합니다. 해당 버튼은 RuleEditor를 불러오는 데 사용됩니다.

WPF에서 FilterEditor 및 DataFilter를 사용하여 고급 필터 UI 만들기

  1. 이것은 DataFilter의 일부이므로 FilterEditor를 사용하여 정의된 규칙을 사용하는 사서함에서 이메일을 필터링할 수 있습니다. 이를 위해 RuleTree는 선택된 규칙/노드가 변경되어 DataFilter에 해당 변경을 알릴 때 자체 사용자 정의 'RuleChanged' 이벤트를 발생합니다.

private void RuleTree_SelectionChanged(object sender, SelectionChangedEventArgs e)  
{  
    if (ruleTree.SelectedItem!=null)  
  {  
        RuleChanged?.Invoke(this, EventArgs.Empty);  
  }  
}

DataFilter 컨트롤이 이메일 필터링에 사용하는 식은 RuleTree에 의해 다음과 같이 노출됩니다.

public C1.DataFilter.Expression Expression  
{  
  get  
  {  
      return (ruleTree.SelectedItem?.DataContext as Rule)?.CombinedExpression;  
  }  
}  

다음 섹션에서는 이 RuleTree를 사용하는 DataFilter를 위한 사용자 정의 필터가 어떻게 생성되는지 알아보겠습니다.

RuleTree를 DataFilter용 사용자 정의 필터와 통합하기

DataFilter는 모든 UI 컴포넌트를 포함하는 사용자 정의 필터의 사용을 지원합니다. 여기서는 RuleTree를 필터링 수단으로 사용해야 하므로 RuleTree를 컨트롤로 사용하는 사용자 정의 필터(즉, RuleBasedFilter)를 정의해야 합니다.

public class RuleBasedFilter : CustomFilter  
{  
  RuleTree _ruleTree;  
  public RuleBasedFilter(IEnumerable source) : base()  
  {  
      Control = _ruleTree = new RuleTree() { Source = source};

      _ruleTree.RuleChanged += (s, e) =>  
      {  
          OnValueChanged(new ValueChangedEventArgs() { ApplyFilter = true });  
      };

  }  
  protected override C1.DataFilter.Expression GetExpression()  
  {  
      return _ruleTree.Expression;  
  }  
  public override bool IsApplied => _ruleTree.Expression!=null;  
}

사용자 정의 필터는 CustomFilter에서 상속한 후 3단계로 정의됩니다.

  1. 해당 Control 속성을 사용하여 UI 요소(이 경우에는 RuleTree)를 지정합니다.

  2. GetExpression()을 재정의하여 필터 식을 반환합니다. 여기서는 RuleTree.Expression을 사용합니다.

  3. RuleTree.RuleChanged 이벤트를 구독하여 필터 조건의 변경 내용을 알립니다.

사용자 정의 필터를 DataFilter 컨트롤에 추가

이 단계에서는 사서함에 필요한 모든 컴포넌트가 준비되어 있습니다. 마지막으로 남은 계층은 DataFilter 초기화, 이것을 이메일에 바인딩 그리고 위에서 만든 사용자 정의 필터(RuleBasedFilter)와의 통합입니다. 다음 스니펫은 이 작업의 수행 방법을 보여 줍니다.

<c1:C1DataFilter x:Name="dataFilter" ItemsSource="{Binding Messages}" AutoGenerateFilters="False"/>
private void InitFilters()  
{  
      dataFilter.Filters.Add(new RuleBasedFilter(UserService.Messages));  
}

이제 응용 프로그램의 작동에 대해 살펴보겠습니다.


 

이 마지막 계층에 대해 살펴보는 것으로 이 블로그를 마무리하게 됩니다. 응용 프로그램에서 FilterEditor 및 DataFilter 컨트롤을 사용하여 항목 필터링을 가능하게 하는 방법을 알아보았습니다.

전체 샘플은 여기에서 사용 가능합니다.

해당 컴포넌트에 대한 자세한 내용은 해당 문서를 참조하십시오.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.