개발(IT)/DevExpress 교육자료

2.Navigation Controls - DockManager Demo

isony 2023. 12. 3. 14:47
반응형

(1) DockManager 컴포넌트 사용법

- Navigation Controls - DockManager에 대한 사용법에 대해서 공부해 보겠습니다.

 

(2) 소스

sample_2_15.zip
0.01MB

 

 

 

(3) 기본기능 따라해 보기

- DockManager를 검색해서 Form1 디자인에 추가 합니다.

- 선택된 DockManager (dockManager1)에서 DockManager 작업 선택합니다.

- Add Panel at Left 선택 추가합니다. (dockPanel1 추가된 화면)

- 이번에는 Add Float Panel를 선택 추가합니다. (dockPanel2 추가된 화면)

- 지금까지 내용을 간단하게 실행해서 확인해 보겠습니다. (아래 실행화면)

- 추가된 dockPanel2를 마우스 왼쪽클릭한 상태에서 움직이면 아래와 같은 화면이 나오게 됩니다.

- 원하는 위치를 선택해서 옮겨 다닐수 있습니다.

- 실행 예1) - 오른쪽

- 실행 예2) - 윗쪽

- 실행 예3) - 왼쪽 기존 dockPanel1에 포함해서 같이 표시

- 위쪽 핀버튼을 선택시 탭메뉴위치가 변경되는 것을 확인할수 있습니다.

 

- 실행화면 종료후 다시 프로그램 화면으로 와서 dockPanel1에 DockPanel 작업

- Text 변경 : dockPanel1 -> Navigation

- Add Curstom Header Buttons 선택

- CustomHeaderButtons 팝업창에서 Item를 추가

- Add : 2번 눌러 추가 합니다.(Item 추가화면)

- dockPanel1선택후 CustomButtonClick 더블클릭후 소스를 추가합니다.

- 클릭시 임의 실행을 Script로 테스트

 

- 아래 dockManager1에서 DockManager 작업 선택 -> Customize 선택

- Customize 선택후 Dock Panels에서 New 선택 -> dockPanel3 추가

- dockPanel3 추가된 화면 

- 추가된 dockPanel3를 마우스 왼쪽클릭후 드래그해서 dockPanel2에 포함합니다.

- dockPanel2와 dockPanel3이 합쳐진 상태

- dockManager1에서 Customize 선택후 Dock Containers에 보시면 합쳐진 내용을 확인할수 있습니다.

 

- panelContainer1 체크박스를 선택/해제로 표시여부를 확인할수 있습니다.

- 테스트 실행회 드레그를 통해 확인해 보시기 바랍니다.

- 감사합니다.

반응형