개발(IT)/DevExpress 교육자료

2.Navigation Controls - Ribbon Demo1

isony 2023. 11. 19. 21:44
반응형

(1) Ribbon 컴포넌트 사용법

- Ribbon  컴포넌트 기본 사용법에 대해서 나누어 알아보겠습니다.

- 기본 프로그램에 Ribbon Control 컴포넌트 추가

- Ribbon Status Bar 컴포넌트 추가

- Ribbon Control 컴포넌트 추가후 Convert Form to RibbonForm 선택하여 기본폼을 Ribbon 폼으로 변경

- Ribbon 폼으로 변경됨 모습

- Ribbon Control에서 Ribbon Style 를 Office2009로 선택해 보겠습니다.(원하시는 Style 선택)

- ribbonPage1 -> ribbonPageGroup1 에서 추가 Item를 Button 선택합니다.

- 아래 Ribbon Status Bar에서도 Static Text Item를 선택해 봅니다.

- 다시 ribbonPage1 -> ribbonPageGroup1 에서 추가 Item를 Button 한번 더 선택합니다.

- ribbonPage1 -> ribbonPageGroup1 2개의 Button Item을 선택한 상태 입니다.

- ribbonPage1 옆에 아이콘 Add Page를 선택해서 ribbonPage2를 만들어 봅니다.

- ribbonPage1 -> ribbonPageGroup1 에서 옆 아이콘 Add Page Group를 선택해서 Page Group 추가 합니다.

- 추가된 ribbonPage1 -> ribbonPageGroup2 에서 Text와 Show Caption Button 수정

- Text : Gallery 입력

- Show Caption Button : True 선택

- 다시 ribbonPage1 -> ribbonPageGroup1 에서 Tobble Swith Item를 추가 해봅니다.

- 그리고, ribbonPage1 -> ribbonPageGroup2 (Gallery) 에서 Image Gallery Item를 선택합니다.

- ribbonPage1 -> ribbonPageGroup2 (Gallery)  작업에서 Add Group을 2번 선택합니다.

- 아래와 같이 빨란 점선이 2개 생성 됨을 확인 할 수 있습니다.

- 생성된 Group중 첫번째 점선박스에서 오른쪽 마우스를 클릭하면 아래와 같이 팝업이 보이게 됩니다.

- Add Gallery Item를 선택합니다.

- 위와 같이 첫번째 Group 에서 Add Gallery Item를 3번 선택하고 2번재 Group 에서 Add Galley Item를 4번 선택합니다.

- 아래 그림은 2번, 3번 선택하여 점선이 2개와 3개가 표시 되어있습니다.

- 전선박스가 3개와 4개를 만들어 주시면 됩니다. 뒤에서 추가로 추가해도 상관 없습니다.

- 이제 첫번째 Group에서 첫번째 Gallery Item(빨간점선) 작업을 선택해서 Caption과 Image를 변경해 주세요.

- Caption : Top

- Image -> DX Vector Images -> Align 에서 윗쪽 아이콘 3번째 아이콘을 선택합니다.

- 이와 같은 방법으로 첫번째 Group에 Gallery Item을 선택해서 3개 모두 수정해 주세요

- Caption : Top, Middle, Bottom

-  Image -> DX Vector Images -> Align 에서 윗쪽, 중간, 아래 아이콘 선택

- 아래와 같이 화면에 표시됩니다.

- 두번째 Group에서도 작업창을 열어 수정해 주세요 (4개 모두)

- Caption : Left, Center, Right, Block

- Image -> DX Vector Images -> Format 에서  아이콘을 하나씩 선택해서 주세요.

- 모두 선택을 하시면 아래와 같이 표시되어 있는것을 확인할수 있습니다.

- 이제 속성탭에서 Gallery -> ShowItem Text를 True로 변경해 보겠습니다.

- Gallery -> ShowItem Text : True 변경

- 이제 Gallery Page Group의 작업 창을 열어 Super Tip를 입력해 보겠습니다.

- Super Tool Tip Editor 팝업창에서 Item 추가하고 설명을 넣어 보겠습니다.

- 아래와 같이 Title, Content, Separator, Contect를 추가 합니다.

- Title Item에서 SvgImage에서 아이콘을 하나 선택해 보겠습니다.

- Dx Vector Images에서 임의로 하나를 선택합니다.

- 그리고 추가된 항목에 설명을 하나씩 넣어 보겠습니다.

- 첫번째 설명

- 두번째 설명

- 세번째 설명

- 이렇게 모두 완료 되었으면 프로그램을 실행해 보겠습니다.

(2) 실행 화면

- 실행화면에서 Gallery Page Group에서 아래와같이 버튼을 선택해 보면 전체화면이 팝업으로 볼수 있습니다.

- 버튼 선택시 팝업화면 입니다.

- Gallery Page Group 에서 아래와 같이 아이콘을 선택하면 좀전에 입력한 Super Tip이 보이게 됩니다.

- ribbonPageGroup1에서 Item에서 오른쪽 마우스를 클릭해서 Add to Quick Access Toolbar를 선택할 수 있습니다.

- Add to Quick Access Toolbar 선택시 아래와 같이 표시됨을 확인 할 수 있습니다.

- 다시 해당 Item에서 오른쪽 마우스를 클릭해서 Remove from Quick Access Toolbar를 선택해서 해제가능

- ribbonPage1 메뉴바를 더블클릭하면 아래 ribbon page group를 않보이게 할수 있습니다.

- 아래와 같이 사라졌을때 마우스 클릭을 하면 일시적으로 나타나고 사라지는것을 확인할수 있습니다.

- 지금까지 Ribbon Control 기능에 대해서 알아보았습니다.

- 계속 이어서 다음 페이지를 통해 Ribbon 컴포넌트 기능에 대해서 알아 보겠습니다.

(3) 소스

- 기본 소스

sample_2_7.zip
0.01MB

 

반응형

'개발(IT) > DevExpress 교육자료' 카테고리의 다른 글

2.Navigation Controls - Ribbon Demo3  (0) 2023.11.26
2.Navigation Controls - Ribbon Demo2  (0) 2023.11.26
2.Navigation Controls - Demo3  (0) 2023.11.06
2.Navigation Controls - Demo2  (0) 2023.11.06
2.Navigation Controls - Demo1  (0) 2023.11.01