Pop-up

Het Popup besturingselement 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 de volgende afbeelding ziet u een Popup besturingselement dat is positioneerd met betrekking tot een Button die het bovenliggende element is:

Een popupbesturingselement, relatief aan een knopcontrol.

De volgende tabel bevat algemene taken voor het werken met het Popup-besturingselement:

Title Description
Animatie toevoegen aan een pop-up Meer informatie over het animeren van een pop-up met behulp van storyboards en animaties.
Gedrag van popupplaatsing Meer informatie over de verschillende plaatsingsmodi en het plaatsen van een pop-up ten opzichte van elementen of schermcoördinaten.
Een aangepaste pop-uppositie opgeven Leer hoe je aangepaste plaatsingslogica definieert voor de precieze plaatsing van pop-ups.

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 eigenschap zichtbaar is, wordt de IsOpen eigenschap ingesteld op true.

Opmerking

Een Popup wordt niet automatisch geopend wanneer de muiswijzer zich over het bovenliggende object verplaatst. Als u automatisch Popup wilt openen, gebruikt u de ToolTip of ToolTipService klasse. Zie Knopinfo voor meer informatie.

Een pop-up maken

In het volgende voorbeeld wordt een Popup besturingselement gedefinieerd als het onderliggende element van een ToggleButton besturingselement. Omdat een ToggleButton slechts één kindelement kan hebben, plaatst dit voorbeeld de tekst voor de ToggleButton- en de Popup-besturingselementen in een StackPanel. De eigenschap van de pop-up IsOpen maakt gebruik van gegevensbinding om te synchroniseren met de eigenschap van de knop IsChecked. Wanneer u de knop selecteert, wordt het pop-upvenster automatisch geopend of gesloten. De inhoud wordt weergegeven in een afzonderlijk venster dat over het toepassingsvenster in de buurt van de knop zweeft.

<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 besturingselementen in andere besturingselementen inbouwen. De volgende besturingselementen implementeren een pop-up voor specifieke doeleinden:

  • ToolTip. Gebruikt een pop-up om contextuele help weer te geven wanneer gebruikers een element aanwijzen of richten. Zie Knopinfo voor meer informatie.

  • ContextMenu. Hiermee wordt een pop-upvenster gebruikt om opdrachtopties voor een element weer te geven, meestal wanneer gebruikers met de rechtermuisknop klikken. Zie ContextMenu voor meer informatie.

  • ComboBox. Gebruikt een pop-up om de vervolgkeuzelijst met selecteerbare items te tonen of te verbergen. Zie ComboBox voor meer informatie.

Stijlen en sjablonen

Het Popup besturingselement biedt XAML-stijleigenschappen die u kunt gebruiken om het uiterlijk ervan aan te passen. Het besturingselement definieert geen standaardsjabloon met sjabloononderdelen of visuele statussen, maar u kunt het gedrag ervan aanpassen. Zie de sectie Pop-upgedrag en het uiterlijk voor meer informatie.

Inhoudseigenschap

Dit besturingselement gebruikt de Child eigenschap als inhoudseigenschap. De Child eigenschap vertegenwoordigt het enkel kindelement dat in het pop-upvenster wordt getoond.

Onderdelen

Dit besturingselement definieert geen sjabloononderdelen.

Visuele statussen

Met dit besturingselement worden geen visuele statussen gedefinieerd.

Het Popup besturingselement biedt functionaliteit die u kunt gebruiken om het gedrag en uiterlijk ervan aan te passen. U kunt bijvoorbeeld open- en sluitgedrag, animatie, dekking en bitmapeffecten, en Popup grootte en positie instellen.

Gedrag voor openen en sluiten

Een Popup besturingselement geeft de inhoud weer wanneer de IsOpen eigenschap is ingesteld op true. Blijft standaard Popup geopend totdat de IsOpen eigenschap is ingesteld op false. U kunt het standaardgedrag echter wijzigen door de StaysOpen eigenschap in te stellen op false. Wanneer u deze eigenschap instelt op false, heeft het Popup-inhoudsvenster de muisbesturing. De Popup opname van de muis gaat verloren en het venster wordt gesloten wanneer een muis gebeurtenis buiten het Popup venster plaatsvindt.

De Opened en Closed events worden opgewekt wanneer het Popup inhoudsvenster wordt geopend of gesloten.

Animatie

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

U kunt ook animaties zoals Storyboard toepassen op de Popup controle.

Dekking en bitmap-effecten

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

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

Een Popup past zijn grootte standaard automatisch aan de inhoud aan. Wanneer automatische grootte-aanpassing plaatsvindt, kunnen sommige bitmapeffecten verborgen zijn omdat het standaardformaat van het schermgebied dat is gedefinieerd voor de Popup inhoud niet voldoende ruimte heeft om de bitmapeffecten weer te geven.

Popup inhoud kan ook worden verborgen wanneer u een RenderTransform toepast op de inhoud. In dit scenario is bepaalde inhoud mogelijk verborgen als de inhoud van de getransformeerde Popup inhoud zich buiten het gebied van het oorspronkelijke Popupgebied bevindt. 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 PlacementTargeteigenschappen , , PlacementRectangleen PlacementHorizontalOffsetVerticalOffsetProperty eigenschappen in te stellen. Zie Pop-upplaatsingsgedrag voor meer informatie. Wanneer u een Popup op het scherm weergeeft, wordt deze niet verplaatst als het bovenliggende item wordt verplaatst.

Pop-upplaatsing aanpassen

U kunt de plaatsing van een Popup besturingselement aanpassen door een set coördinaten op te geven die relatief zijn ten opzichte van de PlacementTarget positie waarop u het Popup besturingselement wilt weergeven.

Als u de plaatsing wilt aanpassen, stelt u de Placement eigenschap in op Custom. Definieer vervolgens een CustomPopupPlacementCallback gemachtigde die een set mogelijke plaatsingspunten en primaire assen retourneert (in volgorde van voorkeur) voor de Popup. Het punt dat het grootste deel van het Popup item weergeeft, wordt automatisch geselecteerd. Zie Een aangepaste pop-uppositie opgeven voor een voorbeeld.

Een Popup controle heeft geen eigen visuele boom. Het retourneert een grootte van 0 (nul) wanneer u de MeasureOverride methode aanroept. Wanneer u echter de IsOpen-eigenschap instelt op true, maakt het besturingselement een nieuw venster met een eigen visuele structuur. Het nieuwe venster bevat de Child inhoud van de 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 Popup besturingselement onderhoudt een verwijzing naar de Child inhoud ervan als een logisch onderliggend element. Wanneer het besturingselement het nieuwe venster maakt, wordt de inhoud van Popup een visueel onderdeel van het venster en blijft het een logisch onderdeel van Popup. Daarentegen blijft Popup het logische ouder element van de Child inhoud.

Zie ook

  • Last updated on