How to add a right click context menu on a TextBox in Silverlight and also support simple editing commands, like Cut, Copy and Paste? This is pretty easy with RadContextMenu for Silverlight and I will show you now:

contextmenuontextbox

First I declared a TextBox and set the RadContextMenu.ContextMenu attached property on it:

<TextBox x:Name="TextContainer" AcceptsReturn="True" TextWrapping="Wrap" Text="Right click to open a fully functional context menu that depends on the selection and the clipboard content">
   <telerikNavigation:RadContextMenu.ContextMenu>
       <telerikNavigation:RadContextMenu ItemClick="ContextMenuClick" Opened="ContextMenuOpened" Closed="ContextMenuClosed">
            <
telerikNavigation:RadMenuItem Header="Cut" />
            <
telerikNavigation:RadMenuItem Header="Copy" />
            <
telerikNavigation:RadMenuItem Header="Paste" />
        </
telerikNavigation:RadContextMenu>
    </
telerikNavigation:RadContextMenu.ContextMenu>
</TextBox>

 

If you want to open the context menu with Right click, you need to make the Silverlight plug-in windowless. Otherwise, you should set the EventName and/or ModifierKey properties on RadContextMenu to configure it according your needs. This is enough to show the context menu.

In order to provide decent keyboard navigation, RadContextMenu “steals” the focus when it is opened. When it is closed, it does not automatically return the focus, so I need to return it:

private void ContextMenuClosed(object sender, System.Windows.RoutedEventArgs e)
{
    this.TextContainer.Focus();
}

 

I also want to disable the Cut and Copy items when there is no selection in the TextBox. To do so I check the TextBox selection in the RadContextMenu.Opened event and then set the menu items accordingly:

private void ContextMenuOpened(object sender, System.Windows.RoutedEventArgs e)
{
    // Customize the context menu depending on the selection and the clipboard
    RadContextMenu menu = sender as RadContextMenu;

    bool hasSelection = this.TextContainer.SelectionLength > 0;

    (menu.Items[0] as RadMenuItem).IsEnabled = hasSelection; // Cut
    (menu.Items[1] as RadMenuItem).IsEnabled = hasSelection; // Copy
    bool hasClipboardContent = !string.IsNullOrEmpty(Clipboard.Paste());

    (menu.Items[2] as RadMenuItem).IsEnabled = hasClipboardContent; // Paste
}

 

The Clipboard class contains a few static methods for browser clipboard manipulation. It is not cross-browser, so you may expect it to work only in IE, which in my opinion is fine for the purpose of this demo. You can see what’s inside if you open the attached source code.

The last thing I need to do is to handle the ItemClick event of RadContextMenu, and execute the text operations:

private void ContextMenuClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
    switch ((string)(e.OriginalSource as RadMenuItem).Header)
    {
        case "Cut":
            this.TextContainer.Cut();
            break;
        case "Copy":
            this.TextContainer.Copy();
            break;
        case "Paste":
            this.TextContainer.Paste();
            break;
    }
}

 

The Cut, Copy and Paste are simple extension methods, that use the Clipboard class and persist the cursor position in order to provide consistent selection behavior. They are declared in TextBoxExtensions class, that can be found in the attached source code:


About the Author

Valeri Hristov

Team Lead,
Platform Team

Related Posts

Comments