Popup 배치 동작

아티클
08/10/2011

Popup 컨트롤은 응용 프로그램 위에 배치되는 별도의 창에 콘텐츠를 표시합니다. PlacementTarget, Placement, PlacementRectangle, HorizontalOffset 및 VerticalOffset 속성을 사용하여 컨트롤, 마우스 또는 화면을 기준으로 Popup의 위치를 지정할 수 있습니다. 이러한 속성을 함께 사용하면 Popup의 위치를 유연하게 지정할 수 있습니다.

참고
ToolTip 및 ContextMenu 클래스도 이러한 다섯 가지 속성을 정의하고 유사하게 동작합니다.

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

팝업 위치 지정
용어 정의: 팝업 분석
속성을 함께 사용하는 방법
팝업이 화면의 가장자리와 만나는 경우
관련 항목

팝업 위치 지정

Popup의 위치는 UIElement 또는 전체 화면을 기준으로 지정할 수 있습니다. 다음 예제에서는 UIElement(이 경우 이미지)를 기준으로 하는 네 개의 Popup 컨트롤을 만듭니다. 모든 Popup 컨트롤에서 PlacementTarget 속성은 image1로 설정되지만 각 Popup의 배치 속성에는 서로 다른 값이 지정됩니다.

<Canvas Width="200" Height="150">
  <Image Name="image1"
         Canvas.Left="75" 
         Source="Water_lilies.jpg" Height="200" Width="200"/>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Bottom">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Bottom</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Top">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Top</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Left">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Left</TextBlock>

  </Popup>
  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=image1}"
         Placement="Right">
    <TextBlock FontSize="14" Background="LightGreen">Placement=Right</TextBlock>

  </Popup>
</Canvas>

다음 그림에서는 이미지와 Popup 컨트롤을 보여 줍니다.

네 개의 팝업이 있는 이미지

네 개의 팝업 컨트롤이 있는 이미지

이 간단한 예제에서는 PlacementTarget 및 Placement 속성을 설정하는 방법을 보여 주지만 PlacementRectangle, HorizontalOffset 및 VerticalOffset 속성을 사용하여 Popup이 배치되는 위치를 보다 정확하게 제어할 수 있습니다.

용어 정의: 팝업 분석

다음 용어는 PlacementTarget, Placement, PlacementRectangle, HorizontalOffset, VerticalOffset 속성 간의 상관 관계 및 이러한 속성과 Popup의 상관 관계를 이해하는 데 유용합니다.

대상 개체
대상 영역
대상 원점
팝업 맞춤 지점

이러한 용어를 통해 Popup의 다양한 측면 및 연결된 컨트롤을 편리하게 참조할 수 있습니다.

대상 개체

대상 개체는 Popup이 연결된 요소입니다. PlacementTarget 속성이 설정된 경우 이 속성은 대상 개체를 지정합니다. PlacementTarget이 설정되지 않고 Popup에 부모가 있는 경우에는 부모가 대상 개체입니다. PlacementTarget 값과 부모가 없는 경우 대상 개체가 없으며 Popup이 화면을 기준으로 배치됩니다.

다음 예제에서는 Canvas의 자식인 Popup을 만듭니다. 이 예제에서는 Popup의 PlacementTarget 속성을 설정하지 않습니다. Placement의 기본값은 PlacementMode.Bottom이므로 Popup이 Canvas 아래에 나타납니다.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" >
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

다음 그림에서는 Canvas를 기준으로 배치된 Popup을 보여 줍니다.

PlacementTarget이 없는 팝업

PlacementTarget이 없는 팝업 컨트롤

다음 예제에서는 Canvas의 자식인 Popup을 만들지만 이번에는 PlacementTarget이 ellipse1로 설정되므로 팝업이 Ellipse 아래에 나타납니다.

<Canvas Margin="5" Background="Red" Width="200" Height="150" >

  <Ellipse Name="ellipse1"
           Canvas.Top="60" Canvas.Left="50"
           Height="85" Width="60" 
           Fill="Black"/>

  <Popup IsOpen="True" PlacementTarget="{Binding ElementName=ellipse1}">
    <TextBlock Background="LightBlue" FontSize="18">This is a Popup</TextBlock>
  </Popup>
</Canvas>

다음 그림에서는 Ellipse를 기준으로 배치된 Popup을 보여 줍니다.

PlacementTarget이 있는 팝업

타원에 상대적으로 배치되는 팝업

참고
ToolTip의 경우 Placement의 기본값은 Mouse입니다.ContextMenu의 경우 Placement의 기본값은 MousePoint입니다.이러한 값은 뒷부분에 나오는 "속성을 함께 사용하는 방법"에서 설명합니다.

대상 영역

대상 영역은 Popup에서 기준으로 하는 화면의 영역입니다. 이전 예제에서 Popup은 대상 개체의 범위에 맞춰졌지만 Popup에 대상 개체가 있는 경우에도 Popup이 다른 범위에 맞춰지는 경우가 있습니다. PlacementRectangle 속성이 설정된 경우 대상 영역은 대상 개체의 범위와 다릅니다.

다음 예제에서는 두 개의 Canvas 개체를 만듭니다. 각 개체에는 Rectangle과 Popup이 포함됩니다. 두 경우 모두 Popup의 대상 개체는 Canvas입니다. 첫 번째 Canvas의 Popup에는 PlacementRectangle이 설정되어 있으며 해당 X, Y, Width 및 Height 속성은 각각 50, 50, 50 및 100으로 설정되어 있습니다. 두 번째 Canvas의 Popup에는 PlacementRectangle이 설정되어 있지 않습니다. 따라서 첫 번째 Popup은 PlacementRectangle 아래에 배치되고 두 번째 Popup은 Canvas 아래에 배치됩니다. 또한 각 Canvas에는 첫 번째 Popup에 대한 PlacementRectangle과 범위가 같은 Rectangle이 포함됩니다. PlacementRectangle은 응용 프로그램에서 보이는 요소를 만들지 않으므로 이 예제에서는 PlacementRectangle을 나타내는 Rectangle을 만듭니다.

<StackPanel Orientation="Horizontal" Margin="50,50,0,0">

  <Canvas Width="200" Height="200" Background="Red">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True" PlacementRectangle="50,50,50,100">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup with a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

  <Canvas Width="200" Height="200" Background="Red" Margin="30,0,0,0">
    <Rectangle Canvas.Top="50" Canvas.Left="50" 
               Width="50" Height="100"
               Stroke="White" StrokeThickness="3"/>
    <Popup IsOpen="True">
      <TextBlock FontSize="14" Background="Yellow"
                 Width="140" TextWrapping="Wrap">
        This is a popup without a PlacementRectangle.
      </TextBlock>
    </Popup>
  </Canvas>

</StackPanel>

다음 그림에서는 앞 예제의 결과를 보여 줍니다.

PlacementRectangle이 있거나 없는 팝업

PlacementRectangle이 있을 때와 없을 때의 팝업

대상 원점 및 팝업 맞춤 지점

대상 원점과 팝업 맞춤 지점은 위치 지정에 사용되는 대상 영역 및 팝업에 대한 참조 지점입니다. HorizontalOffset 및 VerticalOffset 속성을 사용하여 대상 영역에서 팝업을 오프셋할 수 있습니다. HorizontalOffset 및 VerticalOffset은 대상 원점과 팝업 맞춤 지점을 기준으로 합니다. Placement 속성의 값은 대상 원점과 팝업 맞춤 지점의 위치를 결정합니다.

다음 예제에서는 Popup을 만들고 HorizontalOffset 및 VerticalOffset 속성을 20으로 설정합니다. Placement 속성은 기본값인 Bottom으로 설정되므로 대상 원점은 대상 영역의 왼쪽 아래 모퉁이가 되고 팝업 맞춤 지점은 Popup의 왼쪽 위 모퉁이가 됩니다.

<Canvas Width="200" Height="200" Background="Yellow" Margin="20">
  <Popup IsOpen="True" Placement="Bottom"
         HorizontalOffset="20" VerticalOffset="20">
    <TextBlock FontSize="14" Background="#42F3FD">
      This is a popup.
    </TextBlock>
  </Popup>
</Canvas>

다음 그림에서는 앞 예제의 결과를 보여 줍니다.

HorizontalOffset 및 VerticalOffset이 있는 팝업

대상 원점 맞춤 지점을 사용한 팝업 배치

속성을 함께 사용하는 방법

올바른 대상 영역, 대상 원점 및 팝업 맞춤 지점을 알아내려면 PlacementTarget, PlacementRectangle 및 Placement의 값을 함께 고려해야 합니다. 예를 들어 Placement의 값이 Mouse인 경우 대상 개체가 없고 PlacementRectangle이 무시되며 대상 영역이 마우스 포인터의 범위가 됩니다. 반대로 Placement가 Bottom인 경우 PlacementTarget 또는 부모가 대상 개체를 결정하고 PlacementRectangle이 대상 영역을 결정합니다.

다음 표에서는 대상 개체, 대상 영역, 대상 원점 및 팝업 맞춤 지점에 대해 설명하며 PlacementTarget 및 PlacementRectangle이 각 PlacementMode 열거형 값에 대해 사용되는지 여부를 나타냅니다.

PlacementMode	대상 개체	대상 영역	대상 원점	팝업 맞춤 지점
Absolute	해당 사항 없음. PlacementTarget이 무시됩니다.	화면 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 화면을 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
AbsolutePoint	해당 사항 없음. PlacementTarget이 무시됩니다.	화면 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 화면을 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
Bottom	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 왼쪽 아래 모퉁이	Popup의 왼쪽 위 모퉁이
Center	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 가운데	Popup의 가운데
Custom	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	CustomPopupPlacementCallback에 의해 정의됨	CustomPopupPlacementCallback에 의해 정의됨
Left	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 오른쪽 위 모퉁이
Mouse	해당 사항 없음. PlacementTarget이 무시됩니다.	마우스 포인터의 범위. PlacementRectangle이 무시됩니다.	대상 영역의 왼쪽 아래 모퉁이	Popup의 왼쪽 위 모퉁이
MousePoint	해당 사항 없음. PlacementTarget이 무시됩니다.	마우스 포인터의 범위. PlacementRectangle이 무시됩니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
Relative	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
RelativePoint	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
Right	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 오른쪽 위 모퉁이	Popup의 왼쪽 위 모퉁이
Top	PlacementTarget 또는 부모	대상 개체 또는 PlacementRectangle(설정된 경우). PlacementRectangle은 대상 개체를 기준으로 합니다.	대상 영역의 왼쪽 위 모퉁이	Popup의 왼쪽 아래 모퉁이

다음 그림에서는 각 PlacementMode 값에 대한 Popup, 대상 영역, 대상 원점 및 팝업 맞춤 지점을 보여 줍니다. 각 그림에서 대상 영역은 노란색이고 Popup은 파란색입니다.

Placement가 Absolute 또는 AbsolutePoint임

Absolute 또는 AbsolutePoint 배치의 팝업

Placement가 Bottom임

Bottom 배치의 팝업

Placement가 Center임

Center 배치의 팝업

Placement가 Left임

Left 배치의 팝업

Placement가 Mouse임

Mouse 배치의 팝업

Placement가 MousePoint임

MousePoint 배치의 팝업

Placement가 Relative 또는 RelativePoint임

Relative 또는 RelativePoint 배치의 팝업

Placement가 Right임

Right 배치의 팝업

Placement가 Top임

Top 배치의 팝업

팝업이 화면의 가장자리와 만나는 경우

보안상의 이유로 Popup은 화면의 가장자리로 숨길 수 없습니다. Popup이 화면 가장자리와 만나면 다음 세 가지 작업 중 하나가 발생합니다.

팝업이 Popup을 가리는 화면 가장자리를 따라 자체적으로 다시 맞춰집니다.
팝업이 다른 팝업 맞춤 지점을 사용합니다.
팝업이 다른 대상 원점과 팝업 맞춤 지점을 사용합니다.

이러한 옵션은 이 단원의 뒷부분에서 계속 설명합니다.

Popup이 화면 가장자리와 만나면 Placement 속성 값 및 팝업이 만난 화면 가장자리에 따라 해당 동작이 달라집니다. 다음 표에서는 Popup이 화면 가장자리와 만날 경우 각 PlacementMode 값에 따른 동작을 요약하여 보여 줍니다.

PlacementMode	위쪽 가장자리	아래쪽 가장자리	왼쪽 가장자리	오른쪽 가장자리
Absolute	위쪽 가장자리에 맞춥니다.	아래쪽 가장자리에 맞춥니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.
AbsolutePoint	위쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경됩니다.	왼쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 Popup의 오른쪽 위 모퉁이로 변경됩니다.
Bottom	위쪽 가장자리에 맞춥니다.	대상 원점이 대상 영역의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경됩니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.
Center	위쪽 가장자리에 맞춥니다.	아래쪽 가장자리에 맞춥니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.
Left	위쪽 가장자리에 맞춥니다.	아래쪽 가장자리에 맞춥니다.	대상 원점이 대상 영역의 오른쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 위 모퉁이로 변경됩니다.	오른쪽 가장자리에 맞춥니다.
Mouse	위쪽 가장자리에 맞춥니다.	대상 원점이 대상 영역(마우스 포인터의 범위)의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경됩니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.
MousePoint	위쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경됩니다.	왼쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 팝업의 오른쪽 위 모퉁이로 변경됩니다.
Relative	위쪽 가장자리에 맞춥니다.	아래쪽 가장자리에 맞춥니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.
RelativePoint	위쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경됩니다.	왼쪽 가장자리에 맞춥니다.	팝업 맞춤 지점이 팝업의 오른쪽 위 모퉁이로 변경됩니다.
Right	위쪽 가장자리에 맞춥니다.	아래쪽 가장자리에 맞춥니다.	왼쪽 가장자리에 맞춥니다.	대상 원점이 대상 영역의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 오른쪽 위 모퉁이로 변경됩니다.
Top	대상 원점이 대상 영역의 왼쪽 아래 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 위 모퉁이로 변경됩니다. 실제로 이는 Placement가 Bottom인 경우와 같습니다.	아래쪽 가장자리에 맞춥니다.	왼쪽 가장자리에 맞춥니다.	오른쪽 가장자리에 맞춥니다.

화면 가장자리에 맞춤

Popup은 전체 Popup이 화면에 표시되도록 자체적으로 위치를 변경하여 화면의 가장자리에 맞춰질 수 있습니다. 이러한 상황이 발생하면 대상 원점과 팝업 맞춤 지점 사이의 거리가 HorizontalOffset 및 VerticalOffset 값과 다를 수 있습니다. Placement가 Absolute, Center 또는 Relative인 경우에는 Popup이 자체적으로 모든 화면 가장자리에 맞춰집니다. 예를 들어 Popup이 Placement를 Relative로 설정하고 VerticalOffset을 100으로 설정한 경우 화면의 아래쪽 가장자리로 Popup의 전체나 일부가 숨겨지면 Popup이 화면의 아래쪽 가장자리에 따라 자체적으로 위치가 변경되고 대상 원점과 팝업 맞춤 지점 사이의 세로 거리가 100 미만이 됩니다. 다음 그림에서는 이를 보여 줍니다.

화면의 가장자리에 맞춰지는 팝업

화면 가장자리에 맞춰진 팝업

팝업 맞춤 지점 변경

Placement가 AbsolutePoint, RelativePoint 또는 MousePoint인 경우 팝업이 화면의 아래쪽 또는 오른쪽 가장자리와 만나면 팝업 맞춤 지점이 변경됩니다.

다음 그림에서는 아래쪽 화면 가장자리로 Popup의 전체나 일부가 숨겨지는 경우 팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경되는 것을 보여 줍니다.

화면의 아래쪽 가장자리와 만나 팝업 맞춤 지점을 변경하는 팝업

아래쪽 화면 가장자리로 인한 새로운 맞춤 지점

다음 그림에서는 오른쪽 화면 가장자리로 Popup이 숨겨지는 경우 팝업 맞춤 지점이 Popup의 오른쪽 위 모퉁이로 변경되는 것을 보여 줍니다.

화면의 오른쪽 가장자리와 만나 팝업 맞춤 지점을 변경하는 팝업

화면 가장자리로 인한 새로운 팝업 맞춤 지점

Popup이 화면의 아래쪽 및 오른쪽 가장자리와 만나는 경우 팝업 맞춤 지점은 Popup의 오른쪽 아래 모퉁이로 변경됩니다.

대상 원점 및 팝업 맞춤 지점 변경

Placement가 Bottom, Left, Mouse, Right 또는 Top인 경우 특정 화면 가장자리와 만나면 대상 원점과 팝업 맞춤 지점이 변경됩니다. 위치 변경을 유발하는 화면 가장자리는 PlacementMode 값에 따라 달라집니다.

다음 그림에서는 Placement가 Bottom이고 Popup이 아래쪽 화면 가장자리와 만나는 경우 대상 원점이 대상 영역의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경되는 것을 보여 줍니다.

Placement가 Bottom이고 팝업이 화면의 아래쪽 가장자리와 만남

아래쪽 화면 가장자리로 인한 새로운 맞춤 지점

다음 그림에서는 Placement가 Left이고 Popup이 왼쪽 화면 가장자리와 만나는 경우 대상 원점이 대상 영역의 오른쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 위 모퉁이로 변경되는 것을 보여 줍니다.

Placement가 Left이고 팝업이 화면의 왼쪽 가장자리와 만남

왼쪽 화면 가장자리로 인한 새로운 맞춤 지점

다음 그림에서는 Placement가 Right이고 Popup이 오른쪽 화면 가장자리와 만나는 경우 대상 원점이 대상 영역의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 오른쪽 위 모퉁이로 변경되는 것을 보여 줍니다.

Placement가 Right이고 팝업이 화면의 오른쪽 가장자리와 만남

오른쪽 화면 가장자리로 인한 새로운 맞춤 지점

다음 그림에서는 Placement가 Top이고 Popup이 위쪽 화면 가장자리와 만나는 경우 대상 원점이 대상 영역의 왼쪽 아래 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 위 모퉁이로 변경되는 것을 보여 줍니다.

Placement가 Top이고 팝업이 화면의 위쪽 가장자리와 만남

위쪽 화면 가장자리로 인한 새로운 맞춤 지점

다음 그림에서는 Placement가 Mouse이고 Popup이 아래쪽 화면 가장자리와 만나는 경우 대상 원점이 대상 영역(마우스 포인터의 범위)의 왼쪽 위 모퉁이로 변경되고 팝업 맞춤 지점이 Popup의 왼쪽 아래 모퉁이로 변경되는 것을 보여 줍니다.

Placement가 Mouse이고 팝업이 화면의 아래쪽 가장자리와 만남

화면 가장자리 근처의 마우스로 인한 새 맞춤 지점

팝업 배치 사용자 지정

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

참고 항목

기타 리소스

Popup Placement 샘플

다음을 통해 공유