原文:背水一戰 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。