(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) 소스
- 기본 소스
'개발(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 |