다음을 통해 공유

SimpleExpander

  • 아티클

이 페이지는 WPF 프로젝트에만 적용됨

확장기(Expander)는 콘텐츠가 표시되는 축소 가능 창과 헤더가 있는 콘텐츠 컨트롤입니다. Microsoft Expression Blend에서는 Header 속성을 수정하여 확장기의 제목을 지정할 수 있습니다. 확장기를 두 번 클릭한 후 요소를 그려 확장기에 콘텐츠를 넣을 수 있습니다. 확장기에 여러 요소를 넣으려면 먼저 Grid나 Canvas 같은 레이아웃 패널을 추가해야 합니다. 기본적으로 확장기에도 텍스트가 표시되며, 확장기를 마우스 오른쪽 단추로 클릭한 다음 텍스트 편집을 클릭하여 텍스트를 편집할 수 있습니다. 아트보드에서 확장된 확장기를 보려면 개체 및 타임라인에서 확장기를 마우스 오른쪽 단추로 클릭한 다음 Expander 확장을 클릭합니다.

SimpleExpander 컨트롤의 아트보드 보기

Cc294637.c43eef70-9797-41b2-af94-b3470f88c6c6(ko-kr,Expression.10).png

컨트롤 템플릿 분석

SimpleExpander 컨트롤 템플릿은 다음 항목으로 구성됩니다.

  • Grid - 확장기 내에 여러 자식 요소를 넣는 데 필요한 레이아웃 패널입니다. 또한 Grid를 사용하면 응용 프로그램 UI(사용자 인터페이스) 디자이너가 템플릿에 더 많은 요소를 손쉽게 추가할 수 있습니다. Grid는 헤더를 나타내는 Border 영역과 콘텐츠를 나타내는 ExpandSite 영역의 두 영역으로 구분됩니다.

  • Border 요소 - 이 템플릿이 적용되는 확장기 컨트롤의 BorderThickness 속성에 템플릿 바인딩할 수 있는 BorderThickness 속성이 들어 있어서 사용됩니다.

  • ToggleButton 요소 - Border 요소 내에 포함되며 확장기를 확장하고 축소합니다.

  • ContentPresenter 요소 - Grid 요소 내에 포함되며 이 템플릿이 적용되는 확장기 컨트롤의 Header 속성에 자동으로 바인딩됩니다.

  • ExpandSite 영역 아래의 ContentPresenter - 이 템플릿이 적용되는 확장기의 Content 속성을 표시하는 데 사용됩니다. 확장기가 제대로 작동하려면 두 ContentPresenter 요소가 모두 있어야 합니다.

    개체 보기: SimpleExpander 컨트롤의 기본 구성 요소(템플릿)

    Cc294637.ef0a93de-baf6-4563-9b58-ba0f5a703450(ko-kr,Expression.10).png

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif맨 위로 이동

속성 트리거 사용

컨트롤 템플릿의 속성 트리거는 컨트롤이 속성 변경에 응답하도록 하는 데 사용됩니다. 인터랙션 패널의 트리거 아래 항목을 클릭하여 트리거가 활성화될 때 변경되는 속성을 확인할 수 있습니다. 예를 들어 SimpleExpander 템플릿에서 IsExpanded 속성이 True가 되면 ExpandSite 영역이 표시됩니다.

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif맨 위로 이동

브러시 사용

SimpleExpander 템플릿에서는 SimpleStyles.xaml 리소스 사전의 다음과 같은 브러시 리소스가 사용됩니다.

  • Background 속성은 트리거가 활성화되지 않은 경우에는 LightBrush를, IsEnabled가 False인 경우에는 DisabledBackgroundBrush를 사용하여 설정됩니다.

  • BorderBrush 속성은 트리거가 활성화되지 않은 경우에는 NormalBorderBrush를, IsEnabled가 False인 경우에는 DisabledBorderBrush를 사용하여 설정됩니다.

  • Border 요소의 Background 속성은 트리거가 활성화되지 않은 경우 NormalBrush를 사용하여 설정됩니다.

  • ExpandSite 요소의 Background 속성은 트리거가 활성화되지 않은 경우 WindowBackgroundBrush를 사용하여 설정됩니다.

  • ExpandSite 요소의 BorderBrush 속성은 트리거가 활성화되지 않은 경우 SolidBorderBrush를 사용하여 설정됩니다.

  • Foreground 속성은 IsEnabled가 False인 경우 DisabledForegroundBrush를 사용하여 설정됩니다.

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif맨 위로 이동

모범 사례 및 디자인 지침

  • 일반적으로 디자이너가 컨트롤에 시각적 요소를 더 추가할 수 있도록 하려면 템플릿의 루트로 Grid 컨트롤을 사용합니다. 기본적으로 Expression Blend에서는 Grid 컨트롤과 같은 레이아웃 패널을 찾아 활성화함으로써 아트보드에 추가되는 새 요소가 해당 레이아웃 패널의 자식 요소가 되도록 합니다.

  • 확장기에는 ContentPresenter 요소가 두 개(하나는 헤더용이고 하나는 콘텐츠용) 있으므로 헤더의 ContentPresenter를 컨트롤의 클래스로 명시적으로 설정해야 합니다. 이렇게 하려면 템플릿의 Border 노드에서 ContentPresenter 요소의 ContentSource 속성을 Header로 설정합니다.

  • ToggleButton 요소에서는 ExpanderToggleButton이라는 별도의 템플릿을 사용합니다. 이 템플릿을 수정하려면 ToggleButton 요소를 마우스 오른쪽 단추로 클릭하고 컨트롤 구성 요소(템플릿) 편집을 가리킨 다음 템플릿 편집이나 복사본 편집을 클릭합니다. ToggleButton은 ToggleButton의 IsChecked와 확장기의 IsExpanded 간 바인딩을 통해 나머지 확장기에 연결됩니다. 이 속성을 제대로 업데이트하려면 이 바인딩을 유지해야 합니다. 양방향 바인딩을 사용하면 확장기를 프로그래밍 방식으로 확장할 수 있습니다.

  • 기본적으로 ExpandSite 영역은 축소되어 있으며 트리거에 의해 표시됩니다. 트리거는 이름으로 ExpandSite 요소를 참조하므로 ExpandSite 요소를 변경하거나 바꾸는 경우에는 IsExpanded 트리거도 업데이트해야 합니다.

Cc294637.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ko-kr,Expression.10).gif맨 위로 이동