표시기 아키텍처
시각적 디자인 환경에는 디자인 화면의 특수한 문자 모양인 표시기(Adorner)가 필요합니다. 표시기는 일반적으로 대상 컨트롤에 연결되며 컨트롤의 속성 조정을 그래픽으로 표현합니다. 예를 들어 컨트롤을 디자인할 때 모퉁이를 클릭하여 크기를 조정하는 경우 클릭하는 크기 조정 문자 모양이 표시기입니다.
신속하고 간편하게 표시기의 초안을 작성하고, 세부 사항을 조정하며, 스타일을 다시 지정할 수 있는 기능은 WPF Designer 아키텍처에서 중요한 기능입니다. 이 개요에서는 컨트롤의 디자인 환경을 사용자 지정하기 위해 WPF Designer 표시기 확장 모델을 사용하여 사용자 고유의 표시기를 간편하게 만드는 방법에 대해 설명합니다.
WPF Designer에서는 표시기를 표시하기 위한 유연한 메커니즘을 제공합니다. 이 메커니즘은 표시기에서 사용자 입력에 응답할 수 있도록 하는 유연한 명령 시스템과 결합되어 있습니다. 표시기는 IProvideAttributeTable 인터페이스를 구현하여 컨트롤에 추가합니다.
표시기 유형
표시기는 거의 모든 시각적 디자인 타임 표현을 모델링할 수 있지만 일부 표시기 유형은 반복적으로 나타납니다. 다음 표에서는 주로 사용되는 표시기에 대해 설명합니다.
표시기 |
설명 |
|---|---|
잡기 핸들 |
컨트롤을 배율 조정 없이 이동하거나 크기 조정할 수 있습니다. |
레일 |
단일 축상에서 크기 조정되지 않는 표식이나 눈금자를 컨트롤의 한 쪽 면을 따라 추가합니다. |
프레임 |
컨트롤의 범위를 나타내며 양 축을 따라 크기 조정됩니다. |
오버레이 |
컨트롤 영역에서 마우스 상호 작용을 캡처하며 양 축을 따라 크기 조정됩니다. System.ComponentModel 디자이너 프레임워크의 본문 문자 모양과 거의 동일합니다. |
표시기 특성
WPF Designer 프레임워크에서는 다음과 같은 특성을 지니는 표시기를 사용할 수 있습니다.
표시기가 UIElement 클래스에서 파생되고 Windows Presentation Foundation 스타일을 지원할 수 있습니다.
가로 및 세로 크기에 모든 크기, 위치 및 배율을 개별적으로 지정할 수 있습니다..
표시기 기본 클래스가 필요하지 않습니다. 표시기 유형은 필요에 맞는 임의의 UIElement 유형에서 파생될 수 있습니다.
사용자 지정 표시기 만들기
표시기는 AdornerProvider 기능 공급자에서 제공합니다. 디자인 화면에 표시기를 자동으로 추가하는 AdornerProvider 기능을 클래스에 추가할 수 있습니다. 다음 연습에서는 사용자 지정 표시기를 만드는 방법을 보여 줍니다.
표시기 확장성
표시기는 표시기 공급자의 정책에 따라 추가됩니다. 클래스 정의에 UsesItemPolicyAttribute를 추가하여 AdornerProvider에 정책을 추가할 수 있습니다.
IsInPolicy 확인에 성공하면 표시기가 디자인 화면에 표시됩니다.
지정한 정책에 맞는 표시기를 제공하는 컨트롤에 표시기 공급자를 추가할 수 있습니다. 정책의 항목이 변경되면 표시기 기능 커넥터에서 새 컨트롤에 새 표시기 공급자가 있는지 쿼리하고 업데이트된 표시기 집합을 표시합니다.
WPF Designer에서는 기본 선택 내용에 표시되는 표시기 집합을 제공하는 PrimarySelectionAdornerProvider를 구현합니다. 대부분의 사용자 지정 표시기는 이 클래스에서 파생됩니다.
표시기 및 레이아웃
표시기에서 가장 중요한 문제는 레이아웃입니다. 표시기에는 다양한 레이아웃 옵션이 필요합니다. 디자인 화면의 확대/축소 설정을 변경하는 경우 표시기와 관련된 늘어나는 동작이나 크기 조정 동작을 고려해야 합니다. 표시기는 다음과 같은 체계에 따라 자신의 크기와 위치를 조정할 수 있어야 합니다.
적용된 스타일이 기준인 경우
표시된 컨트롤의 크기 및 위치가 기준인 경우
절대 픽셀 오프셋이 기준인 경우
현재 확대/축소 설정이 기준인 경우
WPF에서 레이아웃을 제어하기 위한 일반적인 메커니즘은 패널입니다. WPF Designer 프레임워크에서는 디자인 화면에서 지정한 컨트롤의 부모 표시기에 AdornerPanel 클래스를 사용하여 레이아웃을 제어합니다.
AdornerPanel 클래스에서 제공하는 메서드를 사용하여 표시된 컨트롤을 기준으로 adorner를 배치하고 해당 크기를 조정할 수 있습니다. adorner 위치를 지정하려면 SetAdornerHorizontalAlignment, SetAdornerVerticalAlignment, and SetAdornerMargin 메서드를 사용합니다.
참고
컨트롤을 표시기로 다른 컨트롤에 추가하면 표시되는 컨트롤의 폭, 높이 및 변형에 맞춰 표시기 컨트롤이 정렬됩니다. 이에 따라 클리핑 문제가 발생할 수 있습니다. 컨트롤을 Canvas에 추가하고 캔버스를 표시기로 추가하면 이러한 클리핑 문제를 가장 간단하게 해결할 수 있습니다. Canvas의 폭과 높이는 조정되지만 Canvas 컨트롤의 경우 클리핑되거나 콘텐츠에 맞게 크기가 조정되지 않기 때문에 사용자의 컨트롤은 캔버스 내에서만 정렬됩니다.
다음 코드 예제에서는 대상 컨트롤 위에서 표시기의 위치를 지정하는 방법을 보여 줍니다.
' Setup the adorner panel.
' All adorners are placed in an AdornerPanel
' for sizing and layout support.
Dim myPanel = Me.Panel
' The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment( _
opacitySlider, _
AdornerHorizontalAlignment.Stretch)
' Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment( _
opacitySlider, _
AdornerVerticalAlignment.OutsideTop)
' Position the adorner 5 pixels above the control.
AdornerPanel.SetAdornerMargin( _
opacitySlider, _
New Thickness(0, 0, 0, 5))
// Setup the adorner panel.
// All adorners are placed in an AdornerPanel
// for sizing and layout support.
AdornerPanel myPanel = this.Panel;
// The slider extends the full width of the control it adorns.
AdornerPanel.SetAdornerHorizontalAlignment(
opacitySlider,
AdornerHorizontalAlignment.Stretch);
// Position the adorner above the control it adorns.
AdornerPanel.SetAdornerVerticalAlignment(
opacitySlider,
AdornerVerticalAlignment.OutsideTop);
// Position the adorner 5 pixels above the control.
AdornerPanel.SetAdornerMargin(
opacitySlider,
new Thickness(0, 0, 0, 5));
확대/축소 동작
디자이너 뷰의 확대/축소 설정이 200%로 변경되면 표시된 컨트롤이 2배 크기로 렌더링됩니다. 모든 거리와 글꼴이 커지고 선이 굵어집니다. 많은 표시기 디자인에서는 디자이너 뷰 확대/축소 설정이 변경하더라도 표시기의 원래 크기가 유지되도록 지정합니다.
디자이너 뷰
DesignerView 클래스에서는 표시기 컬렉션을 제공하며 모든 사용자 입력을 디자이너 제스처에 매핑합니다. DesignerView 클래스는 Decorator 클래스에서 파생됩니다. 이 클래스는 디자이너의 시각적 화면을 제공합니다. 디자이너 UI의 루트 요소를 DesignerView의 Child 속성에 할당하고 디자이너 뷰의 편집 컨텍스트 속성이 디자이너의 편집 컨텍스트를 가리키도록 설정합니다.
DesignerView view = new DesignerView();
view.Child = documentManager.View;
view.Context = editingContext;
DesignerView 클래스는 WPF Designer의 두 측면을 구현합니다.
표시기
DesignerView 클래스는 디자인할 컨트롤을 오버레이하는 시각적 장식을 추가로 사용하여 뷰에서 요소를 표시할 수 있습니다.
입력 라우팅
DesignerView 클래스는 사용자 입력을 표시기, 도구 및 작업의 명령에 라우팅합니다.
DesignerView 클래스는 모든 컨텐츠 앞에 오는 표시기 계층 및 적중 테스트 계층이라는 추가 요소를 사용하여 작동합니다. 다음 다이어그램에서는 디자이너 뷰 계층과 시각적 트리의 관계를 보여 줍니다.
.png "디자이너 뷰")
DesignerView 클래스에는 XAML에서 사용하기 위한 빈 생성자가 있습니다.