Das WPF Control Popup kann ein eigenständiges Fenster in einer WPF Applikation darstellen und wie ein Tooltip beim Überfahren von Elementen angezeigt werden. Ein Popup kann als Kindelement ein weiteres UIElement aufnehmen, was so einem weiteren Design des Popups, nichts im Wege stehen sollte.

Die Position kann relativ zum Element oder zur Applikation geöffnet werden. Das Popup verhält sich auch wie ein eigenständiges Fenster, das heisst wird die Mainapplikation verschoben, bleibt das Popup an der letzten Position stehen.

Ein Popup wird nicht wie ein Tooltip automatisch geöffnet, sondern muss explizit durch dessen Eigenschaft IsOpen geöffnet und geschlossen werden.

Die Anzeigeposition wird durch die Placement-Eigenschaften festgelegt. Zu welchem Element sich die Placements beziehen, legt man an der Property PlacementTarget fest. Die X und die Y Koordinate HorizontalOffset und VertracalOffset setzt man bei einem gewählten „Absolute“ oder „Relative“ Placement aus der Enumeration PlacementMode.

Weitere Eigenschaften an dem Control sind PopupAnimation und AllowsTransparency. Will man ein Popup animieren (Fade, None, Scroll, Slide) muss AllowsTransparency auf true gesetzt werden.

Das folgende Beispiel soll das gesagte etwas verdeutlichen. Hier beziehe ich mein Placement relativ zur Applikation(window), den Bezug stellt man über ElementName her.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<Window x:Class="PopupHowTo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Name="myWindow">
<StackPanel HorizontalAlignment="Left">
 
<TextBox Width="100" Name="txtBox" MouseEnter="txtBox_MouseEnter" MouseLeave="txtBox_MouseLeave" />
 
<Popup Name="popUp" PlacementTarget="{Binding ElementName=myWindow}" Placement="Relative" VerticalOffset="30" HorizontalOffset="100"
   PopupAnimation="Slide" AllowsTransparency="True">
</Popup>
 
</StackPanel>
</Window>

CodeBehind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public partial class Window1 : Window
{
MyUserControl uc;
public Window1()
{
    InitializeComponent();
    Loaded += new RoutedEventHandler(Window1_Loaded);
}
 
void Window1_Loaded(object sender, RoutedEventArgs e)
{
    uc = new MyUserControl();
    popUp.Child = uc;
}
 
private void txtBox_MouseEnter(object sender, MouseEventArgs e)
{
    uc.HelpText = "Ich bin ein Hilfetext für eine TextBox";
    popUp.IsOpen = true;
}
 
private void txtBox_MouseLeave(object sender, MouseEventArgs e)
{
    popUp.IsOpen = false;
}
}

HelpText ist ein ViewModelProperty in MyUserControl.

Viel Spass beim entwickeln : )


Das WPF Control „Popup“ – HowTo
Markiert in:    

3 thoughts on “Das WPF Control „Popup“ – HowTo

  • Mai 26, 2011 bei 11:24
    Permalink

    Um zu verhindern, dass das Popup schließt, wenn man außerhalb diesem klickt, muss man die Eigenschaft StaysOpen auf true stellen

  • März 27, 2013 bei 08:42
    Permalink

    Sehr gute! Ich mag diesen Blog! :)

    Aber ich habe nicht verstanden, was MyUserControl ist: ein Form oder? Können Sie bitte ein Beispiel auf Windows Phone vorstellen?

  • März 27, 2013 bei 09:17
    Permalink

    Hi August,

    this example is for wpf applications, but it should work also in windows phone. MyUserControl is a UserControl. You can take a look in this example „create a new usercontrol“ on msdn

Kommentare sind deaktiviert.