背水一战 Windows 10 (36) - 控件（弹出类）: ToolTip, Popup, PopupMenu
郭翰翮
原文:
背水一战 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
[源码下载]
类似资料：