Popup 배치 동작

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

참고

ToolTip또한 및 ContextMenu 클래스는 이러한 다섯 가지 속성을 정의 하 고 비슷하게 동작 합니다.

Popup 위치 지정

의 배치는 Popup 전체 화면을 기준으로 할 수 있습니다 UIElement . 다음 예제에서는 Popup UIElement (이 경우 이미지)를 기준으로 4 개의 컨트롤을 만듭니다. 모든 컨트롤에 PopupPlacementTarget 로 설정 된 속성이 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

네 개의 Popup 컨트롤이 있는 이미지

이 간단한 예제에서는 및 속성을 설정 하는 방법을 보여 PlacementTarget Placement 주지만 PlacementRectangle , HorizontalOffsetVerticalOffset 속성을 사용 하면 Popup 가 배치 되는 위치를 보다 세부적으로 제어할 수 있습니다.

용어 정의: Popup 분석

다음 용어는 PlacementTarget ,, Placement PlacementRectangle , HorizontalOffsetVerticalOffset 속성이 서로 어떻게 관련 Popup 되어 있는지 이해 하는 데 유용 합니다.

  • 대상 개체

  • 대상 영역

  • 대상 원점

  • Popup 맞춤 지점

이러한 용어는와 연결 된 컨트롤의 다양 한 측면을 쉽게 참조할 수 있는 방법을 제공 Popup 합니다.

대상 개체

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

다음 예제에서는 Popup 의 자식인을 만듭니다 Canvas . 이 예제에서는의 속성을 설정 하지 않습니다 PlacementTarget Popup . 의 기본값은 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>

다음 그림에서는가에 상대적으로 배치 되어 있음을 보여 줍니다 Popup Canvas .

PlacementTarget이 없는 Popup 컨트롤

다음 예제에서는의 자식인를 만들지만 이번에는 Popup Canvas 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>

다음 그림에서는가에 상대적으로 배치 되어 있음을 보여 줍니다 Popup Ellipse .

타원을 기준으로 배치되는 Popup

참고

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

대상 영역

대상 영역은 화면에서가 기준으로 하는 영역입니다 Popup . 앞의 예제에서는 Popup 대상 개체의 경계를 기준으로 정렬 되지만 일부 경우에는가 Popup 대상 개체를 포함 하는 경우에도 다른 범위에 정렬 됩니다 Popup . PlacementRectangle속성이 설정 된 경우 대상 영역이 대상 개체의 범위와 다릅니다.

다음 예제에서는 Canvas 각각 및를 포함 하는 두 개의 개체를 만듭니다 Rectangle Popup . 두 경우 모두의 대상 개체는 Popup Canvas 입니다. Popup첫 번째에는 Canvas ,, PlacementRectangle X Y WidthHeight 속성이 각각 50, 50, 50 및 100로 설정 된 집합이 있습니다. 두 번째의에는 Popup Canvas 이 설정 되어 있지 않습니다 PlacementRectangle . 결과적으로 첫 번째는 Popup 아래에 배치 되 PlacementRectangle 고 두 번째는 Popup 아래에 배치 됩니다 Canvas . 각에는 Canvas Rectangle 첫 번째의와 동일한 범위를 갖는도 포함 됩니다 PlacementRectangle Popup . 는 PlacementRectangle 응용 프로그램에 표시 되는 요소를 만들지 않습니다 .이 예제에서는을 나타내는을 만듭니다 Rectangle PlacementRectangle .

<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이 있을 때와 없을 때의 팝업

대상 원점 및 Popup 맞춤 지점

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

다음 예제에서는 Popup 가져오거나 설정 합니다 HorizontalOffsetVerticalOffset 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>

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

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

속성을 함께 사용하는 방법

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

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

PlacementMode 대상 개체 대상 영역 대상 원점 Popup 맞춤 지점
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 입니다.

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

Absolute 또는 AbsolutePoint 배치의 Popup

Bottom 배치의 Popup

Center 배치의 Popup

Left 배치의 Popup

Mouse 배치의 Popup

MousePoint 배치의 Popup

Relative 또는 RelativePoint 배치의 Popup

Right 배치의 Popup

Top 배치의 Popup

Popup이 화면 가장자리와 만나는 경우

보안상의 이유로는 Popup 화면의 가장자리에 의해 숨겨질 수 없습니다. 에서 화면 가장자리가 나타날 때 다음 세 가지 작업 중 하나가 발생 합니다 Popup .

  • 팝업은를 realigns 화면 가장자리를 따라 자신에 게 Popup 있습니다.

  • Popup에 다른 Popup 맞춤 지점이 사용됩니다.

  • Popup에 다른 대상 원점 및 Popup 맞춤 지점이 사용됩니다.

이러한 옵션은 이 섹션의 뒷부분에서 설명합니다.

Popup화면 가장자리가 나타날 때의 동작은 속성의 값과 popup이 발생 하는 화면 가장자리에 따라 다릅니다 Placement . 다음 표에는에서 Popup 각 값에 대 한 화면 가장자리가 나타날 때의 동작이 요약 되어 PlacementMode 있습니다.

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

화면 가장자리에 맞춤

Popup 전체를 화면에 표시 되도록 자체적으로 위치를 조정 하 여 화면 가장자리에 맞출 수 있습니다 Popup . 이 경우 대상 원점과 팝업 맞춤 지점 간의 거리가 및의 값과 다를 수 있습니다 HorizontalOffset VerticalOffset . PlacementAbsolute , 또는 인 경우 Center Relative 는 자체를 Popup 모든 화면 가장자리에 맞춥니다. 예를 들어, PopupPlacement 로 설정 되 Relative 고가 VerticalOffset 100로 설정 되어 있다고 가정 합니다. 화면의 아래쪽 가장자리가의 전체 또는 일부 Popup 를 숨기면 Popup 화면 아래쪽 가장자리를 따라 위치를 조정 하 고 대상 원점과 팝업 맞춤 지점 간의 세로 거리를 100 미만으로 표시 합니다. 다음 그림에서 이 경우를 보여 줍니다.

화면 가장자리에 맞춰진 Popup

Popup 맞춤 지점 변경

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

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

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

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

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

에서 Popup 아래쪽 및 오른쪽 화면 가장자리를 만나면 팝업 맞춤 지점이의 오른쪽 아래 모퉁이입니다 Popup .

대상 원점 및 Popup 맞춤 지점 변경

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

다음 그림에서는 Placement 가이 고가 Bottom Popup 아래쪽 화면 가장자리를 발견 하면 대상 원점이 대상 영역의 왼쪽 위 모퉁이가 고 popup 맞춤 지점이의 왼쪽 아래 모퉁이 임을 보여 줍니다 Popup .

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

다음 그림에서는 Placement 가이 고가 Left Popup 왼쪽 화면 가장자리를 만나면 대상 원점이 대상 영역의 오른쪽 위 모퉁이가 고 popup 맞춤 지점이의 왼쪽 위 모퉁이 임을 보여 줍니다 Popup .

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

다음 그림에서는 Placement 가이 고가 Right Popup 오른쪽 화면 가장자리를 만나면 대상 원점이 대상 영역의 왼쪽 위 모퉁이가 고 popup 맞춤 지점이의 오른쪽 위 모퉁이 임을 보여 줍니다 Popup .

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

다음 그림에서는 Placement 가이 고가 Top Popup 위쪽 화면 가장자리를 발견 하면 대상 원점이 대상 영역의 왼쪽 아래 모퉁이가 고 popup 맞춤 지점이의 왼쪽 위 모퉁이 임을 보여 줍니다 Popup .

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

다음 그림에서는 Placement 가이 고가 Mouse Popup 아래쪽 화면 가장자리를 발견 하면 대상 원점이 대상 영역의 왼쪽 위 모퉁이 (마우스 포인터의 경계)이 고 팝업 맞춤 지점이의 왼쪽 아래 모퉁이 임을 보여 줍니다 Popup .

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

Popup 배치 사용자 지정

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

참고 항목