[WPF] ListView에 데이터를 바인딩 해보자!

안녕하세요. 간단하게 따라 할 수 있는 예제를 만드는 Teemol입니다!

오늘의 예제는 WPF ListView에 쉽게 데이터를 입력할 수 있는 바인딩에 대해 알려드리려고 합니다!

여기서 바인딩이란,

간단하게 설명하면 UI 요소와 데이터를 이어준다고 생각하시면 편할 것 같습니다.

바로 사용법을 알려드리겠습니다!

먼저 리스트 뷰에 들어갈 데이터의 클래스를 만들어줍니다!

.cs

class MyData
{
    public string dataA{ get; set; }
    public int dataB { get; set; }
    public DateTime dataC { get; set; }
 
    private static List<MyData> instance;
 
    public static List<MyData> GetInstance()
    {
        if (instance == null)
            instance = new List<MyData>();
 
        return instance;
    }
}

해당 클래스에서 바인딩에 사용될 데이터는 꼭 get, set을 만들어 줘야 합니다!

위 클래스의 instance는 이번 설명에서 리스트 뷰에 들어갈 데이터를 저장하는 객체입니다.

사용 시 클래스에는 바인딩 될 데이터를 저장할 변수만 만드시면 됩니다!

이제 데이터를 바인딩 할 리스트 뷰를 만듭니다.

.xaml

<ListView Name="myListView">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="StringData" Width="150" DisplayMemberBinding="{Binding dataA}"/>
            <GridViewColumn Header="IntData" Width="150" DisplayMemberBinding="{Binding dataB}"/>
            <GridViewColumn Header="TimeData" Width="200" DisplayMemberBinding="{Binding dataC}"/>
        </GridView>
    </ListView.View>
</ListView>

마지막으로 입력될 테이터를 추가하고 리스트 뷰에 넣어보겠습니다!

.cs

MyData.GetInstance().Add(new MyData() { dataA = "스트링 1", dataB = 1, dataC = DateTime.Today });
MyData.GetInstance().Add(new MyData() { dataA = "스트링 2", dataB = 2, dataC = DateTime.Today });
MyData.GetInstance().Add(new MyData() { dataA = "스트링 3", dataB = 3, dataC = DateTime.Today });
        
myListView.ItemsSource = MyData.GetInstance();

위와 같이 ItemsSource에 List<MyData>를 넣어주면 리스트 뷰에 데이터가 들어간 걸 확인할 수 있습니다!

이렇게 리스트에 있는 여러 개의 데이터를 한 번에 넣는 것이 가능합니다!

그리고 또 하나의 장점으로,

MyData.GetInstance()의 값이 변경되면 리스트 뷰의 내용도 같이 변경됩니다.

확인을 위해 버튼을 하나 만들어 보겠습니다!

버튼을 클릭하면 MyData.GetInstance() 2번째의 값을 변경하도록 하고,

리스트 뷰를 갱신해주는 코드를 넣어보도록 하겠습니다!

.cs

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyData md = MyData.GetInstance().ElementAt(1);
    md.dataA = "버튼클릭!";
    md.dataB = 0;
    myListView.Items.Refresh();
}

버튼을 클릭하면 리스트 뷰의 내용이 변경된 것을 확인할 수 있습니다.

지금까지 WPF 리스트 뷰에 데이터 바인딩 하는 방법이었습니다!

읽어주셔서 감사합니다.