2.Navigation Controls - Ribbon Demo4

(1) Ribbon 컴포넌트 사용법

- Demo3에 대해서 이어 사용법에 대해서 알아보겠습니다.

- 이번에는 Ribbon 컴포넌트에 포함된 Application Button에 대해서 알아보겠습니다.

 

(2) 소스

sample_2_10.zip

0.02MB

 

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

- 아래에 표시된것과 같은 Application Button을 확인할수 있습니다.

- 오른쪽 옵션과 같이 ShowApplicationButton Default로 되어 있습니다. (Default = true)

 

- Ribbon Control 작업에서 'Add Backstage View (Office 2010/13 Style Menu)' 선택

 

- 'Add Backstage View (Office 2010/13 Style Menu)' 선택시 아래와 같이 창 하나가 생성됩니다.

- Ribbon Control (ribbonControl1) -> ApplicationButtonDropDownControl : backstageViewControl1 자동 선택되어 있습니다.

 

- BackstageViewControl 작업을 선택하고, 순서대로 Add Tab, Add Separator, Add Command 를 추가합니다.

 

- Add Command 추가시 backstageViewButtonItem1을 선택

- Caption : Quit 수정

 

- backstageViewButtonItem1을 더블클릭후 소스를 추가 합니다.

 

- 다시 메인폼(Form1)으로 되돌아와 컴포넌트를 추가 합니다.

- 왼쪽 도구 상자에 sample_2_10이 표시되어 있지 않는다면, 현재 상태에서 실행했다가 종료하면 생성되어 있습니다.

- 첫번째 Item backstageViewClientControl1를 선택, Caption : Placeholder 변경, Placeholder 컴포넌트 추가 

 

- Placeholder 컴포넌트 추가후, Dock : Fill변경 

 

- 두번째 Item backstageViewTabItem2 선택후, Caption : Open 변경

- 'Add RecentItemControl' 선택(추가) 합니다.

 

- 아래와 같이 화면이 변경됩니다.

- RecentItemControl 작업 -> Title 변경 : Title -> Recent Files

 

- Title : Recent Files 아래 탭이 2개로 나누어져 있습니다.

- 왼쪽 탭에서 RecentItemControl 작업 선택후, 순서대로 추가합니다.

- Add ButtonItem, Add HyperLinkItem, Add LabelItem, Add PinItem

 

- PinItem recentPinItem1에서 Image를 변경해 보겠습니다.

- 아래와 같이 순서대로 선택해 보시면 됩니다.

 

- PinItem recentPinItem1에 대해서 추가로 수정합니다.

- Caption : Settings

- Description : Find Importent ...

- GlyphAlignment : Center

- PinButtonVisibility : Never

 

- 그리고, 추가로 'Add TabItem'를 두번 선택하여 아래와 같이 추가합니다.

 

- 첫번째 TabItem recentTabItem1 선택후

 

- 오른쪽 탭에서 순서대로 추가합니다.

- Add ButtonItem, Add ButtonItem, Add ContainerItem

 

-  ContainerItem 선택후 FillSpace : True 로 변경 (저는 버젼이 달라 FillSpace를 찾을수 없어 그냥 드래그해서 키웠습니다)

 

- 그리고, Placeholder 컴포넌트를 추가후 Dock를 Fill 변경

 

- 기본 셋팅이 모두 끝났습니다.

- Application BackstageViewControl를 않보이게 하고자 하실때는 아래와 같이 'Hide in DesignTime'를 선택합니다.

 

- 위 내용 화면을 다시 보이고자 하실때는 아래 컴포넌트 backstageViewManager1에서 'Show BackstageView'를 선택하면 됩니다.

 

(4) 실행 화면

- 실행후 아래에 있는 Application Button를 클릭해서 확인해 봅니다.

 

- 지금까지 수고한 내용이 정상적으로 잘 표시되고 있습니다.

 

감사합니다.