Popup控件是一個常用的非常有用的控件，顧明思義就是彈出式控件，首先我們來看看MSDN對它的解釋吧，表示具有內容的彈出窗口，這個是非常重要的控件，我們看看它的繼承關系吧：
System.Object
System.Windows.Threading.DispatcherObject
System.Windows.DependencyObject
System.Windows.Media.Visual
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Primitives.Popup
Popup控件是從FrameworkElement直接繼承而來的，屬於非常高的層級，我們在使用中使用的最多的屬性就是下面這些屬性：1 PlacementTarget 表示Popup控件的放置的位置依賴的對象，這個通常使用綁定的方式來標明Popup控件停靠的目標。比如說：PlacementTarget="{Binding ElementName=PCheckBox}" 表示Popup停靠的位置依賴於一個名為PCheckBox的ChenkBox對象，這個也是經常使用的一種情況，我們可以將Popup控件和CheckBox,ToggleButton等一系列的控件來配合使用作出不同的效果。2 Placement屬性：獲取或設置的方向 Popup 控件時，控件將打開，並指定的行為 Popup 控制時與屏幕邊界重疊。MSDN上面的解釋是：您可以通過設置相關的屬性來定位彈出的位置，通過設置 PlacementTarget、PlacementRectangle、Placement、HorizontalOffset 和 VerticalOffsetProperty 屬性來定位彈出項。3 其實這里PlacementRectangle和HorizontalOffset 和 VerticalOffsetProperty這一對屬性可以做一些等價的替換，這些都是可以對Popup的彈出的位置進行微調。4 IsOpen屬性，這個是最重要的屬性之一，通常是通過綁定的方式來為其進行賦值，比如說：IsOpen="{Binding ElementName=PCheckBox,Path=IsChecked}" 是通過綁定CheckBox的IsChecked屬性來控制Popup的彈出。最后需要重點介紹的就是StayOpen屬性，MSDN的解釋是：獲取或設置一個值，該值指示當 Popup 控件焦點不再對准時，是否關閉該控件。當將 StaysOpen 屬性設為 true 時，Popup 始終處於打開狀態，直到通過將 IsOpen 屬性設置為 false 將其顯式關閉。當 StaysOpen 設置為false 時，Popup 控件會截獲所有鼠標事件和鍵盤事件，以確定在 Popup 控件之外發生這些事件之一，最明顯的區別是當設置IsOpen 為True時彈出Popup控件，當使用鼠標在另外的地方進行點擊時Popup失去焦點，同時Popup隱藏，而當StaysOpen 設置為True時，當Popup失去焦點時，Popup則不會隱藏，此時仍然會保持打開的狀態。
還有我們還可以設置一些Popup的彈出時的動畫效果。我們可以設置PopupAnimation="Fade" 表示彈出時是通過漸入的方式進入的，這些在使用時需要注意。
下面通過一個小例子來說明Popup的用法，通過TextBox和Popup配合使用來達到類似於百度搜索框的效果，首先貼出重點的實現代碼：
<TextBox x:Name="dutyPersonTextBox"
Text="{Binding DutyPersonName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Width="70"
Tag="{Binding DataContext,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ItemsControl}}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<interactive:ExInvokeCommandAction Command="{Binding DataContext.ModifyDutyPersonCommand,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:MainWindow}}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TextBox}}">
</interactive:ExInvokeCommandAction>
</i:EventTrigger>
<i:EventTrigger EventName="GotFocus">
<interactive:ExInvokeCommandAction Command="{Binding DataContext.TextBoxGotFocus,RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=my:MainWindow}}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TextBox}}">
</interactive:ExInvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<Popup x:Name="popup"
Width="{Binding ActualWidth,ElementName=dutyPersonTextBox}"
IsOpen="{Binding ElementName=dutyPersonTextBox,Path=IsKeyboardFocused, Mode=OneWay}"
StaysOpen="True">
<Grid Background="Red">
<ListBox x:Name="lb_selecthistorymembers"
SnapsToDevicePixels="true"
ItemsSource="{Binding DataContext.SpecificHistoryMembers,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=my:MainWindow},Mode=TwoWay}"
HorizontalAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Background="#fff">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<interactive:ExInvokeCommandAction Command="{Binding DataContext.OnSelectHistoryMembersListBoxSelected,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=my:MainWindow},Mode=TwoWay}"
CommandParameter="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListBox}}">
</interactive:ExInvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd"
Height="Auto"
Width="Auto"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="1"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="White"
IsItemsHost="True"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Width="{Binding ActualWidth,ElementName=dutyPersonTextBox}">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true"
BorderThickness="1">
<Grid>
<Label Content="{Binding SpecificHistoryDutyPersonName}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Left"
FontSize="13">
</Label>
</Grid>
</Border>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Background"
Value="#00a3d9"
TargetName="Border">
</Setter>
<Setter Property="Opacity"
Value="0.6"
TargetName="Border">
</Setter>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Popup>
最終實現的效果，如下所示：
