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

2022-02-04 14:14:04

介绍
背水一战 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();

                border.Background = new SolidColorBrush(Colors.Blue);

                border.Width = ;

                border.Height = ;

                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
[源码下载]

码农公寓

相关文章