首页 > 代码库 > 背水一战 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 - 提示框打开后触发的事件            -->            <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
[源码下载]

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