zoukankan      html  css  js  c++  java
  • Windows 8.1 新增控件之 MenuFlyout

    开始这篇讲解前,我们先来温习一下Flyout 的内容,当触发应用中某个Button 时会有Flyout 出现提示用户该操作接下来将会发生什么。Flyout 简单来说就是一个轻量级信息提示需要用户确认或忽略。再回来看MenuFlyout 呢,你肯定发现就是多了一个“Menu”,没错MenuFlyout 就是为开发者增加了一个菜单控制功能。

    MenuFlyout 也同样是一个轻量级控件,可以在Flyout 中添加一些简单的控制和设置功能。其中包含:MenuFlyoutItem、ToggleMenuFlyoutItem、MenuFlyoutSeparator 三种对象。官方解释如下:

    · MenuFlyoutItem — Performing an immediate action.

    · ToggleMenuFlyoutItem — Switching an option on or off.

    · MenuFlyoutSeparator — Visually separating menu items.

    以音乐播放器为例简单解释,MenuFlyoutItem 是用来进行一些即时控制操作,例如:停止、重置。ToggleMenuFlyoutItem 可进行选择性控制,例如:随机、重复。MenuFlyoutSeparator 当然是对象之间的分隔线。如下代码示例:

    XAML代码:

    <TextBlock x:Name="txtBlockCtl" FontSize="20" Foreground="Red"/>
    <Button Content="Music Options" Margin="0,10">
        <Button.Flyout>
            <MenuFlyout>
                <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
                <MenuFlyoutSeparator/>
                <ToggleMenuFlyoutItem Text="Shuffle" IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
                <ToggleMenuFlyoutItem Text="Repeat" IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
            </MenuFlyout>
        </Button.Flyout>
    </Button>

    C#代码:

    private void Reset_Click(object sender, RoutedEventArgs e)
    {
        txtBlockCtl.Text = "You have clicked the Reset Button.";
    }

    image

    点击Reset:

    image

    与Flyout 控件相同,也可以通过FlyoutBase.AttachedFlyout 属性将MenuFlyout 挂到任何FrameworkElement,具体方法可参考Flyout 篇

  • 相关阅读:
    Flutter 布局类组件:简介
    Flutter 基础组件:进度指示器
    Flutter 基础组件:单选框和复选框
    Flutter 基础组件:图片和Icon
    Flutter 基础组件:按钮
    Flutter 基础组件:文本、字体样式
    Flutter 基础组件:状态管理
    Flutter 基础组件:Widget简介
    网络编程之TCP
    入门多线程
  • 原文地址:https://www.cnblogs.com/gnielee/p/windows8-1-for-developers-menuflyout.html
Copyright © 2011-2022 走看看