zoukankan      html  css  js  c++  java
  • 控件(弹出类): 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;//右键单击
            this.Tapped += PopupMenuDemo_Tapped;//左键点击 }

          private async void PopupMenuDemo_Tapped(object sender, TappedRoutedEventArgs e)
              {
                var msgDialog = new  MessageDialog("我是一个提示内容") { Title = "提示标题" };
                msgDialog.Commands.Add(new UICommand("确定", uiCommand => { tb.Text = $"您点击了:{uiCommand.Label}"; }));
                msgDialog.Commands.Add(new UICommand("取消", uiCommand => { tb.Text = $"您点击了:{uiCommand.Label}"; }));
                await msgDialog.ShowAsync();

             }

            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);
                }
            }
        }
    }
    复制代码
  • 相关阅读:
    jQuery入门和DOM对象
    jQuery事件
    基础,层次,选择器
    MarkDown快速入门(typora)
    source是读入环境配置文件的命令,不能读入vimrc
    vi中将tab键转化为空格
    django-rest-framework学习之Quickstart和Serializer--2017年4月10日至12日
    Flask-RESTful插件介绍--2017年4月7日
    python restful api 编程--2017年4月6日
    一个验证登录的程序:python编写flask架构restful风格--2017年4月6日
  • 原文地址:https://www.cnblogs.com/ansen312/p/5913347.html
Copyright © 2011-2022 走看看