2.Navigation Controls - Accordion Demo

(1) AccordionControl 컴포넌트 사용법

- DevExpress의 AccordionControl은 사용자 인터페이스(UI)에서 네비게이션 및 그룹화된 정보를 표시하기 위해 사용되는 강력한 컨트롤입니다. 

- AccordionControl의 메뉴 사용에 대해서 공부해 보겠습니다.

 

(2) 소스

sample_2_13.zip

0.01MB

 

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

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

 

- 추가된 AccordionControl 작업에서 Choose Dock Style를 None -> 왼쪽(Left) 변경

- 다시 AccordionControl 작업에서 Add Group 1개 추가 와 Add Item 2개 추가 선택합니다.

- Group Element1를 선택해서 Add Item 3개 추가 선택합니다.

- Group Element2를 선택해서 Add Item 2개 추가 선택합니다.

- 이번에는 Group Element -> Item Element5를 선택합니다

- Image Packer 선택 ->  sett 검색 -> Setting Image 선택

- 계속해서 Group Element -> Item Element5에서 Control 버튼 -> ToggleSwitch 선택

- ToggleSwitch 표시확인

- Element5와 ToggleSwitch의 위치를 좌우를 아래 버튼을 사용해서 서로 바꿀수 있습니다.

- AccordionControl (accordtionControl1)를 선택해서 ShowItemControl -> Alwary(항상표시)로 선택합니다.

- 여기까지 내용을 저장하고 실행해서 확인해 봅니다.

- (실행화면) 위에 검색창을 사용하여 메뉴를 바로 검색할수 있습니다.

- AccordionControl  메뉴가 잘 작동되는것을 확인할수 있습니다.

- 다시 프로그램으로 돌아와 계속하겠습니다.

- AccordionControl (accordtionControl1)를 선택 AccordionControl 작업 -> Run Designer 선택

- Accordon Control Designer 팝업창으로 메뉴 표시 형식을 변경 할수 있습니다.

- View Type (Standard <-> Hamburge)

- Root Display Mode (Default <-> Footer)

- View Type를  Standard -> Hamburge로 변경하고 Close

- OptionsHamburgerMode -> DisplayMode를 사용해서 실행시 Display 초기화면을 선택할수 있습니다.

- 지금까지 내용으로 실행해서 확인해 보겠습니다.

 

(4) 실행 화면

- 아래 버튼을 눌렀을때 변경되는것을 확인할수 있습니다.

- 윗 화면에서 버튼 선택시 변경된 화면입니다.

감사합니다.