[WPF] 이미지 목록 불러오기 (비동기 렉 안걸리고)

---

결과

결과부터 미리 보자.

 

주목해야할 건 비동기인 점과

 

비동기로 불러왔을 때 렉이 걸리는지 유무다.

 

렉이 걸리는지는 확인하기 쉽게 UI 상태 옆에 돌아가는 애니메이션을 넣었다.

 

일반적으로 동기로 이미지를 불러왔을 때

동기로 불러올 경우 로딩하는 동안 프로그램이 멈춰버린다.

 

 

 

Xaml의 Image 컨트롤의 IsAsync 속성을 true로 했을 때

비동기로 로딩되지만 잔렉이 심하게 걸린다.

'UI 상태' 옆의 애니메이션이 버벅이는 걸 볼 수 있다.

 

 

모델 클래스에서 비즈니스로직을 Async로 만들었을 경우

제일 처음 로딩할 때 빼고 매끄럽게 로딩된다.

 

---

준비

준비글은 접어놨다.

프로그램 틀을 만든다

간단한 프로그램이지만 연습겸 Mvvm 패턴을 이용해 만들어 봤다.

( 주의 : Mvvm 패턴의 규칙을 완전히 지킨 코드가 아닌 점 유의)

 

세가지 테스트를 하기 위해 View 세개를 만들었다.

 

뷰모델은 베이스, 일반적으로 불러오는 RawViewModel, 그걸 상속하는 ItemAsyncViewModel을 만들었다.

 

결과를 보면 알 수 있듯이 세 View의 디자인은 대동소이 하기에 공통인 부분은

MainDictionary에 선언해두었다.

 

 

 

---

핵심 코드

 

일반적인 동기 코드 

 

일반적인 방법으로 로딩한다.

 

바인딩

 

IsAsync를 true로 한 코드

 

바인딩에 IsAsync 속성만 추가해줘도 비동기 진행이 가능하다.

 

 

모델에 비즈니스로직을 Async로 한 코드

해당 코드에선 모델에 Load 비동기 비즈니스로직이 들어간다.

Stream을 쓰게되는데

BitmapImage로도 해봤지만 해당코드는 같은 스레드에서 생성해야된다며 예외를 발생시킨다.ㅁ

 

 

 

---

프로젝트

ImageLoadingTest_v1.zip

0.11MB

프로그램은 exe파일과 같은 경로에 image폴더가 있어야하며

사진파일은 용량이 크고 많을 수록 효과가 있다.