IT工程師數位筆記本

開始這篇講解前，我們先來溫習一下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.";
}

點擊Reset：

與Flyout 控件相同，也可以通過FlyoutBase.AttachedFlyout 屬性將MenuFlyout 掛到任何FrameworkElement，具體方法可參考Flyout 篇。