背水一戰 Windows 10 (36) - 控制項（彈出類）: ToolTip, Popup, PopupMenu

背水一戰 Windows 10 之控制項（彈出類）: 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
[源碼下載]