原文:
背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu
背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu
作者：webabcd
介绍
背水一战 Windows 10 之 控件（弹出类）
- ToolTip
- Popup
- PopupMenu
示例
1、ToolTip 的示例
Controls/FlyoutControl/ToolTipDemo.xaml
<Page x: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
<Page x: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 区域时否关闭 Popup HorizontalOffset - 水平方向上的偏移量 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 的 Popup private 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
<Page x: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
[源码下载]
