[Windows 8 App]Windows 8.1新的控制項和功能------MenuFlyout

2013-12-09

Windows 8 升級至 Windows 8.1有一些新個控制項或是功能的新增

這裡我們介紹【MenuFlyout】

MenuFlyout的原理和Flyout的原理是大同小異的

一樣是飛出視窗，輕量型的UI

操作也是一樣點一下視窗外的地方，就能簡單的關閉

差別在於MenuFlyout是有選單式的

我們透過範例來介紹【MenuFlyout】

首先，我們新增一個專案【MenuFlyout】，開啟【MainPage.xaml】

【MainPage.xaml】完整的程式碼：

<Page
    x:Class="MenuFlyout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MenuFlyout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
        <Button Content="選  項" Margin="523,480,0,171" Height="117" Width="324" FontSize="60">
            <Button.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="清  除" FontSize="55"/>
                    <MenuFlyoutSeparator/>
                    <ToggleMenuFlyoutItem Text="男  生" FontSize="55"/>
                    <ToggleMenuFlyoutItem Text="女  生" FontSize="55"/>
                </MenuFlyout>
            </Button.Flyout>
        </Button>
    </Grid>
</Page>

我們在Grid元素裡面放置一顆按鈕Button

在MenuFlyout中

MenuFlyoutItem的用途是【執行立即的動作】

ToggleMenuFlyoutItem的用途是【開啟或關閉選項】

MenuFlyoutSeparator的用途是【分隔功能表項目】

【MenuFlyout】的執行畫面：

這尚未點擊選項的畫面

點擊選項後的畫面

可以看到【清除】下面有一條分隔線

那是【MenuFlyoutSeparator】

回首頁