Popup 개요

아티클
08/10/2011

Popup 컨트롤은 지정된 요소나 화면 좌표를 기준으로 현재 응용 프로그램 창 위에 있는 별도의 창에 콘텐츠를 표시할 수 있는 방법을 제공합니다. 이 항목에서는 Popup 컨트롤을 소개하고 기본적인 사용 방법에 대한 정보를 제공합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

Popup 정의
Popup 만들기
Popup을 구현하는 컨트롤
Popup 동작 및 모양
Popup 위치 정의
Popup 및 시각적 트리
관련 항목

Popup 컨트롤은 요소나 화면의 지점을 기준으로 별도의 창에 콘텐츠를 표시합니다. Popup이 표시되면 IsOpen 속성은 true로 설정됩니다.

참고
마우스 포인터를 해당 부모 개체 위로 이동할 때 Popup이 자동으로 열리지는 않습니다.Popup이 자동으로 열리게 하려면 ToolTip 또는 ToolTipService 클래스를 사용합니다.자세한 내용은 도구 설명 개요를 참조하십시오.

다음 예제에서는 Button 컨트롤의 자식 요소인 Popup 컨트롤을 정의하는 방법을 보여 줍니다. Button에는 자식 요소가 하나만 있을 수 있으므로 이 예제에서는 Button 및 Popup 컨트롤의 텍스트를 StackPanel에 배치합니다. Popup의 콘텐츠는 TextBlock 컨트롤에 표시됩니다. 이 컨트롤은 관련 Button 컨트롤 근처의 응용 프로그램 창 위에 있는 별도의 창에 텍스트를 표시합니다.

<Button HorizontalAlignment="Left" Click="DisplayPopup" 
        Width="150" Margin="20,10,0,0">
  <StackPanel>
    <TextBlock>Display Your Popup Text</TextBlock>
    <Popup Name="myPopup">
      <TextBlock Name="myPopupText" 
                 Background="LightBlue" 
                 Foreground="Blue">
        Popup Text
      </TextBlock>
    </Popup>
  </StackPanel>
</Button>

<Button Name="ButtonForPopup" HorizontalAlignment="Left" 
        Click="CreatePopup"  
        Width="150" Margin="20,10,0,0">
  <StackPanel Name="aStackPanel">
    <TextBlock>Create Popup</TextBlock>
  </StackPanel>
</Button>

Popup을 구현하는 컨트롤

Popup 컨트롤을 다른 컨트롤로 빌드할 수 있습니다. 다음 컨트롤은 특정한 용도의 Popup 컨트롤을 구현합니다.

ToolTip. 요소에 대한 도구 설명을 만들려면 ToolTip 및 ToolTipService 클래스를 사용합니다. 자세한 내용은 도구 설명 개요를 참조하십시오.
ContextMenu. 요소의 상황에 맞는 메뉴를 만들려면 ContextMenu 컨트롤을 사용합니다. 자세한 내용은 ContextMenu 개요를 참조하십시오.
ComboBox. 표시하거나 숨길 수 있는 드롭다운 목록을 포함하는 선택 컨트롤을 만들려면 ComboBox 컨트롤을 사용합니다.
Expander. 콘텐츠를 표시하는 축소 가능한 영역과 함께 헤더를 표시하는 컨트롤을 만들려면 Expander 컨트롤을 사용합니다. 자세한 내용은 Expander 개요를 참조하십시오.

Popup 컨트롤에서는 컨트롤의 동작과 모양을 사용자 지정할 수 있는 기능을 제공합니다. 예를 들어 열기 및 닫기 동작, 애니메이션, 불투명 및 비트맵 효과, Popup 크기 및 위치 등을 설정할 수 있습니다.

열기 및 닫기 동작

Popup 컨트롤에서는 IsOpen 속성이 true로 설정되어 있는 경우에 해당 콘텐츠를 표시합니다. 기본적으로 Popup은 IsOpen 속성이 false로 설정될 때까지 계속 열려 있습니다. 그러나 StaysOpen 속성을 false로 설정하여 기본 동작을 변경할 수 있습니다. 이 속성을 false로 설정하면 Popup 콘텐츠 창이 마우스 캡처를 얻습니다. Popup 창 외부에서 마우스 이벤트가 발생하면 Popup이 마우스 캡처를 잃고 창이 닫힙니다.

Opened 및 Closed 이벤트는 Popup 콘텐츠 창이 열리거나 닫힐 때 발생합니다.

애니메이션

Popup 컨트롤에서는 일반적으로 페이드 인 및 슬라이드 인과 같은 동작에 연결되는 애니메이션을 기본적으로 지원합니다. PopupAnimation 속성을 PopupAnimation 열거형 값으로 설정하여 이러한 애니메이션을 설정할 수 있습니다. Popup 애니메이션이 제대로 작동하려면 AllowsTransparency 속성을 true로 설정해야 합니다.

또한 Storyboard와 같은 애니메이션을 Popup 컨트롤에 적용할 수도 있습니다.

불투명 및 비트맵 효과

Popup 컨트롤의 Opacity 속성을 설정해도 해당 콘텐츠에는 영향이 없습니다. 기본적으로 Popup 콘텐츠 창은 불투명합니다. 투명한 Popup을 만들려면 AllowsTransparency 속성을 true로 설정합니다.

Popup의 콘텐츠는 Popup 컨트롤이나 부모 창의 다른 요소에서 직접 설정하는 DropShadowBitmapEffect와 같은 비트맵 효과를 상속하지 않습니다. Popup의 콘텐츠에서 비트맵 효과를 표시하려면 해당 콘텐츠에서 직접 비트맵 효과를 설정해야 합니다. 예를 들어 Popup의 자식이 StackPanel인 경우 StackPanel에서 비트맵 효과를 설정합니다.

기본적으로 Popup은 해당 콘텐츠에 맞게 크기가 조정됩니다. 자동 크기 조정이 발생할 때 Popup 콘텐츠에 대해 정의한 화면 영역의 기본 크기가 비트맵 효과를 표시할 충분한 공간을 제공하지 않기 때문에 일부 비트맵 효과가 숨겨질 수 있습니다.

또한 콘텐츠에서 RenderTransform을 설정하는 경우에도 Popup 콘텐츠가 가려질 수 있습니다. 이 경우 변환된 Popup의 콘텐츠가 원래 Popup의 영역을 넘어 확장되어 일부 콘텐츠가 숨겨질 수 있습니다. 비트맵 효과나 변환에 추가 공간이 필요한 경우 컨트롤에 더 많은 영역을 제공하기 위해 Popup 콘텐츠 주위에 여백을 정의할 수 있습니다.

PlacementTarget, PlacementRectangle, Placement, HorizontalOffset 및 VerticalOffsetProperty 속성을 설정하여 팝업을 배치할 수 있습니다. 자세한 내용은 Popup 배치 동작을 참조하십시오. 화면에 표시된 Popup은 해당 부모 항목의 위치가 변경되더라도 이전 위치를 유지합니다.

Popup을 표시할 PlacementTarget을 기준으로 하는 좌표 집합을 지정하여 Popup 컨트롤의 배치를 사용자 지정할 수 있습니다.

배치를 사용자 지정하려면 Placement 속성을 Custom으로 설정합니다. 그런 다음 Popup에 대한 가능한 배치 지점과 기본 축 집합을 기본 설정의 순서에 따라 반환하는 CustomPopupPlacementCallback 대리자를 정의합니다. Popup의 가장 큰 부분을 표시하는 지점이 자동으로 선택됩니다. 예제를 보려면 방법: 사용자 지정 팝업 위치 지정을 참조하십시오.

Popup 컨트롤에는 자체의 시각적 트리가 없습니다. 대신 Popup의 MeasureOverride 메서드를 호출하면 이 컨트롤은 크기 0을 반환합니다. 그러나 Popup의 IsOpen 속성을 true로 설정하면 자체의 시각적 트리가 있는 새 창이 만들어집니다. 새 창에는 Popup의 Child 콘텐츠가 포함됩니다. 새 창의 너비와 높이는 화면의 너비 또는 높이의 75%보다 클 수 없습니다.

Popup 컨트롤에서는 Child 콘텐츠에 대한 참조를 논리적 자식으로 유지합니다. 새 창이 생성되면 Popup의 콘텐츠가 창의 시각적 자식이 되고 Popup의 논리적 자식으로 유지됩니다. 반대로 Popup은 Child 콘텐츠의 논리적 부모로 유지됩니다.