[Windows 8 App]捷徑菜單

2013-12-18

在Windows 應用商店時，可以為介面中的介面元素新增捷徑菜單，並設置相關的菜單項。

下面通過一個範例來介紹如何為頁面中的圖片新增捷徑菜單

並在捷徑菜單中設置"複製"和"儲存為"菜單項

首先，新增一個Windows 市集的空白應用程式，並命名為【ShortcutMenuSetting】

放一張圖片在Assets資料夾下，圖片名稱命名為【cat.jpg】

接著，開啟【MainPage.xaml】，在Grid設計畫面中新增一個Image元素

Image元素名稱為【ShowImage】

將Image元素的Source屬性設置圖片路徑

並在事件中觸發Tapped的事件處理方法

完成Image元素的設定後，在拉進一個TextBlock文字方塊用來顯示訊息，並命名為Output

這是【MainPage.xaml】完整程式碼


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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="Output" Height="144" Width="539" FontSize="60" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="426,539,0,0" />
        <Image x:Name="ShowImage" Source="image/cat.jpg" Margin="426,0,0,0" Tapped="ShowImage_Tapped" HorizontalAlignment="Left" VerticalAlignment="Top" Height="406" Width="539"/>
    </Grid>
</Page>

打開【MainPage.xaml.cs】

首先，先寫Tapped事件的程式碼，程式碼如下：


private async void ShowImage_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var popupMenu = new PopupMenu();

            UICommand CopyCommand = new UICommand("複製", (command) =>
            {
                Output.Text = "已選擇＂" + command.Label + "’";
            });
            popupMenu.Commands.Add(CopyCommand);

            UICommand SaveCommand = new UICommand("另存新黨", (command) =>
            {
                Output.Text = "已選擇＂" + command.Label + "’";
            });
            popupMenu.Commands.Add(SaveCommand);

            await popupMenu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
        }

在上面的程式碼中，首先定義一個PopupMenu類別的對象popupMenu

接下來為捷徑菜單新增菜單項目，由於新增項目的方式相同

所以我們以新增"複製"來作範例介紹UICommand類別

UICommand類別的對象CopyUICommand，設定構造方法的第一個參數為"複製"

第二個參數為在選擇菜單項後調整的處理方法

接著，以CopyUICommand對象為參數調整popupMenu對象的UICommand.Add方法

將"複製"菜單項目新增到捷徑菜單，以同樣的方式來新增"另存為"

接下來定義捷徑菜單的大小與顯示位置


public Rect GetElementRect(FrameworkElement element)
        {
            GeneralTransform buttonTransform = element.TransformToVisual(null);
            Point point = buttonTransform.TransformPoint(new Point());
            Size size = new Size(element.ActualWidth, element.ActualHeight);

            return new Rect(point, size);
        }

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


using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 空白頁項目範本已記錄在 http://go.microsoft.com/fwlink/?LinkId=234238

namespace ShortcutMenuSetting
{
    /// <summary>
    /// 可以在本身使用或巡覽至框架內的空白頁面。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此頁面即將顯示在框架中時叫用。
        /// </summary>
        /// <param name="e">描述如何到達此頁面的事件資料。Parameter
        /// 屬性通常用來設定頁面。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private async void ShowImage_Tapped(object sender, TappedRoutedEventArgs e)
        {
            var popupMenu = new PopupMenu();

            UICommand CopyCommand = new UICommand("複製", (command) =>
            {
                Output.Text = "已選擇＂" + command.Label + "’";
            });
            popupMenu.Commands.Add(CopyCommand);

            UICommand SaveCommand = new UICommand("另存新黨", (command) =>
            {
                Output.Text = "已選擇＂" + command.Label + "’";
            });
            popupMenu.Commands.Add(SaveCommand);

            await popupMenu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
        }

        public Rect GetElementRect(FrameworkElement element)
        {
            GeneralTransform buttonTransform = element.TransformToVisual(null);
            Point point = buttonTransform.TransformPoint(new Point());
            Size size = new Size(element.ActualWidth, element.ActualHeight);

            return new Rect(point, size);
        }
    }
}

完成後，我們可以來看專案的執行畫面

這是一張圖片，對著圖片點擊滑鼠左鍵，就會跳出捷徑菜單

捷徑菜單就跳出來了!!

我們接下來對著捷徑菜單點擊複製

點擊複製後產生的結果

那我們點擊另存新黨的結果會是如何呢

點擊另存新黨的結果如下

回首頁