WPF UI 관련 질문입니다.

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

Custom:DataGrid에
특정 정보 리스트를 ItemsSource=“{Binding Path=DataList}” 담아 화면에 뿌려주는데

많으면 5천줄이 넘어갈때가있습니다.

문제는 같은 화면에있는 콤보박스를 클릭하는순간 버퍼링이 생기는 현상입니다…

이게 DataGrid에 row수가 많을때만 이러는거같은데… 고민이네요…

2개의 좋아요
2

이 글 첫번째 댓글을 참고해 보시겠어요?

1개의 좋아요
3

많은 데이터를 화면에 렌더링 할때
한꺼번에 화면에 그려줄때엔 버벅 거리는 것이 당연한 현상 입니다.
이때 처리할 수 있는것이 UI가상화 처리 입니다.


즉 화면에 노출되는 스크롤 ViewPort영역에만 UI를 렌더링 하고 그 외 영역은 렌더링 하지 않는 처리 입니다.
WPF에서 가상화 처리를 지원해주는 컨트롤은 VirtualizingStackPanel 입니다.

DataGrid 또는 ListView의 ItemPanel을 스타일을 통해
VirtualizingStackPanel로 사용하도록 하고 몇가지 옵션을 주면 기본적인 UI가상화 처리가 가능합니다.

참고
VirtualizingStackPanel 클래스 (System.Windows.Controls) | Microsoft Learn
https://docs.microsoft.com/ko-kr/dotnet/desktop/wpf/advanced/optimizing-performance-controls?view=netframeworkdesktop-4.8


일반적인 리스트 형식의 가시화된 데이터 템플릿 모양이 아니라면(예를 들면 WrapPanel 같은 형태 라던가 등) 직접
System.Windows.Controls.VirtualizingPanel

System.Windows.Controls.Primitives.IScrollInfo

위 클래스를 상속받아 UI가상화 처리를 구현하실 수 있습니다.

4개의 좋아요
4

댓글 감사합니다 알려주신 부분 적용해봤습니다.

하지만 콤보박스를 클릭할때의 반응은 그대로네요…
이게 1~2초정도면 과감하게 조금 버벅거리네요 라고 넘길테지만… 10초가 넘어가서…
무슨이유인지 콤보박스 클릭하는순간 저러더군요…
처음딱한번만 저런현상이 생기는데 도통 알수가없네요…

2개의 좋아요
5

  1. 콤보박스에 바인딩 처리 되는 데이터가 많은건가요? 그렇다면 콤보박스도 가상화 처리가 필요하구요
    image

  2. 콤보박스가 최초 데이터 바인딩 될때 관련해서 데이터 Load처리나 그 외 딜레이될만한 코드가 있는지 살펴 보셔야 합니다.
    콤보박스는 클릭시 콤보박스 Popup이 표시 되면서 부터 바인딩 한 데이터가 load 됩니다.

1개의 좋아요
6

아니요 콤보박스는 3줄입니다 코드값인데 1,2,3 이렇게 콤보박스에 바인딩합니다.
바인딩은 화면 띄울때 바인딩하구요

1개의 좋아요
7

Binding 시 IsAsync 옵션을 True로 설정해보시는 것도 시도해보세요~

1개의 좋아요
8

적용했었는데 datalist로드할때제외하고는 효과가없었습니다
대체 콤보박스를 클릭하는데 왜 화면전체가 버퍼링이걸리는지 이해할수가없네요… ㅠㅠ

1개의 좋아요
9

콤보박스에 해당하는 속성을 어떻게 바인딩하고 계신가요?
혹은 체크했을 때 이벤트(또는 커맨드) 로직이 궁금하네요.

단순 bool 형식의 속성갮을 바꾸는데 몇 천 라인의 처음부터 탐색하는 것 일수도 있습니다.

1개의 좋아요
10

Visual Studio 라이브 시각적 트리를 이용해 문제를 확인해보실 수 있지 않을까 싶습니다. 예상하기로 Visual Tree의 UIElement 갯수가 상당히 많을것으로 보여집니다.

1개의 좋아요
11 
<ComboBox Grid.Row="1" Grid.Column="5"  Margin="1,3,1,3" FontSize="15" 
          DisplayMemberPath="CodeNm" SelectedValuePath="CodeId" 
          ItemsSource="{Binding Path=CmbBindCodeData, Mode=OneWay}"	
          SelectedItem="{Binding Path=CmbBindCodeDataSelected}">
</ComboBox>

콤보박스 이고

private ObservableCollection<CodeVO> cmbBindCodeData;
public ObservableCollection<CodeVO> CmbBindCodeData
{
    get
    {
        cmbBindCodeData = new ObservableCollection<CodeVO>();
        cmbBindCodeData.Add(new CodeVO { CodeNm = "전체", CodeId = "2" });
        cmbBindCodeData.Add(new CodeVO { CodeNm = "내부", CodeId = "0" });
        cmbBindCodeData.Add(new CodeVO { CodeNm = "외부", CodeId = "1" });
        return cmbBindCodeData;
    }
    set
    {
        cmbBindCodeData = value;
        base.RaisePropertyChanged("CmbBindCodeData");
    }
  }

  private CodeVO cmbBindCodeDataSelected;
  public CodeVO CmbBindCodeDataSelected
  {
      get { return cmbBindCodeDataSelected; }
      set
      {
          cmbBindCodeDataSelected = value;
          base.RaisePropertyChanged("CmbBindCodeDataSelected");
      }
  }

값을 바인딩하는데 이부분은 해당 콤보박스가있는 화면이 load 될때 바인딩합니다.

string CodeId = CmbBindCodeDataSelected.CodeId;

적용합니다…

1개의 좋아요
12

화면이 느린거랑은 연관이 없을거 같긴한데.,

바인딩 속성 코드가 이상한거 같은데

get에서 매번 ObservableCollection을 생성해서 반환해주네요?

때문에 set의 의미가 없구요

그리고 xaml에서 DisplayMemberPath / SelectedValuePath 는 오타이신가요?
SCodeNm, SCodeId 가 아닌지…

1개의 좋아요
13

제가 의심되는 부분은 DataGrid가 가상화 처리가 안되어 수많은 UIElement가 존재해 바인딩 반응이 느려지는게 아닌가 하는데요, @HKLee 님 가능하시면 실행되는 재현코드를 첨부해주시면 답변에 큰 도움이 될 것 같습니다.

2개의 좋아요
14

네 오타입니다 옮겨쓰다보니 저래됫네요 ㄷㄷ

1개의 좋아요
15

위 작성자분의 댓글에서 ‘알려주신 부분 적용해봤습니다.’

로 댓글이 있어서 가상화 처리가 잘 되어 있는 상태로 간주 했었는데

디모이님 말씀 처럼 가상화 처리가 제대로 되어 있지 않은 상태라면

DataGrid컨텐츠 자체에 많은 Element가 있어서 DataGrid자체가 느린(하위 비주얼 트리 모두)걸 수 도 있겠네요

1개의 좋아요
16

혹시 이 문제 어떻게 해결이 되었을까요? 저도 마찬가지인 경우가 계속 발생하여서 개선을 하고 싶습니다.
WPF 콤보 박스만 사용을 하면 처음 눌러서 드롭다운 될 때만 엄청 렉이 걸리네요

1개의 좋아요
17

겪고 계신 증상에 대해 좀 더 자세히 설명해주시고, 관련된 XAML 코드와 C# 코드를 첨부해주시면 답변에 도움이 될 것 같습니다.

1개의 좋아요
18

저 같은 경우는 Combo Box 관련 cs 코드는 거의 없다고 봐도 될 것 같습니다.

프로그램 전체가 양이 많고 사이즈가 큰데 거기에 ComboBox만 간단하게 추가를 해도 처음 ComboBox 중에 아무거나 하나를 실행 할 때 드롭다운이 안되고 약 10초 정도 정지해 있습니다. PC 성능에 따라 시간이 다르긴 한데 처음이 느린건 비슷하구요.

그래서 신규 프로젝트를 생성해서 ComboBox만 만들어서 문제가 되었던 프로젝트의 Xaml 코드만 그대로 가져와서 테스트 했을 때도 처음에만 느려지는 걸 확인했습니다.
Xaml 코드가 많아서 그런 것 같아요

드롭다운이 될 때 기본적으로 애니메이션이 들어가는 것 같은데 애니메이션을 없애는 방법이 있을까요? 동작 시 부하를 최대한 줄이면 어떨까하는데 애니메이션이 그 영향을 주는게 아닌가 하는 생각도 드네요

ComboBox 두번째 이 후 부터 드롭다운 될 때는 또 바로 되긴 합니다.

1개의 좋아요
19

단순히 XAML 코드가 많다고 느려지는 경우는 보지못했는데 저도 궁금해지네요.

혹시 민감한 부분을 제외하고 위 프로젝트를 공유해주신다면 도움을 드릴수 있을것 같습니다.

1개의 좋아요
20

답변 감사합니다. 프로젝트 업로드 해볼려고 했는데
Zip 확장자는 업로드가 안되고 다른 확장자로 변경해서 업로드 하려고 했는데 신규 사용자라서 안된다고 하네요.

Xaml 코드만 업로드 해볼까요? 빈 프로젝트에 코드만 복사 붙여넣으면 될 것 같긴한데

1개의 좋아요