C# WPF에서 DataGrid에 데이터를 바인딩하는 간단한 예제

아래는 WPF의 DataGrid에 데이터를 바인딩하는 간단한 예제입니다.

이 예제에서는 Employee라는 클래스로 만든 EmployeeLists 리스트를 DataGrid에 바인딩합니다.

 

namespace TEST_WPF.Models
{
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public string Position { get; set; }
        public string TelNo { get; set; }
        public string TelNo2 { get; set; }
        public string Email { get; set; }
    }
}

 

위 코드에서 Employee 클래스는 각각의 사원 정보를 저장하는데 사용됩니다.

 

using System.Collections.ObjectModel;
using TEST_WPF.Models;

namespace TEST_WPF.ViewModels
{
    public class VMEmployee 
    {
        public ObservableCollection<Employee> EmployeeLists { get; set; }

        public VMEmployee()
        {
            EmployeeLists = new ObservableCollection<Employee>
            {
                new Employee { Id = 1, Name = "John Doe", Department = "HR" },
                new Employee { Id = 2, Name = "Jane Doe", Department = "IT" },
                new Employee { Id = 3, Name = "Bob Smith", Department = "Sales" }
            };
        }
    }
}

ViewModel 클래스는 EmployeeLists라는 ObservableCollection을 소유합니다.

ObservableCollection은 데이터가 추가, 삭제, 수정될 때 DataGrid에서 바로 반영되도록 하는 데 사용됩니다.

 

다음으로 XAML 코드에서 DataGrid를 정의합니다.

<Window x:Class="TEST_WPF.Views.WindowEmployeeDataGrid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:TEST_WPF.ViewModels"
        Title="DataGridBindingExample" Height="350" Width="525">
    <Window.DataContext>
        <vm:VMEmployee/>
    </Window.DataContext>
    <Grid>
        <DataGrid ScrollViewer.HorizontalScrollBarVisibility="Auto"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            AutoGenerateColumns ="False"
            CanUserAddRows="False"
            ItemsSource="{Binding EmployeeLists}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding Id}" />
                <DataGridTextColumn Header="이름" Binding="{Binding Name}" />
                <DataGridTextColumn Header="부서" Binding="{Binding Department}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

위 코드에서 DataGrid의 ItemsSource에 바인딩 할 리스트인 EmployeeLists를 바인딩합니다.

DataGrid.Columns 속성에는 각 칼럼의 Header와 Binding 속성을 정의합니다. Binding 속성은 Employee 클래스의 각각의 속성과 매칭되어 DataGrid에 나타납니다.

 

DataGrid 속성에 ScrollViewer.HorizontalScrollBarVisibility는 가로(수평) 스크롤바를 나타낼 때 사용하고, ScrollViewer.VerticalScrollBarVisibility는 세로(수직) 스크롤바를 나타낼 때 사용합니다. 값이 Auto로 설정되어 있으므로 필요할 때만 표시됩니다.

HorizontalScrollBarVisibility, VerticalScrollBarVisibility 속성의 값들 종류

- Disabled: 스크롤바가 비활성화됩니다.

- Hidden: 스크롤바가 숨겨집니다.

- Auto: 스크롤바가 필요할 때만 표시됩니다.

- Visible: 스크롤바가 항상 표시됩니다.

 

참고로 위에 화면과 같이 DataGrid에 ObservableCollection을 바인딩하면 클래스의 칼럼들이 자동으로 생성되기 때문에 DataGrid.Columns 속성에 수동으로 정의한 칼럼 외에도 전체 리스트가 나오게 됩니다.

위의 XAML 코드 예제와 같이 AutoGenerateColumns 속성을 False로 설정하여 자동 생성되는 컬럼을 제거할 수 있습니다.

 

그 다음으로 WPF의 DataGrid에서 데이터가 없는 마지막 행을 표시하지 않기 위해 CanUserAddRows 속성을 False로 설정합니다.

 

예제 코드대로 다 작성을 하고, 빌드를 하면 다음과 같이 실행되어 화면이 나타납니다.

이렇게 DataGrid에 데이터를 바인딩할 수 있습니다.

이 예제에서는 간단한 데이터를 사용하여 DataGrid에 바인딩했지만, 실제로는 데이터베이스에서 데이터를 검색하거나 API에서 전달해 주는 json 파일과 같은 파일에서 데이터를 읽어와서 DataGrid에 바인딩하는 경우가 많습니다.

 

---

프로젝트 전체 코드

GitHub - yoosple/WPFs