Windows 8.1 应用再出发 - 几种新增控件(2)

本篇我们接着来介绍Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。

1. Flyout

 Flyout被称为浮出控件,能起到提示或者简单交互作用。我们可以利用它来要求用户确认操作、收集用户输入信息或显示提示信息等。只有当用户点击时才显示Flyout,当点击外部任意点时,Flyout消失。

Flyout通常会附加到Button上,所以Button拥有Flyout属性来简化附加和使用的过程。

            <Button Content="Delete it">
                <Button.Flyout>
                    <Flyout>
                        <StackPanel>
                            <TextBlock>This item will be deleted. Do you want to continue ?</TextBlock>
                            <Button Click="DeleteConfirmation_Click">Yes, delete it.</Button>
                        </StackPanel>
                    </Flyout>
                </Button.Flyout>
            </Button>

如上图所示,我们为Button附加了Flyout控件,当Button点击时,Flyout出现。当点击外部任意点时,Flyout消失。当然其他控件也能使用Flyout控件,这就需要使用FlyoutBase.AttachedFlyout附加属性。这时我们必须响应控件的交互操作,并在代码中控制打开Flyout。

            <TextBlock Text="Tap me to show flyout." Tapped="TextBlock_Tapped" FontSize="20">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBlock FontSize="18" Text="You can do something..."/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </TextBlock>

下面是TextBlock的Tapped事件处理

        private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
        {
            TextBlock tb = sender as TextBlock;
            if (tb != null)
            {
                FlyoutBase.ShowAttachedFlyout(tb);
            }
        }

2. MenuFlyout

 MenuFlyout被称为菜单浮出控件,能够浮出显示菜单。大家看名字就能猜出,MenuFlyout 和 Flyout的用法很相似,可参照我们刚刚介绍的Flyout例子。而不同就在于MenuFlyout可以通过MenuFlyoutItem、ToggleMenuFlyoutItem 和 MenuFlyoutSeparator轻松定义菜单内容。

  • MenuFlyoutItem —— 执行即时操作
  • ToggleMenuFlyoutItem —— 打开或关闭选项
  • MenuFlyoutSeparator —— 菜单项之间的分隔符

我们下面以Button为例来演示MenuFlyout的用法

            <Button Content="Text Format">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
                        <MenuFlyoutSeparator/>
                        <ToggleMenuFlyoutItem Text="TextWrap" IsChecked="True"/>
                        <ToggleMenuFlyoutItem Text="TextTrim" IsChecked="False"/>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>

3. SettingsFlyout

 SettingsFlyout被称为设置浮出控件,利用它我们可以更轻松的创建应用设置的浮出控件。用户可以通过“设置”超级按钮来访问设置浮出控件,或触发我们定义的事件来访问。下面我们来演示如何通过触发事件的方式来访问SettingsFlyout。

首先,新建一个SettingsFlyout控件,步骤是:添加新建项 -> 在对话框中,选择““设置”浮出控件” -> 设置名称为 AutoplaySettingsFlyout。

<SettingsFlyout
    x:Class="HelloWorld.AutoplaySettingsFlyout"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="Autoplay"
    d:DesignWidth="346" Width="346">

    <!-- 此 StackPanel 充当内容部分的垂直布局的根面板-->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
        <!-- 下列 StackPanel 定义个别内容部分-->
        <!-- 第 1 部分内容-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">
            <!-- 第 1 部分标题-->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="Automatic plays" />
            <!-- 第 1 部分正文-->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic playing on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="play automatically" />
        </StackPanel>
        <!-- 根据需要在下面定义更多内容部分-->
    </StackPanel>
</SettingsFlyout>

如上面代码和效果图所示,SettingsFlyout控件可以调整宽度和背景色,但高度一般是应用的高度。头部中包括了标题,回退按钮和应用图标。内容部分采用的是StackPanel流式布局。下面我们看看怎么把它添加到“设置”的窗体中。

        public MainPage()
        {
            this.InitializeComponent();
            Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
        }

        void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
        {
            Windows.UI.ApplicationSettings.SettingsCommand updateSetting =
                new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "Auto Play", (handler) =>
                {
                    AutoplaySettingsFlyout autoplayFlyout = new AutoplaySettingsFlyout();
                    autoplayFlyout.Show();

                });

            args.Request.ApplicationCommands.Add(updateSetting);
        }

这样我们就把SettingsFlyout控件添加到“设置”中了,名字是'Auto Play',下面我们看看怎么通过按钮点击的方式来访问它。

        <Button Content="App update settings" Click="AutoplaySettingsButton_Click"/>
        private void AutoplaySettingsButton_Click(object sender, RoutedEventArgs e)
        {
            AutoplaySettingsFlyout autoplayFlyout = new AutoplaySettingsFlyout();
            autoplayFlyout.Show();
        }

通过按钮点击事件,我们调用了SettingsFlyout控件的Show方法,这样控件就可以访问了。当控件中的回退按钮点击后,浮出控件关闭并重新打开设置窗体。

如果我们调用的是ShowIndependent方法,回退按钮点击后,浮出控件关闭并回到应用中。同时我们也可以通过调用控件的Hide方法来关闭浮出控件,效果和回退按钮点击类似。

需要注意的是,一次只能显示一个浮出控件,调用Show/ShowIndependent 方法显示会关闭当前其他浮出控件。

4. Hub

中心控件,帮助我们更好的实现“中心”设计模式,中心页是用户进入应用的入口点,比如说应用商城。用户进入应用商城后,看到的类别分类就是中心的实现,它可以在横向或纵向的滚动视图中显示丰富而有序的内容。 

Hub的Header属性可以设置中心的标题,可以设置Header或HeaderTemplate来实现。

Hub可以分区显示,通过将不同的内容放入不同的HubSection来实现。HubSection也可以设置标题,做法与Hub一致。如果HubSection的IsHeaderInteractive属性为true,那么标题默认包含 '>' 字型,以及悬停和按下状态。我们来看看代码实现

        <Hub Header="Movies">
            <HubSection MinWidth="600" Header="Latest">
                <DataTemplate>
                    <Grid>
                        <TextBlock Text="The most recent movies will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
                    </Grid>
                </DataTemplate>
            </HubSection>

            <HubSection Header="Comedy" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Comedy movies goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                        <TextBlock Text="Click the header to go to the Comedy page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </HubSection>

            <HubSection Header="Action" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Action movies goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                        <TextBlock Text="Click the header to go to the Action movies." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
                    </StackPanel>
                </DataTemplate>
            </HubSection>
        </Hub>

5. Hyperlink

超链接,我们可以把它添加到文本上,它和文本具有相同的处理方式,换行、截断等。当文本被标记为超链接后,文本会显示为特定的颜色,点击文本会转到指定的URI,这个URI由NavigateUri属性来指定。

            <RichTextBlock Width="400" FontSize="20">
                <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
                    <Hyperlink NavigateUri="http://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
                    ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
                </Paragraph>
            </RichTextBlock>

如上图所示,紫色文字部分为超链接,点击后会跳转到我们指定的NavigateUri。

这样我们就把Windows 8.1 的新增控件介绍完了,希望对大家有所帮助,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

对asp.net响应事件的试验

1、可否把bind独立出来,在page_load中只是初次时bind,以后都在具体事件的处理中bind    实验:        page_load中,只作d...

22980
来自专栏iOS开发随笔

iOS类似淘宝头条的文字滚动广告

最近两个项目都用到类似淘宝头条的功能,就是文字上下无限循环滚动,所以决定简单封装一下,以便以后使用。由于习惯用SDCycleScrollView来做广告图的无限...

72330
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native按钮详解|Touchable系列组件使用详解

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 在做App开发过程中离不了的需要用户交互,说到交互,...

62670
来自专栏一个会写诗的程序员的博客

Vue.js 极简教程jsfiddle Hello World 例子:参考资料:

https://jsfiddle.net/chrisvfritz/50wL7mdz/

23410
来自专栏韩东吉的Unity杂货铺

零基础入门 23: UGUI ScrollView

今天要分享的内容,是近期内关于UGUI的最后一篇,UGUI里的滚动视图ScrollView,后期的内容会根据项目实用的功能组件进行分享。

64310
来自专栏张戈的专栏

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个...

48850
来自专栏DeveWork

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web...

24150
来自专栏非著名程序员

基础篇章:关于 React Native 之 Touchable 系列组件的讲解

? 提示:前天文章,重发,不想看的请略过,上次失误忘了加效果图 (友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经...

23190
来自专栏Java帮帮-微信公众号-技术文章全总结

HTML5 — header

最近,越来越多的人 HTML5 感兴趣,并开始广泛的使用其中的新元素,其中有一个就是 <header> 元素。 下面我们来谈谈什么时候能用它,什么时候不能用它,...

41070
来自专栏子勰随笔

Markdown格式优化及使用技巧

77970

扫码关注云+社区

领取腾讯云代金券