본문 바로가기
프로그래밍/WPF

[WPF] 초기 로딩화면 구현하기

볼륨이 상당히 큰 프로그램이나 처음에 네트워크 연결 혹은 DB 연결하는 프로그램일 경우

 

처음 실행했을 때 렉이나 잠깐이지만 멈춤상태가 나올 경우가 있다.

 

 

 개발자 입장에선 그냥 조금 기다리면되지만 사용자 입장에선 잠시만 멈춰도 당황할 수 있기에

 

로딩화면을 띄워서 안심시켜주는 게 맞다고 생각한다.

 

 

본 코드를 실제 구동(데이터를 불러오거나) 해보지 않았고 Thread.Sleep으로

 

메인스레드를 멈춰 로딩상황인걸 가정만 했으니 실제론 제대로 돌아가지 않을 수 있다.

 


 

내가 선택한 방법은 두가지이다.

 

  • Gif 이미지를 띄워 로딩중이란 걸 알리기
  • ProgressBar를 이용해 로딩중이란 걸 알리기

두 가지 방법 모두 BackgroundWorker를 사용한다.

 


Gif 이미지를 사용한 방법 미리보기 (움짤)

더보기
로딩 완료 시
로딩 취소 시
로딩 중 에러 발생 시

 

ProgressBar를 사용한 방법 미리보기 (움짤)

더보기
로딩 완료 시
로딩 취소 시
로딩 중 에러 발생 시

 


 

 

GIF를 이용한 방법

 

■GIF가 정상 출력되는 <Image> 구현

 

기본 WPF의 Image 컨트롤에선 gif가 움직이지 않기 때문에 움직이게 만들어야 한다.

 

어려울거 없다. Nuget 패키지에서 WpfAnimatedGif를 설치하자

 

설치 후 Image에 다음과 같이 사용해주면 된다.

 

 

 

■ 로딩 Window 만들기

 

 

새 윈도우에 <image>로 gif를 넣어주고

 

나는 취소와 에러 이벤트를 넣어주기위해 버튼 2개를 추가했다.

 

MainWindow에서 버튼클릭을 감지할 수 있게 커스텀 이벤트도 만들어 줬다.

 

( 글 쓰다 안 사실인데, 따로 저렇게 만들지 않고 Button에 Name속성을 줘 Main에서 직접 Click이벤트를

연결해도 될 것 같다 )

 

 

■ MainWindow 수정

 

■ BackgroundWorker 선언

 

 

BackgroundWorker를 선언해준 뒤

 

이벤트를 연결해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

DoWork 메서드

 

실제 백그라운드에서 돌아갈 코드를 넣으면 된다.

 

취소를 구현하려면 CancellationPending부분을 명시해야한다.

 

여기서 예외가 발생하면 작업은 바로 끝나고 Completed로 넘어가게 된다.

 

여기선 Thread.Sleep만 해주었다.

 

 

ProgressChanged 메서드

 

진행 경과 변경시 발생하게 된다. 

자세한건 밑에...

 

 

Completed 메서드

 

작업이 어떤식으로든 완료됐을 때 호출된다.

 

e의 매개변수로 취소가되었는지,

에러가 발생했는지

확인한다.

 

 

 

 

 

 

 

 

 

 

 

 

■ 로딩 윈도우 선언

 

 

LoadingWindow가 아까 만든 xaml 이다.

 

ERROR_FLAG는 일부러 예외발생시키려 만든 것이니

구현안해도 된다.

 

아까 만든 커스텀 이벤트를 밑에 두개 메서드와 연결해준다.

 

RunworkerAsync가 작업을 시작하는 메서드다.

 

CancelAsync는 취소를 요청하는 메서드.

 

 

 

 

 

 

 

 

마지막으로 메인 함수 컴포넌트 불러온 다음에 함수 호출하면 끝

 

 

 

 

 


 

ProgressBar를 이용한 방법

 

전체적으로 큰틀은 비슷하다.

 

 

■ 로딩 Window 만들기

 

아깐 이미지만 있던거완 달리 ProgressBar와 TextBlock 을 추가해주었다.

 

Main에서 쓸 수 있게 Name속성도 정해준다.

 

(버튼 부분은 완전 동일)

 

 

 

■ MainWindow 수정

■ BackgroundWorker 선언

 

ProgressChanged 메서드를 제외하고

 

나머진 위와 완전 동일하다.

 

DoWork 스레드에서 ReportProgress(<int>)를

호출하면

 

ProgressChanged 메서드가 동작한다.

 

로딩 윈도우의 ProgressBar와 Textblock을 수정해준다.

 

 

 

 

 

 

 

■ 로딩 윈도우 선언

 

위와 완전 동일하다.

 

 

 

마찬가지로 마지막에

 

만든 메서드 호출해주면 끝

 

 

 


데모 프로그램

UseGifImage.exe
0.47MB
UseProgressBar.exe
0.42MB