图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单

  我们紧接着上篇,这篇将介绍如何使用Windows.UI.Popups API,创建PopupMenu菜单
和处理oncontextmenu事件.
-----------------------------------我是华丽的分割线-----------------------------------------
我们紧接着上篇,这篇将介绍如何使用Windows.UI.Popups API,创建PopupMenu菜单
和处理oncontextmenu事件.

本篇将介绍如下2个方面:
  a)为一个文件创建一个上下文菜单
  b)在显示文本中替换原来的上下文菜单

我们的创建的步骤如下:
  1)为了组织文件方便,我们先建一个文件夹ContextMenu
  2)向文件夹中添加如下文件:
    ShowAContextMenu.xaml,ReplaceADefaultContextMenu.xaml
  创建方法请参照前一篇.
3)此时的解决方案结构如下:

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第1张图片

4)向我们的DataSource添加导航所需要的信息
  修改我们的SampleDataSource.cs文件中的SampleDataSource类中的代码,
  代码如下: 

View Code
        public SampleDataSource()
        {
            #region Group1
            var group1 = new SampleDataGroup("FilePicker",
              "Use Windows.Storage.Pickers API",
              "Access and save files using the file picker",
              "Assets/FilePicker.jpg",
              "");
            group1.Items.Add(new SampleDataItem("FilePicker-PickASinglePhoto",
                    "Pick a single photo",
                    "only one file can selected,file type is jpg,jpeg,png",
                    "Assets/FilePicker.jpg",
                    "only one file can selected ",
                    "",
                    group1,
                    typeof(PickASinglePhoto)));
            group1.Items.Add(new SampleDataItem("FilePicker-PickMultipleFiles",
                    "Pick multiple files",
                    "you can pick multiple files",
                    "Assets/FilePicker.jpg",
                    "pick multiple files",
                    "",
                    group1,
                    typeof(PickMultipleFiles)));
            group1.Items.Add(new SampleDataItem("FilePicker-PickAFolder",
                    "Pick a folder",
                    "you can pick a folder",
                    "Assets/FilePicker.jpg",
                    "Pick a folder",
                    "",
                    group1,
                    typeof(PickAFolder)));
            group1.Items.Add(new SampleDataItem("FilePicker-SaveAFile",
                    "Save a file",
                    "you can save a file",
                    "Assets/FilePicker.jpg",
                    "Save a file",
                    "",
                    group1,
                    typeof(SaveAFile)));
            this.AllGroups.Add(group1);
            #endregion

            #region Group2
            var group2 = new SampleDataGroup("FileAceess",
           "Using Windows.Storage API",
           "File access",
           "Assets/FileAccess.jpg",
           "");
            group2.Items.Add(new SampleDataItem("FileAceess-CreatingAFile",
                    "Create a file",
                    "Using CreateFileAsync Create a file",
                    "Assets/FileAccess.jpg",
                    "Using CreateFileAsync",
                    "",
                    group2,
                    typeof(CreatingAFile)));

            group2.Items.Add(new SampleDataItem("FileAceess-WritingAndReadingText",
               "Write And Read A Text",
               "Using WriteTextAsync,ReadTextAsync Write And Read  Text",
               "Assets/FileAccess.jpg",
               "Using WriteTextAsync,ReadTextAsync",
               "",
               group2,
               typeof(WritingAndReadingText)));

            group2.Items.Add(new SampleDataItem("FileAceess-WritingAndReadingBytes",
              "Writing and reading bytes in a file",
              "Using WriteBufferAsync,ReadBufferAsync Write And Read bytes",
              "Assets/FileAccess.jpg",
              "Using WriteBufferAsync,ReadBufferAsync",
              "",
              group2,
              typeof(WritingAndReadingBytes)));

            group2.Items.Add(new SampleDataItem("FileAceess-WritingAndReadingUsingStream",
                "Writing and reading using a stream",
                "Using OpenAsync Writing and reading using a stream",
                "Assets/FileAccess.jpg",
                "Using OpenAsync",
                "",
                group2,
                typeof(WritingAndReadingUsingStream)));

            group2.Items.Add(new SampleDataItem("FileAceess-DisplayingFileProperties",
                "Displaying file properties",
                "Using GetBasicPropertiesAsync  Get File Properties",
                "Assets/FileAccess.jpg",
                "Using GetBasicPropertiesAsync",
                "",
                group2,
                typeof(DisplayingFileProperties)));

            group2.Items.Add(new SampleDataItem("FileAceess-PersistingAccess",
                "Persisting access to a storage item for future use",
                "Using MostRecentlyUsedList",
                "Assets/FileAccess.jpg",
                "Using MostRecentlyUsedList",
                "",
                group2,
                typeof(PersistingAccess)));

            group2.Items.Add(new SampleDataItem("FileAceess-CopyAFile",
                "Copy a file",
                "Using CopyAsync Copy a file",
                "Assets/FileAccess.jpg",
                "Using CopyAsync",
                "",
                group2,
                typeof(CopyAFile)));

            group2.Items.Add(new SampleDataItem("FileAceess-DeleteAFile",
                "Delete a file",
                "Using DeleteAsync Delete a file",
                "Assets/FileAccess.jpg",
                "Using DeleteAsync",
                "",
                group2,
                typeof(DeleteAFile)));

            this.AllGroups.Add(group2);
            #endregion

            #region Group3
            var group3 = new SampleDataGroup("AccountPictureName",
              "Use Windows.System.UserProfile API",
              "Account Picture Name",
              "Assets/AccountPictureName.jpg",
              "");
            group3.Items.Add(new SampleDataItem("AccountPictureName-GetUserDisplayName",
                    "Get User DisplayName",
                    "Use UserInformation.GetDisplayNameAsync Get User DisplayName",
                    "Assets/AccountPictureName.jpg",
                    "Use UserInformation.GetDisplayNameAsync",
                    "",
                    group3,
                    typeof(GetUserDisplayName)));
            group3.Items.Add(new SampleDataItem("AccountPictureName-GetUserFirstLastName",
                    "Get First Last Name",
                    "Use UserInformation.GetFirstNameAsync,GetLastNameAsync Get First Name",
                    "Assets/AccountPictureName.jpg",
                    "Use UserInformation.GetFirstNameAsync ",
                    "",
                    group3,
                    typeof(GetUserFirstLastName)));
            group3.Items.Add(new SampleDataItem("AccountPictureName-GetAccountPicture",
                    "Get Account Picture",
                    "Use UserInformation.GetAccountPicture Get Account Picture",
                    "Assets/AccountPictureName.jpg",
                    "Use UserInformation.GetAccountPicture",
                    "",
                    group3,
                    typeof(GetAccountPicture)));
            group3.Items.Add(new SampleDataItem("AccountPictureName-SetAccountPictureAndListen",
                    "Set AccountPicture And Listen",
                    "Use UserInformation.SetAccountPicturesAsync Set AccountPicture",
                    "Assets/AccountPictureName.jpg",
                    "Use UserInformation.SetAccountPicturesAsync",
                    "",
                    group3,
                    typeof(SetAccountPictureAndListen)));
            this.AllGroups.Add(group3);
            #endregion

            #region Group4
            var group4 = new SampleDataGroup("ApplicationSettings",
              "ApplicationSettings",
              " Use the Windows.UI.ApplicationSettings namespace and WinJS.UI.SettingsFlyout",
              "Assets/ApplicationSettings.jpg",
              "");
            group4.Items.Add(new SampleDataItem("ApplicationSettings-Default",
                    "Default behavior with no settings integration",
                    "Default behavior ",
                    "Assets/ApplicationSettings.jpg",
                    "Default behavior with no settings integration",
                    "",
                    group4,
                    typeof(Default)));
            group4.Items.Add(new SampleDataItem("ApplicationSettings-AddSettings",
                    "Add settings commands to the settings charm",
                    "Add settings",
                    "Assets/ApplicationSettings.jpg",
                    "Add settings commands to the settings charm ",
                    "",
                    group4,
                    typeof(AddSettings)));

            this.AllGroups.Add(group4);
            #endregion

            #region Group5
            var Group5 = new SampleDataGroup("AssociationLaunching",
              "Use Windows.System.Launcher API",
              "Association Launching",
              "Assets/AssociationLaunching.jpg",
              "");
            Group5.Items.Add(new SampleDataItem("AssociationLaunching-LaunchFile",
                    "Launching a file",
                    "Use Windows.System.Launcher.LaunchFileAsync",
                    "Assets/AssociationLaunching.jpg",
                    "Use Windows.System.Launcher.LaunchFileAsync",
                    "",
                    Group5,
                    typeof(LaunchFile)));
            Group5.Items.Add(new SampleDataItem("AssociationLaunching-LaunchUri",
                    "Launching a URI",
                    "Use Windows.System.Launcher.LaunchUriAsync",
                    "Assets/AssociationLaunching.jpg",
                    "Use Windows.System.Launcher.LaunchUriAsync",
                    "",
                    Group5,
                    typeof(LaunchUri)));
            Group5.Items.Add(new SampleDataItem("AssociationLaunching-ReceiveFile",
                    "Receiving a file",
                    "Receiving a file",
                    "Assets/AssociationLaunching.jpg",
                    "Receiving a file",
                    "",
                    Group5,
                    typeof(ReceiveFile)));
            Group5.Items.Add(new SampleDataItem("AssociationLaunching-ReceiveUri",
                    "Receiving a URI",
                    "Receiving a URI",
                    "Assets/AssociationLaunching.jpg",
                    "Receiving a URI",
                    "",
                    Group5,
                    typeof(ReceiveUri)));
            this.AllGroups.Add(Group5);
            #endregion

            #region Group6
            var Group6 = new SampleDataGroup("BackgroundTransfer",
              "Use Windows.Networking.BackgroundTransfer API",
              "BackgroundDownloader And BackgroundUploader",
              "Assets/BackgroundTransfer.jpg",
              "");
            Group6.Items.Add(new SampleDataItem("BackgroundTransfer-DownloadFile",
                    "Download Files",
                    "Use BackgroundDownloader",
                    "Assets/BackgroundTransfer.jpg",
                    "BackgroundDownloader",
                    "",
                    Group6,
                    typeof(DownloadFile)));
            Group6.Items.Add(new SampleDataItem("BackgroundTransfer-UploadFile",
                    "Upload Files",
                    "Use BackgroundUploader",
                    "Assets/BackgroundTransfer.jpg",
                    "BackgroundUploader",
                    "",
                    Group6,
                    typeof(UploadFile)));

            this.AllGroups.Add(Group6);
            #endregion

            #region Group7
            var Group7 = new SampleDataGroup("Clipboard",
              "Use Windows.ApplicationModel.DataTransfer API",
              "ClipboardOperation",
              "Assets/Clipboard.jpg",
              "");
            Group7.Items.Add(new SampleDataItem("Clipboard-CopyAndPasteText",
                    "Copy and paste text",
                    "Use Clipboard.GetContent,Clipboard.SetContent",
                    "Assets/Clipboard.jpg",
                    "Clipboard.GetContent,Clipboard.SetContent",
                    "",
                    Group7,
                    typeof(CopyAndPasteText)));
            Group7.Items.Add(new SampleDataItem("Clipboard-CopyAndPasteImage",
                    "Copy and paste an image",
                    "Use Clipboard.GetContent,Clipboard.SetContent",
                    "Assets/Clipboard.jpg",
                    "Clipboard.GetContent,Clipboard.SetContent",
                    "",
                    Group7,
                    typeof(CopyAndPasteImage)));
            Group7.Items.Add(new SampleDataItem("Clipboard-CopyAndPasteFile",
                    "Copy and paste files",
                    "Use Clipboard.GetContent,Clipboard.SetContent",
                    "Assets/Clipboard.jpg",
                    "Clipboard.GetContent,Clipboard.SetContent",
                    "",
                    Group7,
                    typeof(CopyAndPasteFile)));
            Group7.Items.Add(new SampleDataItem("Clipboard-OtherClipboardOperation",
                    "Other Clipboard operations",
                    "Use Clipboard.GetContent,Clipboard.SetContent",
                    "Assets/Clipboard.jpg",
                    "Clipboard.GetContent,Clipboard.SetContent",
                    "",
                    Group7,
                    typeof(OtherClipboardOperation)));

            this.AllGroups.Add(Group7);
            #endregion

            #region Group8
            var Group8 = new SampleDataGroup("Compression",
              "Use Windows.Storage.Compression API",
              "Compression And Decompression",
              "Assets/Compression.jpg",
              "");
            Group8.Items.Add(new SampleDataItem("Compression-CompressionAndDecompression",
                    "Compression And Decompression",
                    "Use Windows.Storage.Compression API",
                    "Assets/Compression.jpg",
                    "Compression And Decompression",
                    "",
                    Group8,
                    typeof(CompressionAndDecompression)));

            this.AllGroups.Add(Group8);
            #endregion

            #region Group9
            var Group9 = new SampleDataGroup("MediaButtons",
              "Use Windows.Media API",
              "Media Buttons",
              "Assets/MediaButtons.jpg",
              "");
            Group9.Items.Add(new SampleDataItem("MediaButtons-MediaEvents",
                    "Media Events",
                    "Use Windows.Media API",
                    "Assets/MediaButtons.jpg",
                    "Listening to hardware media transport events",
                    "",
                    Group9,
                    typeof(MediaEvents)));

            this.AllGroups.Add(Group9);
            #endregion

            #region Group10
            var Group10 = new SampleDataGroup("ContactPicker",
              "Use Windows.ApplicationModel.Contacts API",
              "Contact Picker",
              "Assets/ContactPicker.jpg",
              "");
            Group10.Items.Add(new SampleDataItem("ContactPicker-SinglePicker",
                    "Pick a single contact",
                    "Use ContactPicker.PickSingleContactAsync()",
                    "Assets/ContactPicker.jpg",
                    "PickSingleContactAsync",
                    "",
                    Group10,
                    typeof(SinglePicker)));
            Group10.Items.Add(new SampleDataItem("ContactPicker-MultiplePicker",
                    "Pick multiple contacts",
                    "Use ContactPicker.PickMultipleContactsAsync()",
                    "Assets/ContactPicker.jpg",
                    "PickMultipleContactsAsync",
                    "",
                    Group10,
                    typeof(MultiplePicker)));

            this.AllGroups.Add(Group10);
            #endregion

            #region Group11
            var Group11 = new SampleDataGroup("ContextMenu",
              "Use Windows.UI.Popups API",
              "Context Menu",
              "Assets/ContextMenu.jpg",
              "");
            Group11.Items.Add(new SampleDataItem("ContextMenu-ShowAContextMenu",
                    "Show a context menu",
                    "Show a context menu",
                    "Assets/ContextMenu.jpg",
                    "Show a context menu",
                    "",
                    Group11,
                    typeof(ShowAContextMenu)));
            Group11.Items.Add(new SampleDataItem("ContextMenu-ReplaceADefaultContextMenu",
                    "Replace a default context menu",
                    "Replace a default context menu",
                    "Assets/ContextMenu.jpg",
                    "Replace a default context menu",
                    "",
                    Group11,
                    typeof(ReplaceADefaultContextMenu)));

            this.AllGroups.Add(Group11);
            #endregion
        }

 

5)我们的导航这样就做好了,效果图:

  点击 ContextMenu

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第2张图片

6)为一个文件创建一个上下文菜单
  我们使用控件的RightTapped事件,来处理右击,然后在右击的位置创建一个PopupMenu,
  使用PopupMenu的ShowForSelectionAsync方法显示上下文菜单。
  修改ShowAContextMenu.xaml的xaml

View Code
   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Style="{StaticResource SubheaderTextStyle}" TextWrapping="Wrap">
                Right-click the image to show a simple context menu. Using touch, the press-and-hold gesture will also trigger the context menu.
            </TextBlock>
            <Image x:Name="AttachmentImage" Grid.Row="1" HorizontalAlignment="Left" Stretch="None" Source="../Assets/logo.jpg" />
        </Grid>

        <Grid x:Name="Output" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
            <TextBlock x:Name="OutputTextBlock" Style="{StaticResource SubheaderTextStyle}" TextWrapping="Wrap"/>
        </Grid>
    </Grid>

 

  修改后台代码:

View Code
    public sealed partial class ShowAContextMenu : Page
    {
        public ShowAContextMenu()
        {
            this.InitializeComponent();
            //注册右击事件
            AttachmentImage.RightTapped += new RightTappedEventHandler(AttachmentImage_RightTapped);
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        private async void AttachmentImage_RightTapped(object sender, RightTappedRoutedEventArgs e)
        {
            // Create a menu and add commands specifying a callback delegate for each.
            // Since command delegates are unique, no need to specify command Ids.
            var menu = new PopupMenu();
            menu.Commands.Add(new UICommand("Open with", (command) =>
            {
                OutputTextBlock.Text = "'" + command.Label + "' selected";
            }));
            menu.Commands.Add(new UICommand("Save attachment", (command) =>
            {
                OutputTextBlock.Text = "'" + command.Label + "' selected";
            }));

            // We don't want to obscure content, so pass in a rectangle representing the sender of the context menu event.
            // We registered command callbacks; no need to handle the menu completion event
            OutputTextBlock.Text = "Context menu shown";
            //显示上下文菜单
            var chosenCommand = await menu.ShowForSelectionAsync(GetElementRect((FrameworkElement)sender));
            if (chosenCommand == null) // The command is null if no command was invoked.
            {
                OutputTextBlock.Text = "Context menu dismissed";
            }
        }

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

 

  效果图

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第3张图片

  点击 Open with

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第4张图片

7)在显示文本中替换原来的上下文菜单
  我们使用控件的ContextMenuOpening事件,通过设置 e.Handled = true;来处理掉系统默认的
  上下文菜单,然后在右击的位置创建一个PopupMenu,
  使用PopupMenu的ShowForSelectionAsync方法显示上下文菜单。
  修改ReplaceADefaultContextMenu.xaml的xaml

View Code
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Style="{StaticResource SubheaderTextStyle}" TextWrapping="Wrap">
                Select and right-click or tap on the selection in the below text box to show a custom context menu for text.
            </TextBlock>
            <TextBox x:Name="ReadOnlyTextBox" Grid.Row="1" IsReadOnly="True" TextWrapping="Wrap" Text="http://www.cnblogs.com/refactor"/>
        </Grid>

        <Grid x:Name="Output" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top">
            <TextBlock x:Name="OutputTextBlock" Style="{StaticResource SubheaderTextStyle}" TextWrapping="Wrap"/>
        </Grid>

    </Grid>

 

  修改后台代码:

View Code
    public sealed partial class ReplaceADefaultContextMenu : Page
    {
        public ReplaceADefaultContextMenu()
        {
            this.InitializeComponent();
            //在系统处理显示上下文菜单交互时发生的时间
            ReadOnlyTextBox.ContextMenuOpening += new ContextMenuOpeningEventHandler(ReadOnlyTextBox_ContextMenuOpening);
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }

        // returns a rect for selected text
        // if selection is multiline then rect is unreliable
        // if no text is selected, returns caret location
        // textbox should not be empty
        private Rect GetTextboxSelectionRect(TextBox textbox)
        {
            Rect rectFirst, rectLast;
            if (textbox.SelectionStart == textbox.Text.Length)
            {
                rectFirst = textbox.GetRectFromCharacterIndex(textbox.SelectionStart - 1, true);
            }
            else
            {
                rectFirst = textbox.GetRectFromCharacterIndex(textbox.SelectionStart, false);
            }

            int lastIndex = textbox.SelectionStart + textbox.SelectionLength;
            if (lastIndex == textbox.Text.Length)
            {
                rectLast = textbox.GetRectFromCharacterIndex(lastIndex - 1, true);
            }
            else
            {
                rectLast = textbox.GetRectFromCharacterIndex(lastIndex, false);
            }

            GeneralTransform buttonTransform = textbox.TransformToVisual(null);
            Point point = buttonTransform.TransformPoint(new Point());

            return new Rect(point.X + rectFirst.Left,
                point.Y + rectFirst.Top,
                rectLast.Right - rectFirst.Left,
                rectLast.Bottom - rectFirst.Top);
        }

        private async void ReadOnlyTextBox_ContextMenuOpening(object sender, ContextMenuEventArgs e)
        {
            //将系统上下文菜单标记成已处理
            e.Handled = true;
            TextBox textbox = (TextBox)sender;
            if (textbox.SelectionLength > 0)
            {
                // Create a menu and add commands specifying an id value for each instead of a delegate.
                var menu = new PopupMenu();
                menu.Commands.Add(new UICommand("Copy", null, 1));
                menu.Commands.Add(new UICommandSeparator());
                menu.Commands.Add(new UICommand("Highlight", null, 2));
                menu.Commands.Add(new UICommand("Look up", null, 3));

                OutputTextBlock.Text = "Context menu shown";
                Rect rect = GetTextboxSelectionRect(textbox);
                //显示上下文菜单
                var chosenCommand = await menu.ShowForSelectionAsync(rect);
                if (chosenCommand != null)
                {
                    switch ((int)chosenCommand.Id)
                    {
                        case 1:
                            String selectedText = ((TextBox)sender).SelectedText;
                            var dataPackage = new DataPackage();
                            dataPackage.SetText(selectedText);
                            //Copy
                            Windows.ApplicationModel.DataTransfer.Clipboard.SetContent(dataPackage);
                            OutputTextBlock.Text = "'" + chosenCommand.Label + "'(" + chosenCommand.Id.ToString() + ") selected; '" + selectedText + "' copied to clipboard";
                            break;

                        case 2:
                            OutputTextBlock.Text = "'" + chosenCommand.Label + "'(" + chosenCommand.Id.ToString() + ") selected";
                            break;

                        case 3:
                            OutputTextBlock.Text = "'" + chosenCommand.Label + "'(" + chosenCommand.Id.ToString() + ") selected";
                            break;
                    }
                }
                else
                {
                    OutputTextBlock.Text = "Context menu dismissed";
                }
            }
            else
            {
                OutputTextBlock.Text = "Context menu not shown because there is no text selected";
            }
        }
    }

 

  效果图

 

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第5张图片

  点击Copy

图解使用Win8Api进行Metro风格的程序开发十二----上下文菜单_第6张图片


未完待续,敬请期待...
转载请注明出处:http://www.cnblogs.com/refactor/

你可能感兴趣的:(metro)