关于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配合使用来达到类似于百度搜索框的效果,首先贴出重点的实现代码:
<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中的一些用法的总结的更多相关文章
- WPF中DataGrid中的DataGridCheckBoxColumn用法(全选,全否,反选)
原文:WPF中DataGrid中的DataGridCheckBoxColumn用法(全选,全否,反选) 前台代码 <DataGrid.Columns> <DataGridCheckB ...
- WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书
原文:WPF中Popup控件在Win7以及Win10等中的对齐点方式不一样的解决方案 - 简书 最近项目中使用弹出控件Popup,发现弹出框的对齐方式在不同的系统中存在不同(Popup在win10上是 ...
- WPF 在事件中绑定命令(不可以在模版中绑定命令)
其实这也不属于MVVMLight系列中的东东了,没兴趣的朋友可以跳过这篇文章,本文主要介绍如何在WPF中实现将命令绑定到事件中. 上一篇中我们介绍了MVVMLight中的命令的用法,那么仅仅知道命令是 ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...
- WPF 在事件中绑定命令
导航:MVVMLight系列文章目录:<关于 MVVMLight 设计模式系列> 其实这也不属于MVVMLight系列中的东东了,没兴趣的朋友可以跳过这篇文章,本文主要介绍如何在WPF中实 ...
- WPF drag过程中显示ToolTip.
原文:WPF drag过程中显示ToolTip. 在drag/drop过程中,我们在判断出over的元素上是否可以接受drag的东西之后,通常是通过鼠标的样式简单告诉用户这个元素不接受现在drag的内 ...
- 年度巨献-WPF项目开发过程中WPF小知识点汇总(原创+摘抄)
WPF中Style的使用 Styel在英文中解释为”样式“,在Web开发中,css为层叠样式表,自从.net3.0推出WPF以来,WPF也有样式一说,通过设置样式,使其WPF控件外观更加美化同时减少了 ...
- Spring mvc中@RequestMapping 6个基本用法
Spring mvc中@RequestMapping 6个基本用法 spring mvc中的@RequestMapping的用法. 1)最基本的,方法级别上应用,例如: Java代码 @Reques ...
- Delphi中stringlist分割字符串的用法
Delphi中stringlist分割字符串的用法 TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 1.CommaT ...
随机推荐
- ORACLE直方图(10g)
为什么需要直方图 ?当表中一列数据比较的值分布比较均匀时,optimzer可以很好的通过最大值,最小值和NDV(唯一值的个数),就可以判断出cardinality.对于cardinality越精确,o ...
- Python:Day45 Javascript的String字符串
typeof只能判断普通数据类型, 对于复杂的只是判断出来是一个Object: instanceof 可以判断数据是否是某一类型: alert(s instanceof String); String ...
- 【vue】钩子函数生命周期
图1 图2: 图3 相关资料:http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html https://segmentfault.com ...
- mac python3 conda pytorch出错:libc++abi.dylib: terminating with uncaught exception of type NSException
mac 10.14/ conda/python 3.7环境下运行神经网络例子出现错误: -- :::] -[NSApplication _setup:]: unrecognized selector ...
- Linux 系统负载查询及分析说明
Linux 系统出现死机或卡顿时,可以参阅如下步骤进行整体排查: 检查服务器进程与服务否占用了过多内存,或者内存没有正常释放,导致出现内存溢出,系统宕机. 检查 /var/spool/cron 等系统 ...
- day12--装饰器
定义(如何理解装饰器):装饰器本生是闭包函数的一种应用,是指在不改变原函数的情况下为原函数添加新的功能的一个函数.它把被装饰的函数作为外层函数的参数传入装饰器,通过闭包操作后返回一个替代版函数. 遵循 ...
- [MicroPython]TurniBit开发板DIY自动窗帘模拟系统
一.准备工作 üTurnipBit 开发板 一块 ü下载数据线 一条 ü微型步进电机(28BYJ-48) 一个 ü步进电机驱动板(ULN2003APG) 一块 ü光敏传感器 一个 üTurnipBit ...
- 开源工具 DotnetRSA 快速生成和转换RSA秘钥
一.简介 DotnetRSA 是一个利用 .NET Core 2.1 开发的 .NET Global Tool,是可以想npm全局安装一样,安装在你的系统中,只需敲一行命令便可以快速生成RSA加密算法 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- 二、截取字符串长度(css方式)
只针对谷歌 width: 100%; //height: 58px; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -w ...