背水一戰 Windows 10 (35) - 控制項（彈出類）: FlyoutBase, Flyout, MenuFlyout

背水一戰 Windows 10 之控制項（彈出類）: FlyoutBase, Flyout, MenuFlyout ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（彈出類）

FlyoutBase
Flyout
MenuFlyout

示例
1、FlyoutBase(基類) 的示例
Controls/FlyoutControl/FlyoutBaseDemo.xaml

<Page
    x:Class="Windows10.Controls.FlyoutControl.FlyoutBaseDemo"
    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">

    <Page.Resources>

        <!--
            通過資源的方式定義 flyout 的樣式和內容
        -->
        <Flyout x:Key="MyFlyout">
            <StackPanel>
                <TextBlock Text="我是 Flyout 中的內容" />
            </StackPanel>
        </Flyout>

    </Page.Resources>
    
    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                Flyout - 彈出框控制項，繼承自 FlyoutBase，下麵介紹 FlyoutBase 的相關知識點
                    Placement - 彈出框的顯示位置
                        Top - 目標元素的上邊（預設值）
                        Bottom - 目標元素的下邊
                        Left - 目標元素的左邊
                        Right - 目標元素的右邊
                        Full - 屏幕中央
                    Opening - 彈出框準備顯示時觸發的事件
                    Opened - 彈出框顯示之後觸發的事件
                    Closed - 彈出框隱藏之後觸發的事件
            -->


            <!--
                FlyoutBase 的用法 1
                部分控制項本身有 Flyout 屬性，比如 Button 控制項，可以通過其 Flyout 屬性直接為其綁定 FlyoutBase 控制項及行為（單擊按鈕後就會顯示此 FlyoutBase 控制項）
            -->
            <Button Name="button1" Margin="5" Content="按我彈出 Flyout">
                <Button.Flyout>
                    <Flyout x:Name="flyout1" Placement="Right" Opening="flyout1_Opening" Opened="flyout1_Opened" Closed="flyout1_Closed">
                        <StackPanel>
                            <TextBlock>我是 Flyout 中的內容</TextBlock>
                            <Button x:Name="button1CloseFlyout" Click="button1CloseFlyout_Click">隱藏 Flyout</Button>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>
            <TextBlock Name="lblMsg1" Margin="5" />
            

            <!--
                FlyoutBase 的用法 2
                通過附加屬性 FlyoutBase.AttachedFlyout 為指定的控制項綁定 FlyoutBase 控制項（何時顯示需要在 CodeBehind 中控制）
            -->
            <TextBlock Name="textBlock1" Margin="5" Text="按我彈出 Flyout" Tapped="textBlock1_Tapped" FontSize="18">
                <FlyoutBase.AttachedFlyout>
                    <Flyout Placement="Right">
                        <TextBlock Text="我是 Flyout 中的內容" />
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>

            
            <!--
                FlyoutBase 的用法 3
                此用法同用法 2，不同之處在於這裡把 flyout 的樣式和內容放到資源中定義了
            -->
            <TextBlock Name="textBlock2" Margin="5" Text="按我彈出 Flyout" Tapped="textBlock2_Tapped" FontSize="18"
                       FlyoutBase.AttachedFlyout="{StaticResource MyFlyout}" />


            <!--
                FlyoutBase 的用法 4
                在 CodeBehind 中創建 FlyoutBase 控制項後，將其綁定到指定的控制項上，並顯示
            -->
            <TextBlock Name="textBlock3" Margin="5" Text="按我彈出 Flyout" Tapped="textBlock3_Tapped" FontSize="18" />


            <!--
                FlyoutBase 的用法 5
                在 CodeBehind 中創建 FlyoutBase 控制項後，在不設置綁定的情況下，使其顯示在指定的控制項上
            -->
            <TextBlock Name="textBlock4" Margin="5" Text="按我彈出 Flyout" Tapped="textBlock4_Tapped" FontSize="18" />

        </StackPanel>
    </Grid>
</Page>

Controls/FlyoutControl/FlyoutBaseDemo.xaml.cs

/*
 * FlyoutBase（基類） - 彈出框控制項基類（繼承自 DependencyObject, 請參見 /Controls/BaseControl/DependencyObjectDemo.xaml）
 *     Hide() - 隱藏 Flyout
 *     ShowAt(FrameworkElement targetElement) - 在指定的 FrameworkElement 上顯示指定的 Flyout
 *
 *     FlyoutBase.SetAttachedFlyout(FrameworkElement element, FlyoutBase value) - 在指定的 FrameworkElement 上綁定指定的 Flyout
 *     FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 獲取指定的 FrameworkElement 上綁定的 Flyout
 *     FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上顯示其綁定的 Flyout
 *
 *
 * 註：點擊 FlyoutBase 外部的話，FlyoutBase 會自動關閉
 * 
 * 另外，在 uwp 中不再支持 SettingsFlyout 了
 */

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class FlyoutBaseDemo : Page
    {
        public FlyoutBaseDemo()
        {
            this.InitializeComponent();
        }


        private void flyout1_Opening(object sender, object e)
        {
            lblMsg1.Text = "Flyout 打開中";
        }
        private void flyout1_Opened(object sender, object e)
        {
            lblMsg1.Text = "Flyout 已打開";
        }
        private void flyout1_Closed(object sender, object e)
        {
            lblMsg1.Text = "Flyout 已關閉";
        }
        private void button1CloseFlyout_Click(object sender, RoutedEventArgs e)
        {
            flyout1.Hide();
        }


        private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FlyoutBase.ShowAttachedFlyout(textBlock1);
        }


        private void textBlock2_Tapped(object sender, TappedRoutedEventArgs e)
        {
            FlyoutBase flyout = FlyoutBase.GetAttachedFlyout(textBlock2);
            flyout.Placement = FlyoutPlacementMode.Right;

            FlyoutBase.ShowAttachedFlyout(textBlock2);
        }


        // 在 CodeBehind 中創建 FlyoutBase 控制項後，將其綁定到指定的控制項上，並顯示
        private void textBlock3_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TextBlock flyoutContent = new TextBlock();
            flyoutContent.Text = "我是 Flyout 中的內容";

            Flyout flyout = new Flyout();
            flyout.Placement = FlyoutPlacementMode.Right;
            flyout.Content = flyoutContent;

            FlyoutBase.SetAttachedFlyout(textBlock3, flyout);
            FlyoutBase.ShowAttachedFlyout(textBlock3);
        }


        // 在 CodeBehind 中創建 FlyoutBase 控制項後，在不設置綁定的情況下，使其顯示在指定的控制項上
        private void textBlock4_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TextBlock flyoutContent = new TextBlock();
            flyoutContent.Text = "我是 Flyout 中的內容";

            Flyout flyout = new Flyout();
            flyout.Placement = FlyoutPlacementMode.Right;
            flyout.Content = flyoutContent;

            flyout.ShowAt(textBlock4);
        }
    }
}

2、Flyout 的示例
Controls/FlyoutControl/FlyoutDemo.xaml

<Page
    x:Class="Windows10.Controls.FlyoutControl.FlyoutDemo"
    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">

            <!--
                Flyout - 彈出框控制項
                    FlyoutPresenterStyle - 用於定義 Flyout 的樣式
            -->
            
            <!--
                xaml 方式指定 flyout
            -->
            <Button Name="button1" Margin="5" Content="按我彈出 Flyout">
                <Button.Flyout>
                    <Flyout Placement="Right">
                        <StackPanel>
                            <TextBlock Text="我是 Flyout 中的內容" Foreground="White" FontSize="24" />
                        </StackPanel>
                        <Flyout.FlyoutPresenterStyle>
                            <Style TargetType="FlyoutPresenter">
                                <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                                <Setter Property="Background" Value="Blue"/>
                                <Setter Property="BorderBrush" Value="Red"/>
                                <Setter Property="BorderThickness" Value="10"/>
                                <Setter Property="MinHeight" Value="300"/>
                                <Setter Property="MinWidth" Value="300"/>
                            </Style>
                        </Flyout.FlyoutPresenterStyle>
                    </Flyout>
                </Button.Flyout>
            </Button>

            <!--
                code-behind 方式指定 flyout
            -->
            <TextBlock Name="textBlock1" Margin="5" Text="按我彈出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />

        </StackPanel>
    </Grid>
</Page>

Controls/FlyoutControl/FlyoutDemo.xaml.cs

/*
 * Flyout - 彈出框控制項（繼承自 FlyoutBase, 請參見 /Controls/FlyoutControl/FlyoutBaseDemo.xaml）
 *     Content - 獲取或設置 Flyout 的內容
 */

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class FlyoutDemo : Page
    {
        public FlyoutDemo()
        {
            this.InitializeComponent();
        }

        private void textBlock1_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TextBlock flyoutContent = new TextBlock();
            flyoutContent.Text = "我是 Flyout 中的內容";

            Flyout flyout = new Flyout();
            flyout.Placement = FlyoutPlacementMode.Right;
            flyout.Content = flyoutContent;

            flyout.ShowAt(textBlock1);
        }
    }
}

3、MenuFlyout 的示例
Controls/FlyoutControl/MenuFlyoutDemo.xaml

<Page
    x:Class="Windows10.Controls.FlyoutControl.MenuFlyoutDemo"
    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">

    <Page.Resources>
        <!--
            MenuFlyout - 菜單彈出框控制項
                Items - MenuFlyout 中包含的 item（MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator）
        -->
        <MenuFlyout x:Key="MyMenuFlyout" Placement="Right">
            
            <!--
                MenuFlyoutItem - MenuFlyout 中的 item
                    Text, Click, Command, CommandParameter
            
                ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item
                    IsChecked, Text, Click, Command, CommandParameter
            
                MenuFlyoutSubItem - 支持 sub item 的 item
                    Text, Items
            
                MenuFlyoutSeparator - MenuFlyout 中的分隔符
            -->
            
            <MenuFlyoutItem Name="menuFlyoutItem1" Text="MenuFlyoutItem" Click="menuFlyoutItem1_Click" />
            <MenuFlyoutSeparator/>
            <ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem1" Text="ToggleMenuFlyoutItem1" IsChecked="False" Click="toggleMenuFlyoutItem1_Click" />
            <ToggleMenuFlyoutItem Name="toggleMenuFlyoutItem2" Text="ToggleMenuFlyoutItem2" IsChecked="True" Click="toggleMenuFlyoutItem2_Click" />

            <MenuFlyoutSubItem Text="item">
                <MenuFlyoutItem Text="item 1" />
                <MenuFlyoutItem Text="item 2" />
                <MenuFlyoutSubItem Text="item 3">
                    <MenuFlyoutItem Text="item 3 - 1" />
                    <MenuFlyoutItem Text="item 3 - 2" />
                </MenuFlyoutSubItem>
            </MenuFlyoutSubItem>

            <!--
                MenuFlyout.MenuFlyoutPresenterStyle - 用於定義 MenuFlyout 的樣式
            -->
            <MenuFlyout.MenuFlyoutPresenterStyle>
                <Style TargetType="MenuFlyoutPresenter">
                    <Setter Property="BorderBrush" Value="Red" />
                    <Setter Property="BorderThickness" Value="5" />
                </Style>
            </MenuFlyout.MenuFlyoutPresenterStyle>
        </MenuFlyout>

    </Page.Resources>

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />

            <Button Name="button1" Margin="5" Content="Options" Flyout="{StaticResource MyMenuFlyout}" />

            <TextBlock Name="textBlock1" Margin="5 20 5 5" Text="按我彈出 Flyout" Tapped="textBlock1_Tapped" FontSize="18" />
            
        </StackPanel>
    </Grid>
</Page>

Controls/FlyoutControl/MenuFlyoutDemo.xaml.cs

/*
 * MenuFlyout - 菜單彈出框控制項（繼承自 FlyoutBase, 請參見 /Controls/FlyoutControl/FlyoutBaseDemo.xaml）
 *     ShowAt(UIElement targetElement, Point point) - 在指定的 UIElement 的指定位置（point 是相對於 targetElement 的位置）顯示 MenuFlyout 控制項
 */

using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.FlyoutControl
{
    public sealed partial class MenuFlyoutDemo : Page
    {
        public MenuFlyoutDemo()
        {
            this.InitializeComponent();
        }

        private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = "MenuFlyoutItem 被 click 了";
        }

        private void menuFlyoutItem1_Click(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = "menuFlyoutItem1 被 click 了";
        }

        private void toggleMenuFlyoutItem1_Click(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = $"toggleMenuFlyoutItem1 被 click 了, IsChecked:{toggleMenuFlyoutItem1.IsChecked}";
        }

        private void toggleMenuFlyoutItem2_Click(object sender, RoutedEventArgs e)
        {
            lblMsg.Text = $"toggleMenuFlyoutItem2 被 click 了, IsChecked:{toggleMenuFlyoutItem2.IsChecked}";
        }


        private void textBlock1_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
        {
            MenuFlyout menuFlyout = this.Resources["MyMenuFlyout"] as MenuFlyout;

            // 對於基類的 ShowAt(FrameworkElement targetElement) 方法當然是支持的
            // menuFlyout.ShowAt(textBlock1);

            // 在 MenuFlyout 中重載了 ShowAt() 方法，即 ShowAt(UIElement targetElement, Point point)
            // 其中 point 代表 MenuFlyout 相對於 targetElement 左上角的顯示位置（此時 MenuFlyout 的 Placement 參數就無效了）
            menuFlyout.ShowAt(textBlock1, new Point(10, 10));
        }
    }
}

OK
[源碼下載]