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

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

  原文：
      

  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配合使用来达到类似于百度搜索框的效果，首先贴出重点的实现代码：        

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<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>

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

posted @   风雪江山  阅读(6433)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示