Delen via

Overzicht van pop-up

  • Artikel

Het besturingselement Popup biedt een manier om inhoud weer te geven in een afzonderlijk venster dat over het huidige toepassingsvenster loopt ten opzichte van een aangewezen element of schermcoördinaat. In dit onderwerp wordt het Popup besturingselement geïntroduceerd en vindt u informatie over het gebruik ervan.

Wat is een pop-up?

Een Popup besturingselement geeft inhoud weer in een afzonderlijk venster ten opzichte van een element of punt op het scherm. Wanneer de Popup zichtbaar is, wordt de eigenschap IsOpen ingesteld op true.

Notitie

Een Popup wordt niet automatisch geopend wanneer de muiswijzer over het bovenliggende object wordt verplaatst. Als u wilt dat een Popup automatisch wordt geopend, gebruikt u de ToolTip- of ToolTipService-klasse. Zie Overzicht van knopinfovoor meer informatie.

Een pop-up maken

In het volgende voorbeeld ziet u hoe u een Popup besturingselement definieert dat het onderliggende element van een ToggleButton besturingselement is. Omdat een ToggleButton slechts één onderliggend element kan hebben, plaatst dit voorbeeld de tekst voor de ToggleButton en de Popup besturingselementen in een StackPanel. De inhoud van de Popup wordt weergegeven in een afzonderlijk venster dat over het applicatievenster dichtbij de gerelateerde ToggleButton controle verschuift.

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

Besturingselementen voor het implementeren van een pop-up

U kunt Popup bedieningselementen in andere bedieningselementen inbouwen. De volgende bedieningselementen implementeren het Popup-controlemechanisme voor specifieke toepassingen:

Het Popup besturingselement biedt functionaliteit waarmee u het gedrag en uiterlijk ervan kunt aanpassen. U kunt bijvoorbeeld het openen en sluiten gedrag, animatie, doorzichtigheid en de bitmapeffecten en de Popup grootte en positie instellen.

Openings- en sluitgedrag

Een Popup besturingselement geeft de inhoud weer wanneer de eigenschap IsOpen is ingesteld op true. Standaard blijft Popup geopend totdat de eigenschap IsOpen is ingesteld op false. U kunt het standaardgedrag echter wijzigen door de eigenschap StaysOpen in te stellen op false. Wanneer u deze eigenschap instelt op false, bevat het Popup inhoudsvenster een muisopname. De Popup verliest muisopname en het venster wordt gesloten wanneer er een muis gebeurtenis plaatsvindt buiten het Popup venster.

De gebeurtenissen Opened en Closed worden gegenereerd wanneer het Popup inhoudsvenster is geopend of gesloten.

Animatie

Het besturingselement Popup heeft ingebouwde ondersteuning voor de animaties die doorgaans zijn gekoppeld aan effecten zoals vervagen en in schuiven. U kunt deze animaties inschakelen door de eigenschap PopupAnimation in te stellen op een PopupAnimation opsommingswaarde. Als Popup animaties correct werken, moet u de eigenschap AllowsTransparency instellen op true.

U kunt ook animaties zoals Storyboard toepassen op het besturingselement Popup.

Transparantie en bitmapeffecten

De eigenschap Opacity voor een Popup besturingselement heeft geen invloed op de inhoud ervan. Standaard is het Popup inhoudsvenster ondoorzichtig. Als u een transparante Popupwilt maken, stelt u de eigenschap AllowsTransparency in op true.

De inhoud van een Popup neemt geen bitmapeffecten over, zoals DropShadowBitmapEffect, die u rechtstreeks instelt op het besturingselement Popup of op een ander element in het bovenliggende venster. Als u bitmapeffecten wilt weergeven op de inhoud van een Popup, moet u het bitmapeffect rechtstreeks op de inhoud instellen. Als een StackPanelhet kind is van een Popup, stelt u het bitmapeffect in op de StackPanel.

Standaard wordt een Popup automatisch aangepast aan de inhoud. Wanneer de grootte automatisch wordt aangepast, zijn sommige bitmapeffecten mogelijk verborgen omdat de standaardgrootte van het schermgebied dat is gedefinieerd voor de Popup inhoud niet voldoende ruimte biedt om de bitmapeffecten weer te geven.

Popup-inhoud kan ook verborgen worden wanneer u een RenderTransform instelt op de inhoud. In dit scenario is bepaalde inhoud mogelijk verborgen als de inhoud van de getransformeerde Popup zich buiten het gebied van de oorspronkelijke Popupbevindt. Als een bitmapeffect of transformatie meer ruimte vereist, kunt u een marge rond de Popup inhoud definiëren om meer ruimte voor het besturingselement te bieden.

De pop-uppositie definiëren

U kunt een pop-up plaatsen door de eigenschappen PlacementTarget, PlacementRectangle, Placement, HorizontalOffseten VerticalOffsetProperty in te stellen. Zie pop-upplaatsingsgedragvoor meer informatie. Wanneer Popup op het scherm wordt weergegeven, verandert het niet van positie als het bovenliggende element van positie verandert.

Pop-upplaatsing aanpassen

U kunt de plaatsing van een Popup besturingselement aanpassen door een set coördinaten op te geven ten opzichte van de PlacementTarget waar u de Popup wilt weergeven.

Als u de plaatsing wilt aanpassen, stelt u de eigenschap Placement in 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 deel van de Popup weergeeft, wordt automatisch geselecteerd. Zie bijvoorbeeld Een aangepaste pop-uppositie opgeven.

Een Popup controle heeft geen eigen visuele boom en geeft een grootte van 0 terug wanneer de MeasureOverride-methode voor Popup wordt aangeroepen. Wanneer u echter de eigenschap IsOpen van Popup instelt op true, wordt er een nieuw venster met een eigen visuele structuur gemaakt. Het nieuwe venster bevat de Child inhoud van Popup. De breedte en hoogte van het nieuwe venster mogen niet groter zijn dan 75 procent van de breedte of hoogte van het scherm.

Het besturingselement Popup onderhoudt een verwijzing naar de Child inhoud als een logisch onderliggend element. Wanneer het nieuwe venster wordt gemaakt, wordt de inhoud van Popup een visueel kindelement van het venster en blijft het een logisch kindelement van Popup. Omgekeerd blijft Popup het logische ouder van de Child-inhoud.

Zie ook