关于WPF中Popup中的一些用法的总结

最新推荐文章于 2024-05-06 11:50:33 发布

狂奔之林

最新推荐文章于 2024-05-06 11:50:33 发布

阅读量1.1k

点赞数

分类专栏： WPF

WPF 专栏收录该内容

80 篇文章 2 订阅

订阅专栏

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>

　　最终实现的效果，如下所示：

狂奔之林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
关于WPF中Popup中的一些用法的总结

Popup控件是一个常用的非常有用的控件，顾明思义就是弹出式控件，首先我们来看看MSDN对它的解释吧，表示具有内容的弹出窗口，这个是非常重要的控件，我们看看它的继承关系吧： System.Object System.Windows.Threading.DispatcherObject System.Windows.DependencyObject System.Windows.M...
复制链接

扫一扫

专栏目录