1. DevExpress 강좌3-4 (SDI Demo)
- 유연한 폼양식을 사용하기 데모 입니다.
(1) 기본데모 프로그램
- 아코드언 컨트롤(accordion)과 기본 양식에 제목 표시줄에 버튼을 추가할 수 있는 디자이너 표시기도 볼 수 있습니다.
- SDI 애플리케이션의 도구상자에서 NavigationFrame 을 추가하고 사용가능한 공간을 채우기 위해 Docking 합니다.
- 내장된 탭이 있는 솔루션을 선호하는 경우 탭을 사용할 수 있습니다. NavigationFrame에는 기본적으로 두개의 페이지가 포함되어 있으며 디자인너에 패널을 표시하여 페이지를 변경하고 새 페이지를 추가하거나 제거합니다.
- 첫 번째 페이지의 이름을 gridPage로 변경하고 도구상자에서 그리드 사용자 컨트롤을 추가하여, Dock (None -> Fill) 변경합니다. ( 사용자 컨트롤이 표시가 않되는 경우 솔루션 다시빌드를 하시면 표시가 됩니다. - 실행했다 종료해도 됨)
- 두번째 페이지는 이름을 richEditPage로 변경하고 리치편집 사용자 컨트롤을 추가하고, Dock (None -> Fill) 변경합니다.
- 이제 아코디언 컨트롤(accordion control)에 항목을 추가합니다(Element2).
- 첫번째 항목에 대해 기존항목의 스타일을 항목으로 변경합니다.
- Style : Group -> Item
- Text : Element1 -> Grid, Element2 -> Rich Edit
- 두 항목 모두에 이벤트 핸들러를 추가하고, 기능을 구현하기 위해 Navigation Frame의 활성 페이지를 변경합니다.
- navigationFrame1의 기본 SelectedPage를 gridPage로 변경합니다.
(2) 실행
- 메뉴 Grid와 Rich Edit를 선택하면 오른쪽 프레임이 애니메이션으로 변경되는것을 확인할 수 있습니다.
- 전환유형 및 전환 애니메이션은 속성을 살펴보세요 (TransitionType 변경)
(3) 수정 및 실행
- Navigation Frame에 이벤트 핸들러 쿼리 컨트롤을 구현하고, 이벤트 아크의 페이지에 따라 새 컨트롤을 반환합니다.
- Navigation Frame은 MDI 샘플에 대해 시현한 것처럼 도구모음 메뉴 및 리본에 대한 병합을 지원합니다.
- MainFormWithRibbon 데모에서 이러한 구성을 확인해 보겠습니다.
- 소스를 보시면 QueryControl 부분이 변경되어 있습니다.
- 프로그램 실행(Progrma.cs)을 기본에서 MainFormWithRibbon으로 변경합니다.
(4) 실행
- 실행하면 navigationFrame1이 자동으로 이전과 같이 그리드 페이지를 표시하고, 리본이 변경되는 리치 편집페이지로 전환하면 리본의 도구그룹에서 그리드 특정 버튼을 볼 수 있습니다.
- Visual Studio에서 다시 Rich Edit 사용자 컨트롤에 대한 설정과 병합합니다.
- 이 설정을 위해 구성한 두 가지 속성을 확인해야 합니다.
- 첫 번째는 최상위 리본에 있습니다. MDI 병합 스타일을 항상(Always), MDI 데모에서 했던 것처럼 설정되어 있습니다.
- 두 번째는 navigationFrame1 데모의 마지막 부분에 리본과 막대 병합 스타일이 설정되어 있습니다.
- RibbonAndBarsMergeStyle : Always
(5) 프로그램 Form 변경
- Program.cs 코드를 다시 변경합니다. ( MainFormWithTileNavPane )
- DevExpress 프로젝트 설정을 변경합니다.
- Skin Name : The Bezer
- Skin Palette : Office Dark Gray
- MainFormWithTitleNavPane Disign 확인
- Run Designer을 불러오면 그리드와 리치 편집 항목이 있는 타일로 표시되는 요소의 계층 구조를 볼 수 있습니다.
- 여러 하위 항목이 표시된 샘플버튼 양식에서 다시 볼 수 있습니다. (추가 최상위 항목도 볼 수 있습니다.)
- 심플버튼(Button)과 카테고리버튼(Category)을 사용하면 중요한 기능에 쉬게 액세스 할 수 있지만 이러한 항목은 제한해야 합니다.
- 타일 탐색 창 중앙에 있는 공간은 런타임에 탐색 트레일을 표시하는데 사용됩니다.
- 카테고리버튼(Category)에는 태그(Tag) 메뉴을 통해 구성할 수 있는 자체 관련 계층이 있다는 점에 유의하세요.
(6) 프로그램 실행
- 기본 메뉴을 열고 선택하면, 연속 탐색을 사용하도록 타일 탐색 창을 구성한 이후의 카테고리 타일 간단한 최상위 속성 설정, 선택한 카테고리가 증시 확장되고 항목이 강장 오른쪽 버튼에 표시됩.
- 하위 항목을 볼 수 있음, 타일 창
- 오른쪽에 있는 카테고리 버튼을 계층 구조를 동일한 방식으로 표시하지만 타일 창에 영향을 주지는 않습니다.
2. 프로그램 소스
'개발(IT) > DevExpress 교육자료' 카테고리의 다른 글
DevExpress 강좌3-5 (SUI Demo) #2 (0) | 2024.02.01 |
---|---|
DevExpress 강좌3-5 (SUI Demo) #1 (0) | 2024.02.01 |
DevExpress 강좌3-3 (Document Demo) (0) | 2024.01.22 |
DevExpress 강좌3-2 (MDI Demo) (0) | 2024.01.21 |
DevExpress 강좌3-1 (MDI Demo) (0) | 2024.01.20 |