原文:背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

[源码下载]

背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

作者:webabcd

介绍
背水一战 Windows 10 之 控件(弹出类)

  • ToolTip
  • Popup
  • PopupMenu

示例
1、ToolTip 的示例
Controls/FlyoutControl/ToolTipDemo.xaml

<Pagex:Class="Windows10.Controls.FlyoutControl.ToolTipDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.FlyoutControl"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><!--ToolTip - 提示框控件Content - 提示内容Placement - 提示框的显示位置(Bottom, Right, Mouse, Left, Top)HorizontalOffset - 水平偏移量VerticalOffset - 垂直偏移量IsOpen - 提示框是否是显示状态(如果要设置此属性的话,需要等到宿主加载完之后再设置)Closed - 提示框关闭后触发的事件Opened - 提示框打开后触发的事件注:我这里测试 ToolTip 的最大宽度是 320--><TextBlock Name="textBlock1" Text="TextBlock" Margin="5"ToolTipService.ToolTip="ToolTip 的内容" ToolTipService.Placement="Right" /><TextBlock Name="textBlock2" Text="TextBlock" Margin="5"><ToolTipService.ToolTip><ToolTip Content="ToolTip 的内容" Placement="Mouse" HorizontalOffset="120" VerticalOffset="0"Opened="toolTip_Opened" Closed="toolTip_Closed" /></ToolTipService.ToolTip></TextBlock><TextBlock Name="lblMsg" Margin="5" /></StackPanel></Grid>
</Page>

Controls/FlyoutControl/ToolTipDemo.xaml.cs

/** ToolTip - 提示框控件(继承自 ContentControl, 请参见 /Controls/BaseControl/ContentControlDemo/)*/using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;namespace Windows10.Controls.FlyoutControl
{public sealed partial class ToolTipDemo : Page{public ToolTipDemo(){this.InitializeComponent();}private void toolTip_Opened(object sender, RoutedEventArgs e){lblMsg.Text = "textBlock2 toolTip_Opened";}private void toolTip_Closed(object sender, RoutedEventArgs e){lblMsg.Text = "textBlock2 toolTip_Closed";}}
}

2、Popup 的示例
Controls/FlyoutControl/PopupDemo.xaml

<Pagex:Class="Windows10.Controls.FlyoutControl.PopupDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.FlyoutControl"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><!--Popup - 弹出框控件Child - 弹出框的内容([ContentProperty(Name = "Child")]),一个 UIElement 类型的对象ChildTransitions - 显示弹出框时,其内容的过渡效果IsLightDismissEnabled - 点击非 Popup 区域时否关闭 PopupHorizontalOffset - 水平方向上的偏移量VerticalOffset - 垂直方向上的偏移量--><Popup Name="popup" Margin="5" HorizontalOffset="200" VerticalOffset="10" IsLightDismissEnabled="{Binding IsChecked, ElementName=chkIsLightDismissEnabled}"><Border BorderBrush="Red" BorderThickness="1" Background="Orange" Width="200" Height="200"><StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock Text="我是 Popup" HorizontalAlignment="Center" /><Button Name="btnClosePopup" Content="关闭" HorizontalAlignment="Center" Click="btnClosePopup_Click" /></StackPanel></Border><!--为弹出框增加 PopupThemeTransition 效果--><Popup.ChildTransitions><TransitionCollection><PopupThemeTransition /></TransitionCollection></Popup.ChildTransitions></Popup><TextBlock Name="lblMsg" Margin="5" /><!--显示 xaml 方式定义的 popup--><StackPanel Orientation="Horizontal" Margin="5"><Button Name="btnOpenPopup" Content="弹出 Popup" Click="btnOpenPopup_Click" /><CheckBox Name="chkIsLightDismissEnabled" IsChecked="False" Content="IsLightDismissEnabled" Margin="10 0 0 0" /></StackPanel><!--显示 code-behind 方式定义的 popup--><Button Name="btnOpenPopupToast" Content="弹出仿 toast 的 Popup" Click="btnOpenPopupToast_Click" Margin="5" /></StackPanel></Grid>
</Page>

Controls/FlyoutControl/PopupDemo.xaml.cs

/** Popup - 弹出框控件(继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml)*     IsOpen - 弹出框是否是打开的状态(如果要设置此属性,需要在控件加载之后)*     Opened - 弹出框打开后触发的事件*     Closed - 弹出框关闭后触发的事件*/using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Animation;namespace Windows10.Controls.FlyoutControl
{public sealed partial class PopupDemo : Page{// 仿 toast 的 Popupprivate Popup _popupToast = new Popup();public PopupDemo(){this.InitializeComponent();popup.Opened += delegate { lblMsg.Text = "popup.Opened"; };popup.Closed += delegate { lblMsg.Text = "popup.Closed"; };}private void btnOpenPopup_Click(object sender, RoutedEventArgs e){if (!popup.IsOpen)popup.IsOpen = true;}private void btnClosePopup_Click(object sender, RoutedEventArgs e){if (popup.IsOpen)popup.IsOpen = false;}private void btnOpenPopupToast_Click(object sender, RoutedEventArgs e){if (!_popupToast.IsOpen){// 设置 Popup 中的内容Border border = new Border();border.BorderBrush = new SolidColorBrush(Colors.Red);border.BorderThickness = new Thickness(1);border.Background = new SolidColorBrush(Colors.Blue);border.Width = 600;border.Height = 100;border.Child = new TextBlock() { Text = "我是 Popup", HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center };// 设置 Popup 的相关属性_popupToast.IsLightDismissEnabled = true;_popupToast.Child = border;_popupToast.VerticalOffset = 100d; // 设置 Popup 的显示位置(Popup 的默认显示位置在窗口 0,0 点)_popupToast.ChildTransitions = new TransitionCollection() { new PaneThemeTransition() { Edge = EdgeTransitionLocation.Left } };_popupToast.IsOpen = true;}}}
}

3、PopupMenu 的示例
Controls/FlyoutControl/PopupMenuDemo.xaml

<Pagex:Class="Windows10.Controls.FlyoutControl.PopupMenuDemo"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:Windows10.Controls.FlyoutControl"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><Grid Background="Transparent"><StackPanel Margin="10 0 10 10"><TextBlock Name="lblMsg" Margin="5" /><TextBlock Name="lblDemo" Margin="5">鼠标右键我或触摸 press-and-hold 我,以弹出 PopupMenu</TextBlock></StackPanel></Grid>
</Page>

Controls/FlyoutControl/PopupMenuDemo.xaml.cs

/** PopupMenu - 上下文菜单(未继承任何类)*     Commands - 上下文菜单中的命令集合,返回 IList<IUICommand> 类型的数据*     IAsyncOperation<IUICommand> ShowAsync(Point invocationPoint) - 在指定的位置(PopupMenu 的默认显示位置在窗口 0,0 点)上显示上下文菜单,并返回用户激发的命令*     IAsyncOperation<IUICommand> ShowForSelectionAsync(Rect selection, Placement preferredPlacement) - 在指定的矩形区域的指定方位显示上下文菜单,并返回用户激发的命令*     * IUICommand - 命令*     Label - 显示的文字*     Id - 参数** UICommandSeparator - 分隔符*/using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows10.Common;namespace Windows10.Controls.FlyoutControl
{public sealed partial class PopupMenuDemo : Page{public PopupMenuDemo(){this.InitializeComponent();lblDemo.RightTapped += lblDemo_RightTapped;}private async void lblDemo_RightTapped(object sender, RightTappedRoutedEventArgs e){PopupMenu menu = new PopupMenu();menu.Commands.Add(new UICommand("item1", (command) =>{lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);}, "param1"));menu.Commands.Add(new UICommand("item2", (command) =>{lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);}, "param2"));// 分隔符menu.Commands.Add(new UICommandSeparator());menu.Commands.Add(new UICommand("item3",(command) =>{lblMsg.Text = string.Format("command label:{0}, id:{1}", command.Label, command.Id);}, "param3"));// 在指定的位置显示上下文菜单,并返回用户激发的命令(测试的时候这里有时会发生异常,不知道什么原因,所以还是尽量用 MenuFlyout 吧)IUICommand chosenCommand = await menu.ShowForSelectionAsync(Helper.GetElementRect((FrameworkElement)sender), Placement.Below);if (chosenCommand == null) // 用户没有在上下文菜单中激发任何命令
            {lblMsg.Text = "用户没有选择任何命令";}else{lblMsg.Text += Environment.NewLine;lblMsg.Text += string.Format("result label:{0}, id:{1}", chosenCommand.Label, chosenCommand.Id);}}}
}

OK
[源码下载]

背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu相关推荐

  1. 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar

    原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...

  2. 背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑

    背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 原文:背水一战 Windows 10 (61) - 控件(媒体类): InkCanvas 涂鸦编辑 [源码 ...

  3. 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing

    背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 原文:背水一战 Windows 10 (34) ...

  4. 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

    原文:背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webab ...

  5. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 原文:背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox [源码 ...

  6. 背水一战 Windows 10 (41) - 控件(导航类): Frame

    原文:背水一战 Windows 10 (41) - 控件(导航类): Frame [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍 ...

  7. 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid

    原文: 背水一战 Windows 10 (38) - 控件(布局类): Panel, Canvas, RelativePanel, StackPanel, Grid [源码下载] 背水一战 Windo ...

  8. 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)...

    原文:背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) [源码下载] 背水一战 Wind ...

  9. 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容...

    原文:背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 [源码下载 ...

最新文章

  1. java 高级数据类型_【高级数据类型】- 2.通道的更多种类
  2. ASP.NET跨服务器上传文件的相关解决方案
  3. 业务场景下数据采集机制和策略
  4. 隐藏a标签seo_百度SEO网站整体优化方案 - 蜘蛛池博客
  5. Python网络爬虫第一弹《Python网络爬虫相关基础概念》
  6. git rebase vs git merge
  7. HighNewTech:新物种?这是一种不需要写代码的程序猿,这事,得从Ta们掌握了 iVX工具(首个无代码编程语言)说起……
  8. Arduino 工控板开发
  9. Excel如何批量删除公式只保留数值
  10. java计算机毕业设计雁门关风景区宣传网站源码+系统+mysql数据库+lw文档
  11. AI编译器与TPU-MLIP
  12. AJAX技术学院风连衣裙,学院风连衣裙怎么搭配好看
  13. PTA 打印九九口诀表
  14. Xiuno BBS 4.0 修改时间显示
  15. 浅谈《微信抢红包原理》
  16. 【总结】查看Linux系统ALSA
  17. 使用 ELK 来分析你的支付宝账单
  18. 计算机图形学之空间坐标变化之三维图形观察及变换
  19. eNSP路由过滤OSPF中使用Filter-Policy实例import实例
  20. 一物一码如何实现数字化营销

热门文章

  1. 初步了解Linux内核中断初始化
  2. 图解分析一个dNet进销存软件
  3. maven package和install
  4. 力扣——按递增顺序显示卡牌
  5. excel表中判断A列与B列内容是否相同,相同的话在C列按条件输出!
  6. Android学习笔记进阶十三获得本地全部照片
  7. HDU 2859 Phalanx
  8. Sublime Text 3在ubuntu12.10下无法中文输入的解决方案
  9. JavaScript学习笔记(十)——学习心得与经验小结
  10. 要离开苏州,一大堆东西要处理(包括租的房子)