关于WPF中Popup中的⼀些⽤法的总结
Popup控件是⼀个常⽤的⾮常有⽤的控件，顾明思义就是弹出式控件，⾸先我们来看看MSDN对它的解释吧，表⽰具有内容的弹出窗⼝，这个是⾮常重要的控件，我们看看它的
继承关系吧：
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上⾯的解释是：您可以通过设置相关的属性来定位弹出的位置，通
过设置、、Placement、和属性来定位弹出项。3 其实这⾥和和这⼀对属性可以做⼀些等价的替换，这些都是可以对Popup的弹出的位置进⾏微调。4 IsOpen属性，这个是最
重要的属性之⼀，通常是通过绑定的⽅式来为其进⾏赋值，⽐如说：IsOpen="{Binding ElementName=PCheckBox,Path=IsChecked}" 是通过绑定CheckBox的IsChecked属性来
控制Popup的弹出。最后需要重点介绍的就是StayOpen属性，MSDN的解释是：获取或设置⼀个值，该值指⽰当 Popup 控件焦点不再对准时，是否关闭该控件。当
将 StaysOpen 属性设为 true 时，始终处于打开状态，直到通过将属性设置为 false 将其显式关闭。当 StaysOpen 设置为false 时，控件会截获所有⿏标事件和键盘事件，以确
定在控件之外发⽣这些事件之⼀，最明显的区别是当设置为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">
borderbox<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<interactive:ExInvokeCommandAction Command="{Binding DataContext.OnSelectHistoryMembersListBoxSelected,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=my:MainWindow},Mode=TwoWa 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>
最终实现的效果，如下所⽰：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论