控件（弹出类）: FlyoutBase, Flyout, MenuFlyout

2023-01-18 08:22:03

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));

        }

    }

}

码农公寓

相关文章