데이터 필터는 시청자에게 데이터의 하위 집합에 집중할 수 있는 방법을 제공하는 컨트롤입니다. 기초 필터링 옵션을 제공하는 많은 컴포넌트가 있습니다 (예 : 그리드의 열 필터링). 그러나 사용자가 화면의 모든 정보를 필터링해야 하는 경우 빠른 필터링을 지원하는 단일 컨트롤이 필요합니다. 한 곳에서 사용 가능한 모든 옵션을 제공하는 C1DataFilter를 통해 가능합니다.

C1DataFilter 란

ComponentOne DataFilter for WinForms (C1DataFilter)는 다른 UI 컴포넌트와 완벽하게 통합되며 상호 작용을 통해 필터링 할 수있는 UI 컨트롤입니다. DataSource의 속성을 읽고 BoolFilter, DataRangeFilter, CheckListFilter 및 RangeFilter 등의 해당 필터 유형을 자동으로 만듭니다.

이러한 내장 필터를 사용하려면 AutoGenerateFilters 속성을 true로 유지해야 합니다.

왜 사용자 정의 데이터 필터를 작성해야 할까요?

내장 필터는 선택된 값, 선택된 데이터 범위 등을 기준으로 필터링과 같은 일반적인 필터 조건을 처리하도록 설계되었습니다. 맵 또는 차트와 같은 복잡한 데이터 시각화 컨트롤을 사용하여 필터링하려면 고유한 사용자 정의 데이터 필터를 만들어야 합니다.

데이터 필터 사용 사례 : 맵을 필터 컴포넌트로 사용하기

자동차 회사가 영업 매장에서 사용 가능한 자동차 모델을 트래킹해야 하는 경우를 예로 들어 보겠습니다. 매장은 전국 각지에 퍼져 있습니다. 사용자는 지도에서 매장의 위치를 ​​선택하고 해당 위치에서 사용 가능한 자동차 모델을 필터링할 수 있어야 합니다.

이 시나리오에서는 TreeView와 같은 UI 컨트롤을 사용하여 가용 차량 모델을 제시하고 매장 위치를 ​​선택하기 위한 사용자 지정 데이터 필터 컴포넌트로 맵을 사용하는 것이 이상적입니다.

여기서 맵 상의 각 점은 매장의 위치를 나타내며 선택하거나 선택 해제할 수 있습니다. 처음에는 모든 매장에서 사용 가능한 자동차 모델이 표시됩니다. 그러나 사용자가 지도에서 선택한 점을 기반으로 왼쪽의 TreeView에 있는 데이터가 필터링됩니다.

사용자 정의 데이터 필터를 사용하여 이 시나리오를 구현하는 방법을 살펴 보겠습니다.

데이터 필터 사용자 정의

다음의 세 단계를 거쳐 위 시나리오를 구현해 보겠습니다.

1. 맵 뷰 생성하기
2. 맞춤 필터 만들기
3. 맞춤 필터 사용하기

1. 맵 뷰 생성하기 :

맞춤 데이터 필터를 만들려면 먼저 매장 위치를 ​​시각화하고 선택/선택 취소 할 수 있는 컨트롤이 필요합니다. 이를 위해 GrapeCity는 WinForms Edition에서 C1Map을 제공합니다.

맵에 매장 요소를 위치시키기 위해 우리는 먼저 VectorLayer를 추가한 후, VectorPlaceMark를 추가해야 합니다. 

private C1Map _map;
private C1.Win.Map.VectorLayer _layer;
private List<Store> _stores;

public MapView()
{
    _layer = new C1.Win.Map.VectorLayer { LabelVisibility = LabelVisibil-ity.AutoHide };
    _map.Layers.Add(_layer);
}

public void SetStores(IEnumerable<Store> stores)
{
    _stores = stores.ToList();
    foreach (var store in stores)
    {
        var mark = new C1.Win.Map.VectorPlacemark
        {
            Geometry = new GeoPoint(store.Location.X, store.Location.Y),
            Lod = new LOD(0, 0, 0, 20),
            Tag = store.City,
            Marker =
                {
                    Size = new SizeF(12,12),
                    Shape = MarkerShape.Circle,
                    Caption = store.City,
                    LabelPosition = LabelPosition.Right
                }
        };
        _layer.Items.Add(mark);
    }
}

매장 마커를 맵에 표시한 후 이를 선택/선택 취소할 수 있는 기능이 필요합니다.

맵의 MouseClick 이벤트를 사용하면 시청자가 맵에서 특정 점을 클릭할 때 확인할 수 있습니다. 그러나 맵에서 클릭한 점이 매장 위치와 관련이 있을 수도 있고, 없을 수도 있습니다. 따라서 클릭 한 점이 매장을 나타내는 경우 선택한 매장을 반환하고, 그렇지 않으면 null을 반환하는 메서드를 만듭니다.

private C1.Win.Map.VectorItem FindStore(C1.Win.Interop.Point point, C1.Win.Map.VectorLayer layer)
{
        foreach (C1.Win.Map.VectorPlacemark mark in layer.Items)
        {
            var p = mark.Geometry.Center;
            if (Math.Abs(p.X - point.X) < 1 && Math.Abs(p.Y - point.Y) < 1)
            {
                return mark;
            }
        }
        return null;
}

클릭한 위치가 매장인지 아닌지의 여부가 파악되면, 선택한 매장과 모든 매장을 구분해야 하기 때문에 두 개의 VectorLayer가 필요합니다. 클릭한 위치가 매장이고 선택되지 않은 경우, 선택한 레이어에 추가되고 일반 레이어에서 제거되며 그 반대의 경우도 마찬가지입니다.

private C1.Win.Map.VectorLayer _selectedLayer;
public event EventHandler SelectedChanged;

private void Map_MouseClick(object sender, MouseEventArgs e)
{
        var point = _map.ScreenToGeographic(e.Location);

        var selectedStore = FindStore(point, _selectedLayer);
        if (selectedStore != null)
        {
            _selectedLayer.Items.Remove(selectedStore);
            _layer.Items.Add(selectedStore);
            SelectedChanged?.Invoke(this, e);
        }
        else
        {
            var store = FindStore(point, _layer);
            if (store != null)
            {
                _layer.Items.Remove(store);
                _selectedLayer.Items.Add(store);
                SelectedChanged?.Invoke(this, e);
            }
        }
}

이를 통해 지도에서 매장을 시각화하고 매장을 선택/선택 취소할 수 있습니다. 이제, 이 지도를 필터 컴포넌트로 사용하기 위해 맞춤 데이터 필터를 만들어 보겠습니다.

2. 사용자 정의 필터 생성하기 :

사용자 정의 필터를 만들려면 Control 속성을 제공하는 C1.Win.DataFilter.CustomFilter 클래스를 구현해야 합니다.

이 속성을 사용하여 지도를 데이터 필터 컴포넌트로 할당할 수 있습니다. 또한 클래스는 선택 값이 변경되었음을 알리는 ValueChanged 이벤트를 표시합니다 .

private MapFilterView _mapFilterView;

public MapFilter()
{
        _mapFilterView = new MapFilterView
        {
            Height = 250
        };
        _mapFilterView.SelectedChanged += MapFilterView_SelectedChanged;
        Control = _mapFilterView;
}

private void MapFilterView_SelectedChanged(object sender, EventArgs e) =>                       OnValueChanged();

CustomFilter 클래스는 두 가지 중요한 추상 메소드로 구성됩니다.

GetExpression 및 SetExpression

GetExpression 메서드는 C1.DataFilter.Expression 타입의 값을 반환합니다. 사용자 정의 필터 표현식을 반환하려면 이 메소드를 오버라이드해야 합니다. 사용자 정의 표현식에서 필터 작동 방식을 지정해야 합니다. PropertyName, Value 및 FilterOperation 속성을 설정하여 이를 수행할 수 있습니다.

여기서 자동차 회사는 선택한 위치 중 하나에서 사용할 수 있는 모든 자동차를 표시하고자 하므로 필터 조합을 OR로 설정했습니다.

protected override Expression GetExpression()
{
      var stores = _mapFilterView.GetSelectedStores();
      var expr = new CombinationExpression() { FilterCombination = FilterCombination.Or };
      foreach (var store in stores)
      {
           expr.Expressions.Add(new OperationExpression() { Value = store.ID, FilterOperation = FilterOperation.Equal, PropertyName = PropertyName });
      }
      return expr;
}

C1TreeView에서 사용 가능한 자동차 모델을 필터링할 수 있는 맞춤형 필터가 구축되었습니다.

3. 사용자 정의 필터 사용하기 :

양식 디자이너를 열어 봅시다. ToolBox에서 C1DataFilter를 드래그앤드롭하여 DataSource를 설정하십시오. 기본적으로 DataFilter는 내장 필터를 사용하여 필터 옵션을 표시합니다. 사용자 정의 필터를 사용하도록 DataFilter에 알리려면 인스턴스를 작성하고 PropertyName을 사용자 정의 필터 컴포넌트가 표시될 데이터 소스의 필드로 설정해야 합니다.

c1DataFilter1.DataSource = data;
var mapFilter = new MapFilter()
{
    HeaderText = "Store",
    PropertyName = "Store.ID"
};

마지막 단계는 데이터 필터에서 사용자 정의 필터를 사용할 수 있도록 하는 것입니다. 이 작업은 DataFilter의 필터 컬렉션에 사용자 정의 필터를 추가하여 수행할 수 있습니다. 

c1DataFilter1.Filters.Add(mapFilter);

사용자 정의 필터를 추가하자마자 C1DataFilter는 이 필터를 사용하여 Store.ID 속성 필드를 렌더링하기 시작합니다.

데모 다운로드