码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2018-09-20 11:22:56      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:blog   ane   https   splay   鼠标   res   dac   ted   play   

原文:关于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上面的解释是:您可以通过设置相关的属性来定位弹出的位置,通过设置 PlacementTargetPlacementRectanglePlacement、HorizontalOffset 和 VerticalOffsetProperty 属性来定位弹出项。3 其实这里PlacementRectangleHorizontalOffset 和 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>

  最终实现的效果,如下所示:        

技术分享图片

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

标签:blog   ane   https   splay   鼠标   res   dac   ted   play   

原文地址:https://www.cnblogs.com/lonelyxmas/p/9678804.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!