Udostępnij za pośrednictwem

Przegląd wyskakujących okienek

  • Artykuł

Kontrolka Popup umożliwia wyświetlanie zawartości w osobnym oknie, które unosi się w bieżącym oknie aplikacji względem wyznaczonego elementu lub współrzędnej ekranu. W tym temacie przedstawiono kontrolkę Popup i przedstawiono informacje o jego użyciu.

Co to jest wyskakujące okienko?

Kontrolka Popup wyświetla zawartość w osobnym oknie względem elementu lub punktu na ekranie. Gdy Popup jest widoczna, właściwość IsOpen jest ustawiona na wartość true.

Notatka

Popup nie otwiera się automatycznie, gdy wskaźnik myszy przesuwa się nad obiektem nadrzędnym. Jeśli chcesz automatycznie otworzyć Popup, użyj klasy ToolTip lub ToolTipService. Aby uzyskać więcej informacji, zobacz ToolTip Overview.

Tworzenie okna podręcznego

W poniższym przykładzie pokazano, jak zdefiniować kontrolkę Popup, która jest elementem podrzędnym kontrolki ToggleButton. Ponieważ ToggleButton może zawierać tylko jeden element podrzędny, w tym przykładzie umieszcza się tekst kontrolki ToggleButton i Popup w StackPanel. Zawartość Popup jest wyświetlana w osobnym oknie, które unosi się nad oknem aplikacji w pobliżu powiązanej kontrolki ToggleButton.

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

Kontrolki implementujące wyskakujące okienko

Możesz wbudowywać kontrolki Popup w inne kontrolki. Następujące kontrolki implementują kontrolkę Popup dla określonych zastosowań:

  • ToolTip. Jeśli chcesz utworzyć etykietkę narzędzia dla elementu, użyj klas ToolTip i ToolTipService. Aby uzyskać więcej informacji, zobacz ToolTip Overview.

  • ContextMenu. Jeśli chcesz utworzyć menu kontekstowe dla elementu, użyj kontrolki ContextMenu. Aby uzyskać więcej informacji, zobacz ContextMenu Overview.

  • ComboBox. Jeśli chcesz utworzyć kontrolkę wyboru zawierającą pole listy rozwijanej, które można wyświetlić lub ukryć, użyj kontrolki ComboBox.

  • Expander. Jeśli chcesz utworzyć kontrolkę wyświetlającą nagłówek z zwijanym obszarem wyświetlający zawartość, użyj kontrolki Expander. Aby uzyskać więcej informacji, zobacz Expander Overview.

Kontrolka Popup udostępnia funkcje, które umożliwiają dostosowanie jego zachowania i wyglądu. Można na przykład ustawić zachowanie otwierania i zamykania, animację, nieprzezroczystość i efekty mapy bitowej oraz rozmiar i położenie Popup.

Zachowanie otwierania i zamykania

Kontrolka Popup wyświetla jego zawartość, gdy właściwość IsOpen jest ustawiona na wartość true. Domyślnie Popup pozostaje otwarta, dopóki właściwość IsOpen nie zostanie ustawiona na false. Można jednak zmienić domyślne zachowanie, ustawiając właściwość StaysOpen na false. Po ustawieniu tej właściwości na falseokno zawartości Popup ma przechwycenie myszy. Popup traci przechwytywanie myszy, a okno zamyka się po wystąpieniu zdarzenia myszy poza oknem Popup.

Zdarzenia Opened i Closed są wywoływane po otwarciu lub zamknięciu okna zawartości Popup.

Animacja

Kontrolka Popup ma wbudowaną obsługę animacji, które są zwykle skojarzone z zachowaniami, takimi jak zanikanie i przesuwanie. Możesz włączyć te animacje, ustawiając właściwość PopupAnimation na wartość wyliczenia PopupAnimation. Aby animacje Popup działały poprawnie, należy ustawić właściwość AllowsTransparency na true.

Możesz również zastosować animacje, takie jak Storyboard do kontrolki Popup.

Nieprzezroczystość i efekty bitmapowe

Właściwość Opacity dla kontrolki Popup nie ma wpływu na jego zawartość. Domyślnie okno zawartości Popup jest nieprzezroczyste. Aby utworzyć przezroczystą Popup, ustaw właściwość AllowsTransparency na wartość true.

Zawartość Popup nie dziedziczy efektów map bitowych, takich jak DropShadowBitmapEffect, które są bezpośrednio ustawiane na kontrolce Popup lub na innym elemencie w oknie nadrzędnym. Aby efekty mapy bitowej były widoczne na zawartości Popup, trzeba zastosować efekt mapy bitowej bezpośrednio na jego zawartość. Na przykład, jeśli element podrzędny Popup jest StackPanel, ustaw efekt bitmapy na StackPanel.

Domyślnie Popup automatycznie dostosowuje się do rozmiaru swojej zawartości. W przypadku automatycznego określania rozmiaru niektóre efekty mapy bitowej mogą być ukryte, ponieważ domyślny rozmiar obszaru ekranu zdefiniowany dla zawartości Popup nie zapewnia wystarczającej ilości miejsca na wyświetlanie efektów mapy bitowej.

Popup zawartość może być również zaciemniana podczas ustawiania RenderTransform zawartości. W tym scenariuszu część zawartości może być ukryta, jeśli zawartość przekształconego Popup wykracza poza obszar oryginalnego Popup. Jeśli efekt mapy bitowej lub przekształcenie wymaga więcej miejsca, można zdefiniować margines wokół zawartości Popup, aby zapewnić więcej obszaru dla kontrolki.

Definiowanie położenia okna podręcznego

Okno podręczne można umieścić, ustawiając właściwości PlacementTarget, PlacementRectangle, Placement, HorizontalOffseti VerticalOffsetProperty. Aby uzyskać więcej informacji, zobacz Zachowanie umieszczenia okien podręcznych . Kiedy Popup jest wyświetlane na ekranie, nie zmienia swojego położenia, nawet jeśli jego obiekt nadrzędny zostanie przemieszczony.

Dostosowywanie umieszczania wyskakujących okienek

Umieszczenie kontrolki Popup można dostosować, określając zestaw współrzędnych względem PlacementTarget, w którym ma być wyświetlana Popup.

Aby dostosować umieszczanie, ustaw właściwość Placement na Custom. Następnie zdefiniuj delegata CustomPopupPlacementCallback, który zwraca zestaw możliwych punktów umieszczania i osi głównych (w kolejności preferencji) dla Popup. Punkt pokazujący największą część Popup jest automatycznie wybierany. Aby zapoznać się z przykładem, zobacz Określanie niestandardowej pozycji podręcznej.

Kontrolka Popup nie ma własnego drzewa wizualnego; Zamiast tego zwraca rozmiar 0 (zero), gdy wywoływana jest metoda MeasureOverride dla Popup. Kiedy ustawisz właściwość IsOpen dla Popup na true, zostanie utworzone nowe okno z własnym drzewem wizualnym. Nowe okno zawiera zawartość ChildPopup. Szerokość i wysokość nowego okna nie może być większa niż 75 procent szerokości lub wysokości ekranu.

Kontrolka Popup utrzymuje odwołanie do zawartości Child, traktując ją jako logiczny element podrzędny. Po utworzeniu nowego okna zawartość Popup staje się wizualnym elementem podrzędnym okna i pozostaje elementem podrzędnym logicznym Popup. Z drugiej strony Popup pozostaje logicznym elementem nadrzędnym zawartości Child.

Zobacz też