031. DataGrid

가장 많이 사용되는 Component를 할때가 된거 같다.

 

DataGrid...

 

DataGrid는 테이블형태로 표출하는 Component로써 굉장히 많이 사용된다.

 

특히 주로 사용되는 부분은 로그정보 표출이 아닐까 싶다.

 

아무튼 해당 DataGrid를 표출하는 방법에 대해 적어보고자 한다.

 

바로 코드 고고

 

이번엔 MVVM 패턴으로 작성해보도록 하자..!!

 

일단 UI

 

<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"
        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">
            <DataGrid ItemsSource="{Binding CAR}" AutoGenerateColumns="False">
                <DataGrid.Columns>
                    <DataGridTextColumn Header="NAME" Binding="{Binding CARNAME}"/>
                    <DataGridTextColumn Header="TYPE" Binding="{Binding CARTYPE}"/>
                    <DataGridTextColumn Header="PRICE" Binding="{Binding CARPRICE}"/>
                </DataGrid.Columns>
 
            </DataGrid>
        </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>
 

 

복잡하게 하지않는다..

 

단순 DATAGRID 1개와 BUTTON 3개가 끝..

 

DATAGRID에는 표출할 Column등을 정의해주고 Viewmodel과의 바인딩 작업을 해준다.

 

CODE-BEHIND

 

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();
        }
 
        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);
        }
    }
}

 

CODE-BEHIND도 어렵지 않다.

 

단순 VIEWMODEL에 접근해서 ObservableCollection의 데이터를 조금씩 수정해주는 것 뿐

(해당부분은 Command로 변경하여 ViewModel에서 처리하는것이 좋지만... 지금은 귀찮아서....)

 

VIEWMODEL

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));
            }
        }
    }
}
 

 

VIEWMODE은 더 간단... UI에 바인딩할 ObservableCollection를 선언해주고 PropertyChange를 등록해준다.

 

기본 데이터 넣어주고 끝!!!

 

그러면

요롷게 나온다.

 

추가/수정/초기화도 잘 되고

 

간단하게 구현해봤으니...

 

보기 쉬울 것으로 생각됩니다...!!

 

코드는 여기

TestProject.zip

0.10MB