반응형
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>
|
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);
}
}
}
|
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));
}
}
}
}
|
cs |
VIEWMODEL은 정말 바뀐곳이 한군데도 없다....
이렇게 실행하믄..
요롷게 상단에 Filter가 보인다 (마치 엑셀처럼)
눌러보면
리얼 엑셀임....
각각에 맞추어 필터 기능까지 완벽
nuget에서 받은거기에 정말 완벽하다!라고는 못하겠지만.. 그래도 충분히 사용가능한 component같다...!!
잘 사용해보시기를!!!
코드는 여기
FilterDataGrid에 더 자세히 알고싶다면 여기
반응형