IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> WinRT-Metro -> 背水一战 Windows 10 (35) -> 正文阅读

[WinRT-Metro]背水一战 Windows 10 (35)

背水一战 Windows 10 (35) [源码下载]
背水一战 Windows 10 (35) - 控件(弹出类): 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
[源码下载]
上一篇文章      下一篇文章      查看所有文章
加:2016-09-23 22:21:29  更:2017-05-14 22:59:15 
 
  WinRT-Metro 最新文章
背水一战 Windows 10 (76)
背水一战 Windows 10 (75)
uwp ListView列表滑动特效
背水一战 Windows 10 (74)
背水一战 Windows 10 (73)
背水一战 Windows 10 (72)
UWP 手绘视频创作工具技术分享系列
13、在 uwp应用中,给图片添加高斯模糊滤镜
Win2D学习系列(一):HelloWin2D
背水一战 Windows 10 (7)
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年9日历
2018-9-25 22:54:31
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库