032. Filter Grid

DataGrid를 사용했으면... Filter도 확인해보고 싶을 것이라 생각된다.

DataGrid에서의 필터기능은 단순 RecordFilter 기능을 이용해서 Filter를 넣을수도 있지만..

해당 컴포넌트를 사용하면 더더욱 보기 좋을 것으로 생각된다.

해당 컴포넌트는 바로 FilterGrid..

Nuget에서 FilterDataGrid를 검색해보자

해당 Nuget 설치!!!

설치가 완료된 모습!

그렇다면 설치한 DataGrid를 선언해보자!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<Window x:Class="TestProject.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:TestProject"
        xmlns:control="http://filterdatagrid.control.com/2021"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="650">
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
 
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0">
            <control:FilterDataGrid ItemsSource="{Binding CAR}" AutoGenerateColumns="False">
                <control:FilterDataGrid.Columns>
                    <control:DataGridTextColumn IsColumnFiltered="True" Header="NAME" Binding="{Binding CARNAME}"/>
                    <control:DataGridTextColumn IsColumnFiltered="True" Header="TYPE" Binding="{Binding CARTYPE}"/>
                    <control:DataGridTextColumn IsColumnFiltered="True" Header="PRICE" Binding="{Binding CARPRICE}"/>
                    </control:FilterDataGrid.Columns>
            </control:FilterDataGrid>
        </Grid>
 
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
 
            <Button Grid.Column="0" Content="ADD" Click="Button_Click" />
            <Button Grid.Column="1" Content="REMOVE" Click="Button_Click_1"/>
            <Button Grid.Column="2" Content="INIT" Click="Button_Click_2" />
        </Grid>
    </Grid>
</Window>
 
Colored by Color Scripter

cs

기존 데이터그리드와 크게 바뀐것은 없고 새롭게 nuget에서 다운로드받은 FilterDataGrid를 선언해주고 FilterDataGrid에 맞추어 Column을 선언!

Code-Behind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.IO;
using System.IO.Compression;
using System.Linq;
using System.Runtime.Remoting.Contexts;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Forms;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
 
namespace TestProject
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>    
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            DataContext = new ViewModel();
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            /// ADD
            ViewModel VM = this.DataContext as ViewModel;
 
 
            Random R = new Random();
 
            int RANDOMDATA = R.Next(0, 10);
 
            switch (RANDOMDATA)
            {
                case 0:
                    VM.CAR.Add(new Car("GOLF", CAR_TYPE.ELECTONIC, 6000));
                    break;
 
                case 1:
                    VM.CAR.Add(new Car("TIROC", CAR_TYPE.GASOLINE, 5000));
                    break;
 
                case 2:
                    VM.CAR.Add(new Car("BMW 3", CAR_TYPE.DIESEL, 6000));
                    break;
 
                case 3:
                    VM.CAR.Add(new Car("BMW 5", CAR_TYPE.DIESEL, 8000));
                    break;
 
                case 4:
                    VM.CAR.Add(new Car("BMW 7", CAR_TYPE.DIESEL, 10000));
                    break;
 
                case 5:
                    VM.CAR.Add(new Car("BENZ B", CAR_TYPE.DIESEL, 4000));
                    break;
 
                case 6:
                    VM.CAR.Add(new Car("BENZ C", CAR_TYPE.DIESEL, 6000));
                    break;
 
                case 7:
                    VM.CAR.Add(new Car("BENZ S", CAR_TYPE.DIESEL, 15000));
                    break;
 
                case 8:
                    VM.CAR.Add(new Car("AUDI A4", CAR_TYPE.DIESEL, 5000));
                    break;
 
                case 9:
                    VM.CAR.Add(new Car("AUDI A6", CAR_TYPE.DIESEL, 7000));
                    break;
            }
        }
 
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            /// REMOVE
            ViewModel VM = this.DataContext as ViewModel;
 
            VM.CAR.RemoveAt(VM.CAR.Count - 1);
        }
 
        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            /// ADD
            ViewModel VM = this.DataContext as ViewModel;
            VM.CAR.Clear();
 
            Car C = new Car("MODEL 3", CAR_TYPE.ELECTONIC, 4000);
            VM.CAR.Add(C);
 
            C = new Car("MODEL S", CAR_TYPE.ELECTONIC, 10000);
            VM.CAR.Add(C);
 
            C = new Car("MODEL X", CAR_TYPE.ELECTONIC, 10000);
            VM.CAR.Add(C);
 
            C = new Car("LUCID AIR", CAR_TYPE.ELECTONIC, 15000);
            VM.CAR.Add(C);
        }
    }
}
Colored by Color Scripter

cs

기존 코드와 변경된 부분은 DataContext선언부 밖에 없다. 해당 컴포넌트의 오류인지 모르겠지만...

XAML에서 DataContext를 선언해주면 Filter가 보이지않는 문제가 존재하여 여기서 다시 한번 DataContext를 연결해주어야 한다.!

VIEWMODEL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
 
namespace TestProject
{
    class ViewModel : INotifyPropertyChanged
    {
        public ViewModel()
        {
            Car C = new Car("MODEL 3", CAR_TYPE.ELECTONIC, 4000);
            CAR.Add(C);
 
            C = new Car("MODEL S", CAR_TYPE.ELECTONIC, 10000);
            CAR.Add(C);
 
            C = new Car("MODEL X", CAR_TYPE.ELECTONIC, 10000);
            CAR.Add(C);
 
            C = new Car("LUCID AIR", CAR_TYPE.ELECTONIC, 15000);
            CAR.Add(C);
        }
 
        private ObservableCollection<Car> _car = new ObservableCollection<Car>();
 
        public ObservableCollection<Car> CAR
        {
            get
            {
                return _car;
            }
            set
            {
                _car = value;
                OnPropertyChanged("CAR");
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        protected virtual void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}
 
Colored by Color Scripter

cs