Gedrag van pop-up-plaatsing

Een Popup besturingselement geeft inhoud weer in een afzonderlijk venster dat over een toepassing zweeft. U kunt de positie van een Popup ten opzichte van een besturingselement, de muis of het scherm opgeven met behulp van de eigenschappen PlacementTarget, Placement, PlacementRectangle, HorizontalOffseten VerticalOffset. Deze eigenschappen werken samen om u flexibiliteit te bieden bij het opgeven van de positie van de Popup.

De pop-up positioneren

De plaatsing van een Popup kan ten opzichte van een UIElement of het hele scherm zijn. In het volgende voorbeeld worden vier Popup besturingselementen gemaakt die relatief zijn ten opzichte van een UIElement, in dit geval een afbeelding. Alle Popup besturingselementen hebben de eigenschap PlacementTarget ingesteld op image1, maar elke Popup heeft een andere waarde voor de plaatsingseigenschap.

<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>

In de volgende illustratie ziet u de afbeelding en de Popup-besturingselementen.

In dit eenvoudige voorbeeld ziet u hoe u de eigenschappen PlacementTarget en Placement instelt, maar met behulp van de eigenschappen PlacementRectangle, HorizontalOffseten VerticalOffset hebt u nog meer controle over waar de Popup is geplaatst.

![OPMERKING] Afhankelijk van uw Windows-instellingen met betrekking tot links- of rechtshandigheid, kan het venster links of rechts zijn uitgelijnd wanneer het boven of onder wordt weergegeven. In de vorige afbeelding ziet u rechtshandige uitlijning, waardoor de pop-up aan de linkerkant wordt geplaatst.

Definities van termen: De anatomie van een pop-up

De volgende termen zijn handig om te begrijpen hoe de eigenschappen van de PlacementTarget, Placement, PlacementRectangle, HorizontalOffseten VerticalOffset zich verhouden tot elkaar en de Popup:

• Doelwit

• Doelgebied

• Doelwit-oorsprong

• Pop-up-uitlijningspunt

Deze voorwaarden bieden een handige manier om te verwijzen naar verschillende aspecten van de Popup en de controle waaraan deze is gekoppeld.

Doelobject

Het doelobject is het element waaraan de Popup is gekoppeld. Als de eigenschap PlacementTarget is ingesteld, wordt het doelobject opgegeven. Als PlacementTarget niet is ingesteld en de Popup een bovenliggend item heeft, is het bovenliggende object het doelobject. Als er geen PlacementTarget waarde en geen bovenliggende waarde is, is er geen doelobject en wordt de Popup ten opzichte van het scherm geplaatst.

In het volgende voorbeeld wordt een Popup gemaakt dat een kind is van een Canvas. In het voorbeeld wordt de eigenschap PlacementTarget niet ingesteld op het Popup. De standaardwaarde voor Placement is PlacementMode.Bottom, dus wordt de Popup onder het Canvasweergegeven.

<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>

In de volgende afbeelding ziet u dat de Popup ten opzichte van de Canvaswordt weergegeven.

In het volgende voorbeeld wordt een Popup gemaakt dat kind is van een Canvas, maar deze keer wordt de PlacementTarget ingesteld op ellipse1, waardoor de pop-up onder de Ellipseverschijnt.

<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>

In de volgende afbeelding ziet u dat de Popup ten opzichte van de Ellipsewordt weergegeven.

Doelgebied

Het doelgebied is het gebied op het scherm waarop Popup zich ten opzichte van bevindt. In de vorige voorbeelden wordt de Popup uitgelijnd met de grenzen van het doelobject, maar in sommige gevallen wordt de Popup uitgelijnd op andere grenzen, zelfs als de Popup een doelobject heeft. Als de eigenschap PlacementRectangle is ingesteld, wijkt het doelgebied af van de grenzen van het doelobject.

In het volgende voorbeeld worden twee Canvas objecten gemaakt, die elk een Rectangle en een Popupbevatten. In beide gevallen is het doelobject voor de Popup de Canvas. De Popup in de eerste Canvas heeft de PlacementRectangle ingesteld, met de eigenschappen X, Y, Widthen Height ingesteld op respectievelijk 50, 50, 50 en 100. De Popup in de tweede Canvas heeft de PlacementRectangle niet ingesteld. Als gevolg hiervan wordt de eerste Popup onder de PlacementRectangle geplaatst en wordt de tweede Popup onder de Canvasgeplaatst. Elke Canvas bevat ook een Rectangle met dezelfde grenzen als de PlacementRectangle voor de eerste Popup. Houd er rekening mee dat de PlacementRectangle geen zichtbaar element in de toepassing maakt; in het voorbeeld wordt een Rectangle gemaakt om de PlacementRectangleweer te geven.

<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>

In de volgende afbeelding ziet u het resultaat van het voorgaande voorbeeld.

Doeloorsprong en uitlijningspunt voor pop-upvensters

De doeloorsprongpunt, en pop-up uitlijningspunt, zijn referentiepunten op respectievelijk het doelgebied en de pop-up die worden gebruikt voor positionering. U kunt de eigenschappen HorizontalOffset en VerticalOffset gebruiken om de pop-up van het doelgebied te verschoven. De HorizontalOffset en VerticalOffset zijn relatief ten opzichte van het doelcoördinaat en het uitlijnpunt van de pop-up. De waarde van de eigenschap Placement bepaalt waar de doelbron en het uitlijnpunt voor de pop-up zich bevinden.

In het volgende voorbeeld wordt een Popup gemaakt en worden de eigenschappen HorizontalOffset en VerticalOffset ingesteld op 20. De eigenschap Placement is ingesteld op Bottom (de standaardinstelling), zodat de doeloorsprong de linkerbenedenhoek van het doelgebied is en het pop-upuitlijningspunt de linkerbovenhoek van de Popupis.

<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>

In de volgende afbeelding ziet u het resultaat van het voorgaande voorbeeld.

Hoe de eigenschappen samenwerken

De waarden van PlacementTarget, PlacementRectangleen Placement moeten samen worden overwogen om het juiste doelgebied, de doeloorsprong en het pop-upuitlijningspunt te bepalen. Als de waarde van Placement bijvoorbeeld is Mouse, is er geen doelobject, wordt de PlacementRectangle genegeerd en is het doelgebied de grenzen van de muis aanwijzer. Als Placement daarentegen Bottomis, bepaalt PlacementTarget of het ouderobject het doelobject, en PlacementRectangle bepaalt het doelgebied.

In de volgende tabel wordt het doelobject, het doelgebied, de doeloorsprong en het uitlijningspunt van de pop-up beschreven en wordt aangegeven of PlacementTarget en PlacementRectangle worden gebruikt voor elke PlacementMode opsommingswaarde.

In de volgende afbeeldingen ziet u het Popup, het doelgebied, de doeloorsprong en het uitlijningspunt van de pop-up voor elke waarde van PlacementMode. In elke afbeelding is het doelgebied geel en is de Popup blauw.

Wanneer de pop-up de rand van het scherm tegenkomt

Om veiligheidsredenen kan een Popup niet worden verborgen door de rand van een scherm. Een van de volgende drie dingen gebeurt wanneer de Popup een schermrand tegenkomt:

• De pop-up lijnt zichzelf uit langs de schermrand zodat deze de Popupniet zou verbergen.

• De pop-up maakt gebruik van een ander pop-upuitlijningspunt.

• De popup gebruikt een andere doellocatie en popup-uitlijningspunt.

Deze opties worden verderop in deze sectie beschreven.

Het gedrag van de Popup wanneer er een schermrand optreedt, is afhankelijk van de waarde van de eigenschap Placement en welke schermrand de pop-up tegenkomt. De volgende tabel bevat een overzicht van het gedrag wanneer de Popup voor elke PlacementMode waarde een schermrand tegenkomt.

Uitlijnen op de schermrand

Een Popup kan uitgelijnd worden aan de rand van het scherm door zichzelf te verplaatsen, zodat het gehele Popup zichtbaar is op het scherm. Wanneer dit gebeurt, kan de afstand tussen de doeloorsprong en het pop-upuitlijningspunt verschillen van de waarden van HorizontalOffset en VerticalOffset. Wanneer PlacementAbsolute, Centerof Relativeis, wordt de Popup op elke schermrand uitgelijnd. Stel dat bij een PopupPlacement is ingesteld op Relative en VerticalOffset is ingesteld op 100. Als de onderrand van het scherm de Popupgeheel of gedeeltelijk verbergt, verplaatst de Popup zich langs de onderrand van het scherm, en is de verticale afstand tussen het beginpunt van het doel en het pop-up uitlijningspunt minder dan 100. In de volgende afbeelding ziet u dit.

Het pop-upuitlijningspunt wijzigen

Als Placement is AbsolutePoint, RelativePointof MousePoint, verandert het pop-upuitlijningspunt wanneer de pop-up de onder- of rechterkant van het scherm tegenkomt.

In de volgende afbeelding ziet u dat wanneer de rand van het onderste scherm alle of een deel van de Popupverbergt, het pop-upuitlijningspunt de linkerbenedenhoek van het Popupis.

In de volgende afbeelding ziet u dat wanneer de Popup is verborgen door de rechterschermrand, het pop-upuitlijningspunt de rechterbovenhoek van het Popupis.

Als de Popup de onderrand en de rechterrand van het scherm tegenkomt, is het pop-upuitlijningspunt de rechterbenedenhoek van het Popup.

Het doel-oorsprong en het pop-up-uitlijningspunt wijzigen

Wanneer PlacementBottom, Left, Mouse, Rightof Topis, worden de doelpositie en het uitlijningspunt van de pop-up gewijzigd als er een bepaalde schermrand wordt aangetroffen. De schermrand die ervoor zorgt dat de positie wordt gewijzigd, is afhankelijk van de PlacementMode waarde.

In de volgende afbeelding ziet u dat wanneer Placement is Bottom en de Popup de rand van het onderste scherm tegenkomt, de doeloorsprong de linkerbovenhoek van het doelgebied is en het pop-upuitlijningspunt de linkerbenedenhoek van het Popupis.

In de volgende afbeelding ziet u dat, wanneer PlacementLeft is en de Popup de rand van het linkerscherm bereikt, de oorsprong van het doelgebied de rechterbovenhoek van het doelgebied is en het uitlijningspunt van de pop-up zich in de linkerbovenhoek van het Popupbevindt.

In de volgende afbeelding ziet u dat als Placement gelijk is aan Right en de Popup de rechterkant van het scherm tegenkomt, de doeloorsprong de linkerbovenhoek van het doelgebied is en het uitlijningspunt van de pop-up zich in de rechterbovenhoek van de Popupbevindt.

In de volgende afbeelding ziet u dat wanneer Placement is Top en de Popup de rand van het bovenste scherm tegenkomt, de doeloorsprong de linkerbenedenhoek van het doelgebied is en het pop-upuitlijningspunt de linkerbovenhoek van het Popupis.

In de volgende illustratie ziet u dat wanneer Placement is Mouse en de Popup de onderrand van het scherm tegenkomt, de oorsprong van het doelgebied de linkerbovenhoek is (de grenzen van de muisaanwijzer) en dat het uitlijnpunt van de pop-up de linkerbenedenhoek van het Popupis.

Pop-upplaatsing aanpassen

U kunt de doeloriëntatie en het pop-upuitlijningspunt aanpassen door de eigenschap Placement in te stellen op Custom. Definieer vervolgens een CustomPopupPlacementCallback gedelegeerde die een set mogelijke plaatsingspunten en primaire assen (in volgorde van voorkeur) voor de Popupteruggeeft. Het punt dat het grootste gedeelte van de Popup weergeeft, is geselecteerd. De positie van de Popup wordt automatisch aangepast als de Popup wordt verborgen door de rand van het scherm. Zie bijvoorbeeld Een aangepaste pop-uppositie opgeven.

Zie ook

• voorbeeld van plaatsing van pop-up