다음을 통해 공유

Popup 개요

  • 아티클

Popup 컨트롤을 사용하여 지정된 요소나 화면 좌표를 기준으로 콘텐츠를 현재 애플리케이션 창 위에 떠 있는 별도의 창에 표시할 수 있습니다. 이 토픽에서는 Popup 컨트롤을 소개하고 사용 방법을 설명합니다.

Popup이란?

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

참고

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

팝업 만들기

다음 예제에서는 ToggleButton 컨트롤의 자식 요소인 Popup 컨트롤을 정의하는 방법을 보여줍니다. ToggleButton에는 자식 요소가 하나만 있을 수 있으므로 이 예에서는 StackPanel의 ToggleButton 컨트롤과 Popup 컨트롤에 텍스트를 배치합니다. Popup 콘텐츠는 관련 ToggleButton 컨트롤 근처의 애플리케이션 창 위에 떠 있는 별도의 창에 표시됩니다.

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

Popup을 구현하는 컨트롤

Popup 컨트롤을 다른 컨트롤에 빌드할 수 있습니다. 다음 컨트롤은 특정 사용에 필요한 Popup 컨트롤을 구현합니다.

  • ToolTip. 요소의 도구 설명을 만들려면 ToolTip 클래스와 ToolTipService 클래스를 사용합니다. 자세한 내용은 ToolTip 개요를 참조하세요.

  • ContextMenu. 요소의 바로 가기 메뉴를 만들려면 ContextMenu 클래스를 사용합니다. 자세한 내용은 ContextMenu 개요를 참조하세요.

  • ComboBox. 표시하거나 숨길 수 있는 드롭다운 목록 상자가 포함된 선택 컨트롤을 만들려면 ComboBox 컨트롤을 사용합니다.

  • Expander. 콘텐츠를 표시하는 축소 가능한 영역이 포함된 헤더를 표시하는 컨트롤을 만들려면 Expander 컨트롤을 사용합니다. 자세한 내용은 Expander 개요를 참조하세요.

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

열기 및 닫기 동작

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

Popup 콘텐츠 창이 열리거나 닫히면 Opened 이벤트와 Closed 이벤트가 발생합니다.

애니메이션

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 콘텐츠 주위에 여백을 정의하여 컨트롤에 추가 영역을 제공하면 됩니다.

Popup 위치 정의

설정 하 여 팝업을 배치할 수는 PlacementTarget, PlacementRectangle, Placement, HorizontalOffset, 및 VerticalOffsetProperty 속성입니다. 자세한 내용은 Popup 배치 동작을 참조하세요. 때 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 콘텐츠의 논리 부모로 유지됩니다.

참고 항목