BusyIndicator 컨트롤 이해하기

  

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-)
서비스를 불러올 때 로딩되는 시간을 나타내주는 로딩바!

BusyIndicator 컨트롤을 소개합니다.

 

 블렌드에서 제공하는 BusyIndicator의 기본모습입니다. 이렇게 꺼내놓고 보니 어떻게 쓰이는 컨트롤인지 감이 확 오실꺼에요.   

컨트롤 메뉴에서 BusyIndicator를 화면에 꺼냅니다.   

꺼냈을 때의 모습입니다. 이렇게 화면에 꺼내놓고 보니 어떤 컨트롤인지 잘 모르겠네요.   

어떤 컨트롤인지 파헤치기 위해 디자인 스타일을 만듭니다. BusyIndicator > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok   

디자인 수정 화면으로 들어가보니 로딩이 되었을 때의 모습이 나타납니다.   

레이어를 열심히 키고 꺼 봤더니 로딩에 관련된 애니메이션을 조절하는 레이어가 바로 이 녀석인가 봅니다.   

ProgressBar에 나만의 디자인을 씌우기 위해 스타일을 만듭니다. ProgressBar > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok   

푸른색 로딩 애니메이션을 조절하는 레이어가 보입니다. 과감히 삭제 하겠습니다.   

Move라는 그리드 안에 Canvas를 넣고 캔버스안에 연한 회색네모를 넣은 다음 아래에 공간을 줍니다. 하나의 캔버스에 각도를 조정해 다음과 같은 이미지를 만듭니다.   

상단에 state 창을 누릅니다. 반복 패턴을 통해 로딩 애니메이션을 구현하기 위해 Indeterminate을 활성화 합니다.   

Indeterminate를 활성화 시키면 아래에 스토리보드가 활성화 됩니다. 여기서 원하는 애니메이션을 주면 로딩이 걸릴 때 애니메이션이 나오게 됩니다. 저는 연한 회색에서 순차적으로 진한 회색이 되는 애니메이션을 구현했습니다.   

  메인화면에 돌아와 보니, 이렇게 봐서는 잘 모르겠네요.   

 

오른쪽 Common Properties창에서 IsBusy를 체크해주세요. 그러면 로딩이 걸린 모습으로 나타나게 됩니다.

네모 박스 등 정렬을 조금 정리하고 빌드(F5)를 합니다.

  

 

빌드했을 때 화면입니다 :)