Summary of the WPF Popup in some usage

1. Common Property Description

IsOpen: Boolean value that indicates whether the control display Popup

StaysOpen: Boolean value that indicates when the Popup control loses focus, whether to close the Popup control display

PopupAnimation: Indicates if the display window when using animation, only if this property is equal to true AllowsTransparency be useful, animate when some Popup popup. We can set PopupAnimation = "Fade" is said in the pop-up by getting into the way of entry

Popup window itself is an invisible element, only after the window is placed on the information to be displayed
positioning method targeting Popup and general controls are not the same, using Popup five properties to set the location information:
PlacementTarget: Popup defined set the opposing control, PlacementTarget = "{Binding ElementName = ' name of the control'}"

If no attribute is NULL, the Popup is positioned relative to the upper left corner of the screen

Placement: an enumeration value that specifies targeting Popup Controls

PlacementRectangle: setting a rectangle, when the Popup display control, a relative position of this rectangle to display the location of this rectangle is also with respect to the control attribute set PlacementTarget
HorizontalOffset: horizontal movement required to specify a value that indicates the position of the Popup how many pixels
VerticalOffset: Specifies a value indicating the desired vertical position of the Popup number of pixels moved

<Canvas x:Name="Search2" Background="#303030" Panel.ZIndex="5" Margin="-2,0,0,-2" Grid.Row="0" Visibility="Collapsed">
<ScrollViewer x:Name="ScrollViewer1" VerticalScrollBarVisibility="Hidden" Height="{Binding ElementName=Search2, Path=ActualHeight, Mode=OneWay}" Style="{StaticResource for_scrollviewer}">
<ItemsControl x:Name="itemsControl1" ItemsSource="{Binding Menus}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl >
<Border>
<StackPanel Margin="1,0,0,0">
<Button x:Name="btnIcon" Style="{StaticResource btnMemoryStyle}"/>
</StackPanel>
</Border>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Canvas>

<Style x:Key="btnMemoryStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Timeline1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_Border" Storyboard.TargetProperty="Width">
<SplineDoubleKeyFrame KeyTime="00:00:00.0000000" Value="300"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>
<Storyboard x:Key="Timeline2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_Border" Storyboard.TargetProperty="Width">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="bd">
<Grid HorizontalAlignment="Left">
<Border x:Name="_Border" Background="#303030" CornerRadius="0" Height="60" Width="0" Margin="60,0,0,0">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Left">
<StackPanel>
<TextBlock x:Name="TextBlock1" VerticalAlignment="Center" HorizontalAlignment="Left"
Style="{DynamicResource TreeMainItemLabelStyle}" Text="{Binding Title}"/>
</StackPanel>
<Popup x:Name="pop" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=TextBlock1}">
<Border CornerRadius="5">
<StackPanel>
<ItemsControl x:Name="itemsControl1" ItemsSource="{Binding Items}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl >
<StackPanel Style="{DynamicResource BackgroundStackPanel2}">
<StackPanel Cursor="Hand" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" Width="274" >
<TextBlock Style="{DynamicResource FontAweSomeSkin}" Margin="20,5,0,0" Text="{Binding Path=ImagePath,
Converter={StaticResource ConvertFontIconEncode}}" FontSize="{DynamicResource TreeSubItemLabelFontSize}"
VerticalAlignment="Center" TextAlignment="Center" Width="25"/>
<TextBlock Style="{DynamicResource TreeMainItemLabelStyle}" Margin="20,5,0,0" Text="{Binding Title,Converter={StaticResource StringFormatConvert},ConverterParameter=15}"
VerticalAlignment="Center"/>
<StackPanel.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding DataContext.NavigateLinkCommand,RelativeSource={RelativeSource AncestorType=UserControl}}"
CommandParameter="{Binding}"/>
</StackPanel.InputBindings>
</StackPanel>
</StackPanel>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Border>
</Popup>
</StackPanel>
</Border>
<Grid HorizontalAlignment="Left">
<Rectangle x:Name="Rectangle1" Fill="#303030" Height="60" Width="60"/>
<TextBlock x:Name="txtIco" Style="{DynamicResource FontAweSomeSkin_White}"
Text="{Binding ImagePath, Converter={StaticResource ConvertFontIconEncode}}"
FontSize="{DynamicResource TreeMainItemLabelFontSize}" VerticalAlignment="Center" Opacity="0.7"/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
</Trigger.ExitActions>

Summary of the WPF Popup in some usage

Guess you like