zoukankan      html  css  js  c++  java
  • 重新想象 Windows 8.1 Store Apps (74)

    [源码下载]


    重新想象 Windows 8.1 Store Apps (74) - 新增控件: Flyout, MenuFlyout, SettingsFlyout



    作者:webabcd


    介绍
    重新想象 Windows 8.1 Store Apps 之新增控件

    • Flyout - Flyout 控件
    • MenuFlyout - 菜单 Flyout 控件
    • SettingsFlyout - 设置面板 Flyout 控件



    示例
    1、演示 Flyout 的应用
    FlyoutDemo.xaml

    <Page
        x:Class="Windows81.Controls.FlyoutDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Windows81.Controls"
        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="SharedFlyout" Placement="Right">
                <StackPanel>
                    <TextBlock Text="我是 Flyout 中的内容" Foreground="White" FontSize="24" />
                </StackPanel>
                <!--
                    FlyoutPresenterStyle - 用于定义 flyout 的显示样式
                -->
                <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>
            
        </Page.Resources>
        
        <Grid Background="Transparent">
            <StackPanel Margin="120 0 0 0">
    
                <TextBlock Name="lblMsg" FontSize="14.667" />
    
                
                <!--
                    Button 控件增加了一个 Flyout 属性(单击按钮后可以显示指定的 flyout)
                -->
                <Button Name="btnDemo" Content="按我弹出 Flyout" Margin="0 20 0 0">
                    <Button.Flyout>
                        <!--
                            Flyout - flyout 控件
                                Placement - flyout 的显示位置(FlyoutPlacementMode 枚举:Top, Bottom, Left, Right, Full - 屏幕中央)
                                Opening - flyout 准备显示时触发的事件
                                Opened - flyout 显示之后触发的事件
                                Closed - flyout 隐藏之后触发的事件
                        -->
                        <Flyout Placement="Right" Opening="Flyout_Opening" Opened="Flyout_Opened" Closed="Flyout_Closed">
                            <StackPanel>
                                <TextBlock>我是 Flyout 中的内容</TextBlock>
                                <Button Click="Button_Click">隐藏 Flyout</Button>
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
    
    
                <!--
                    让 FrameworkElement 弹出 flyout(通过 FlyoutBase.AttachedFlyout 来定义 FrameworkElement 对应的 flyout)
                    不会自动弹出,需要后台代码处理
                -->
                <TextBlock Text="按我弹出 Flyout" Margin="0 20 0 0" Tapped="TextBlock_Tapped" FontSize="18">
                    <FlyoutBase.AttachedFlyout>
                        <Flyout>
                            <TextBlock Text="我是 Flyout 中的内容" />
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </TextBlock>
    
    
                <!--
                    通过指定资源的方式,设置 flyout 的样式和内容
                -->
                <TextBlock Text="按我弹出 Flyout" Margin="0 20 0 0" Tapped="TextBlock_Tapped" FontSize="18"
                           FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" />
    
            </StackPanel>
        </Grid>
    </Page>

    FlyoutDemo.xaml.cs

    /*
     * Flyout - Flyout 控件(点击 Flyout 外部的话,Flyout 会自动关闭),继承自 FlyoutBase
     */
    
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Input;
    
    namespace Windows81.Controls
    {
        public sealed partial class FlyoutDemo : Page
        {
            public FlyoutDemo()
            {
                this.InitializeComponent();
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                // Flyout 继承自 FlyoutBase
                FlyoutBase flyout = btnDemo.Flyout;
    
                // FlyoutBase.Hide() - 隐藏 Flyout
                flyout.Hide();
            }
    
            private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
            {
                FrameworkElement element = sender as FrameworkElement;
    
                // FlyoutBase.ShowAttachedFlyout(FrameworkElement flyoutOwner) - 在指定的 FrameworkElement 上显示 flyout
                FlyoutBase.ShowAttachedFlyout(element);
    
                // FlyoutBase.GetAttachedFlyout(FrameworkElement element) - 获取指定 FrameworkElement 上定义的 flyout
                FlyoutBase flyout = FlyoutBase.GetAttachedFlyout(element);
    
                // FlyoutBase.ShowAt(FrameworkElement placementTarget) - 在指定的 FrameworkElement 上显示指定的 flyout
                // flyout.ShowAt(btnDemo);
            }
    
            private void Flyout_Opening(object sender, object e)
            {
                lblMsg.Text = "Flyout 打开中";
            }
    
            private void Flyout_Opened(object sender, object e)
            {
                lblMsg.Text = "Flyout 已打开";
            }
    
            private void Flyout_Closed(object sender, object e)
            {
                lblMsg.Text = "Flyout 已关闭";
            }
        }
    }


    2、演示 MenuFlyout 的应用
    MenuFlyoutDemo.xaml

    <Page
        x:Class="Windows81.Controls.MenuFlyoutDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Windows81.Controls"
        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="120 0 0 0">
    
                <TextBlock Name="lblMsg" FontSize="14.667" />
                
                <Button Content="Options" Margin="0 20 0 0">
                    <Button.Flyout>
                        <!--
                            MenuFlyout - MenuFlyout 控件
                                Items - MenuFlyout 中包含的 item(MenuFlyoutItem, ToggleMenuFlyoutItem, MenuFlyoutSeparator)
                        -->
                        <MenuFlyout>
                            
                            <!--
                                MenuFlyoutItem - MenuFlyout 中的 item
                                ToggleMenuFlyoutItem - MenuFlyout 中的可以 toggle 的 item
                                MenuFlyoutSeparator - MenuFlyout 中的分隔符
                            -->
    
                            <MenuFlyoutItem Text="MenuFlyoutItem" Click="MenuFlyoutItem_Click" />
                            <MenuFlyoutSeparator/>
                            <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem1" IsChecked="True" />
                            <ToggleMenuFlyoutItem Text="ToggleMenuFlyoutItem2" IsChecked="True" />
                            <!--
                                MenuFlyout.MenuFlyoutPresenterStyle - 用于定义 MenuFlyout 的显示样式
                            -->
                            <MenuFlyout.MenuFlyoutPresenterStyle>
                                <Style TargetType="MenuFlyoutPresenter">
                                    <Setter Property="BorderBrush" Value="Red"/>
                                    <Setter Property="BorderThickness" Value="5"/>
                                </Style>
                            </MenuFlyout.MenuFlyoutPresenterStyle>
                        </MenuFlyout>
                    </Button.Flyout>
                </Button>
    
            </StackPanel>
        </Grid>
    </Page>

    MenuFlyoutDemo.xaml.cs

    /*
     * MenuFlyout - 菜单 Flyout 控件(点击 Flyout 外部的话,Flyout 会自动关闭),继承自 FlyoutBase
     */
    
    using Windows.UI.Xaml.Controls;
    
    namespace Windows81.Controls
    {
        public sealed partial class MenuFlyoutDemo : Page
        {
            public MenuFlyoutDemo()
            {
                this.InitializeComponent();
            }
    
            private void MenuFlyoutItem_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
            {
                lblMsg.Text = "MenuFlyoutItem 被 click 了";
            }
        }
    }


    3、演示 SettingsFlyout 的应用
    SettingsFlyout/SettingsFlyout1.xaml

    <SettingsFlyout
        x:Class="Windows81.Controls.SettingsFlyout.SettingsFlyout1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Windows81.Controls.SettingsFlyout"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        
        Title="SettingsFlyout 1"
        IconSource="/Assets/SmallLogo.png" 
        HeaderForeground="White" 
        HeaderBackground="#00b2f0"
        Background="White">
        
        <!--
            SettingsFlyout - 设置面板(本例是通过 SettingsFlyout 模板创建的)
                Title - 标题
                IconSource - 图标(在标题右侧)
                HeaderForeground - header 的前景色
                HeaderBackground - header 的背景色
                Background - 设置面板的背景
        -->
        
    
        <!-- 此 StackPanel 充当内容部分的垂直布局的根面板-->
        <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    
            <!-- 下列 StackPanel 定义个别内容部分-->
    
            <!-- 第 1 部分内容-->
            <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
    
                <!-- 第 1 部分标题-->
                <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Lorem ipsum" />
    
                <!-- 第 1 部分正文-->
                <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                    <TextBlock.Text>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    </TextBlock.Text>
                </TextBlock>
    
            </StackPanel>
    
            <!-- 根据需要在下面定义更多内容部分-->
    
        </StackPanel>
    </SettingsFlyout>

    SettingsFlyout/Demo.xaml

    <Page
        x:Class="Windows81.Controls.SettingsFlyout.Demo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Windows81.Controls.SettingsFlyout"
        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="120 0 0 0">
    
                <Button Name="btnShowSettingsFlyout" Content="显示通过 SettingsFlyout 实现的自定义设置面板 " Click="btnShowSettingsFlyout_Click" />
    
            </StackPanel>
        </Grid>
    </Page>

    SettingsFlyout/Demo.xaml.cs

    /*
     * SettingsFlyout - 设置面板 Flyout 控件
     * 
     * 本例用于演示如何弹出 SettingsFlyout,实际的 SettingsFlyout 页面请参见:SettingsFlyout1.xaml
     */
    
    using Windows.UI.ApplicationSettings;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    
    namespace Windows81.Controls.SettingsFlyout
    {
        public sealed partial class Demo : Page
        {
            public Demo()
            {
                this.InitializeComponent();
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                SettingsPane.GetForCurrentView().CommandsRequested += onCommandsRequested;
            }
    
            protected override void OnNavigatedFrom(NavigationEventArgs e)
            {
                SettingsPane.GetForCurrentView().CommandsRequested -= onCommandsRequested;
    
                base.OnNavigatedFrom(e);
            }
    
            void onCommandsRequested(SettingsPane settingsPane, SettingsPaneCommandsRequestedEventArgs e)
            {
                // 关联到 charm 栏的设置按钮
                SettingsCommand myCommand = new SettingsCommand("myCommand", "SettingsFlyout 面板",
                    (handler) =>
                    {
                        SettingsFlyout1 sf = new SettingsFlyout1();
    
                        // SettingsFlyout.Show() - 显示指定的 SettingsFlyout(Show - 通过 charm 栏的设置按钮弹出;ShowIndependent - 通过自己写代码的方式弹出)
                        sf.Show();
    
                        // SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout
                        // sf.Hide();
                    });
                e.Request.ApplicationCommands.Add(myCommand);
            }
    
    
            private void btnShowSettingsFlyout_Click(object sender, RoutedEventArgs e)
            {
                SettingsFlyout1 sf = new SettingsFlyout1();
    
                // 点击了 SettingsFlyout 的后退按钮时触发的事件
                // sf.BackClick += xxx;
    
                // SettingsFlyout.ShowIndependent() - 显示指定的 SettingsFlyout(ShowIndependent - 通过自己写代码的方式弹出;Show - 通过 charm 栏的设置按钮弹出)
                sf.ShowIndependent();
    
                // SettingsFlyout.Hide() - 隐藏指定的 SettingsFlyout
                // sf.Hide();
            }
        }
    }



    OK
    [源码下载]

  • 相关阅读:
    bzoj3505 数三角形 组合计数
    cogs2057 殉国 扩展欧几里得
    cogs333 荒岛野人 扩展欧几里得
    bzoj1123 BLO tarjan求点双连通分量
    poj3352 road construction tarjan求双连通分量
    cogs1804 联合权值 dp
    cogs2478 简单的最近公共祖先 树形dp
    cogs1493 递推关系 矩阵
    cogs2557 天天爱跑步 LCA
    hdu4738 Caocao's Bridge Tarjan求割边
  • 原文地址:https://www.cnblogs.com/webabcd/p/3729116.html
Copyright © 2011-2022 走看看