[WPF] DataGrid Scroll시 체크박스 해제되는 에러

안녕하세요.

 

오늘은 회사내 매니저 프로그램 수정 DataGrid에서 발생한 에러에 대해 알아보고 수정내용을 기록하고자 합니다.

 

문제 상황

            <DataGrid>
                <DataGrid.ColumnHeaderStyle>
                <DataGrid.Columns>
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.Header>
                            <CheckBox/>
                        </DataGridTemplateColumn.Header>
                        <DataGridTemplateColumn.CellTemplate >
                            <DataTemplate>
                                <CheckBox>

해당 구조를 통해 DataGrid에 Check Box를 추가했습니다.(구조만 봐주시기 바랍니다. 회사내에서 사용하는 매니저 프로그램이다 보니 코드를 올릴 수 없어 구조만을 따로 따왔습니다.)

 

DataGrid에서 Check Box를 통해 데이터를 체크하는데 스크롤을 하면 간헐적으로 체크리스트까 빠지는 에러가 발생합니다.

예를 들면 1,3,5,7,9번 index를 선택했는데 스크롤을 하면 1,3번만 체크돼있고 나머지 체크는 풀리는것과 같은 문제입니다.

 

인터넷을 검색해보니 해당 이슈를 가진 분들이 꽤 계셨습니다.(물른 다 외국인이었지만...)

 

그래서 해당 문제를 해결해 보고자 합니다.

 

CheckBox에 Checked, Unchecked 이벤트를 추가하고 디버그 모드로 확인해본 결과

스크롤시 특정 체크박스를 체크 이벤트가 계속 발생합니다. (해당문제에 대한 확실한 원인은 따로 찾아 볼 수 없었습니다. 아무래도 WPF의 고질적인 문제인가 싶네요.)

문제 환경

- .Net6

- WPF

- DataGrid내 CheckBox

문제 발생 원인

이런 문제가 발생하는 원인은

① CheckBox에서 설정한 Checked, Unchecked 이벤트입니다.

<CheckBox Checked="체크" Unchecked="언체크"/>

이렇게 이벤트를 만들어 비하인드 코드에 넣었었습니다.

 

② DataGrid의 속성문제

- 현재 문제가 발생하는 DataGrid에 EnableColumnVirtualization="True" EnableRowVirtualization="True" 의 속성이 있습니다. 해당 속성이 오류의 원인이 될 수 있다고 합니다.

 

그렇다면 이 두개를 중점적으로 해결해보겠습니다.

문제 해결 ① Check, Unchecked를 EventSetter로 변경

기존의 이렇게 된 이벤트를 

<CheckBox Checked="체크" Unchecked="언체크"/>

                                <CheckBox>
                                    <CheckBox.Style>
                                        <Style>
                                            <EventSetter Event="CheckBox.Checked" Handler="체크"/>
                                            <EventSetter Event="CheckBox.Unchecked" Handler="언체크"/>
                                        </Style>
                                    </CheckBox.Style>
                                </CheckBox>

이렇게 수정해 봤습니다.

 

결과는 어땠을까요?

 

아쉽게도 여전히 스크롤시 CheckBox  체크이벤트가 발생했습니다.

 

문제 해결 ② DataGrid에 EnableColumnVirtualization="True" EnableRowVirtualization="True"  속성 변경

다음은 EnableColumnVirtualization과 EnableRowVirtualization의 속성을 False로 설정했습니다.

결과는?!

 

와우 이제 체크박스 이벤트 에러가 고쳐졌습니다.

이렇게 마무리 하려고 했으나...🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️

 

DataGrid Loading 속도 문제

또다른 문제가 발생합니다.

 

평소에는 50개의 데이터만을 DataGrid에서 보여주지만 사용자의 요청에 따라서 데이터를 2만개의 데이터까지 제공할 수 있습니다.

 

EnableColumnVirtualization="False" EnableRowVirtualization="False" 속성을 변경하면서 데이터를 DB에서 꺼내고 DataGrid에 붙는 속도가 현저하게 떨어졌습니다. 사실 5분정도 기다리다가 짜증이 나서 그냥 강제종료 해버렸습니다.

😂😂😂😂😂 

 

인터넷 찾아보니 DataGrid가 원래 대량의 데이터를 보여주는 용도가 아니라는 답과 함께 정 쓰고싶으면 ListView를 쓰라는 글이 있었습니다만!

 

해결책은 찾으면 어떻게든 있습니다.

 

해결

해당 문제에대해서는 간단한 속성 추가로 해결됐습니다.

 

DataGrid에

VirtualizingPanel.VirtualizationMode="Standard"

해당 속성을 추가하면 DataGrid Loading속도도 빠르면서 CheckBox 이벤트 에러도 발생하지 않았습니다.

 

물론 추가적인 테스트가 더 필요하겠습니다.

 

결론

① CheckBox 의 이벤트를 EventSetter로 설정

② EnableColumnVirtualization과 EnableRowVirtualization의 속성을 False값 부여

③ ②의 방법으로 DataGrid 속도감소시 DataGrid에 VirtualizingPanel.VirtualizationMode="Standard" 속성추가

해보시면 되겠습니다.

 

그래도 오늘 이 부분에 대해 알아냈기에 기록합니다.

 

감사합니다. :D