Telerik UI for Windows Phone by Progress

This topic introduces and explains every property of RadContextMenu and provides working code and xaml examples.

The IsOpen property

IsOpen, as the property name suggests, opens or closes RadContextMenu and can be used to manipulate RadContextMenu programmatically. It is a dependency property and can be set both through code and XAML. Here is an example that opens RadContextMenu on button click:

CopyXAML
<Button VerticalAlignment="Center"
        Content="open menu"
        Click="Button_Click"/>
CopyC#
public partial class MainPage : PhoneApplicationPage
{
    RadContextMenu menu = new RadContextMenu();

    public MainPage()
    {
        InitializeComponent();
        menu.Items.Add(new RadContextMenuItem() { Content = "Item 1" });
        menu.Items.Add(new RadContextMenuItem() { Content = "Item 2" });
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        menu.IsOpen = true;
    }
}

The OpenGesture property

The open gesture property gives the user choice to open RadContextMenu on tap or on hold. The default value is hold. Here is how you can set RadContextMenu to open on tap.

CopyXAML
<telerikPrimitives:RadContextMenu OpenGesture="Tap">
    <telerikPrimitives:RadContextMenuItem Content="Item 1"/>
    <telerikPrimitives:RadContextMenuItem Content="Item 2"/>
    <telerikPrimitives:RadContextMenuItem Content="Item 3"/>
</telerikPrimitives:RadContextMenu>

The OpenAnimation property

The OpenAnimation property allows users to set an arbitrary animation that will be used when RadContextMenu opens. Here is an example of how to set a simple fade animation as the OpenAnimation of RadContextMenu:

CopyXAML
<Rectangle Width="200"
           Height="200"
           Fill="{StaticResource PhoneForegroundBrush}">
    <telerikPrimitives:RadContextMenu.ContextMenu>
        <telerikPrimitives:RadContextMenu OpenGesture="Tap">
            <telerikPrimitives:RadContextMenuItem Content="Item 1"/>
            <telerikPrimitives:RadContextMenuItem Content="Item 2"/>
            <telerikPrimitives:RadContextMenuItem Content="Item 3"/>

            <telerikPrimitives:RadContextMenu.OpenAnimation>
                <telerikCore:RadFadeAnimation/>
            </telerikPrimitives:RadContextMenu.OpenAnimation>
        </telerikPrimitives:RadContextMenu>
    </telerikPrimitives:RadContextMenu.ContextMenu>
</Rectangle>

The RegionOfInterest property

The region of interest is a rectangle in page coordinates. RadContextMenu tries to position itself outside this region is possible. If this property is null the layout slot of the associated element is used so that the menu does not overlap it. Below is an example of setting an arbitrary region of interest:

CopyXAML
<Button Click="Button_Click"
        Content="open menu"
        VerticalAlignment="Bottom"/>
CopyC#
public partial class MainPage : PhoneApplicationPage
{
    RadContextMenu menu = new RadContextMenu();

    public MainPage()
    {
        InitializeComponent();
        menu.Items.Add(new RadContextMenuItem() { Content = "Item 1" });
        menu.Items.Add(new RadContextMenuItem() { Content = "Item 2" });

        menu.RegionOfInterest = new Rect(0, 200, 480, 100);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        menu.IsOpen = true;
    }
}

The Offset property

The offset property is used in concert with the RegionOfInterest property. The value of Offset is added to the final location of RadContextMenu after RegionOfInterest has been taken into account. Using the Offset property is trivial:

CopyXAML
<Rectangle Width="200"
           Height="200"
           Fill="{StaticResource PhoneForegroundBrush}">
    <telerikPrimitives:RadContextMenu.ContextMenu>
        <telerikPrimitives:RadContextMenu Offset="50">
            <telerikPrimitives:RadContextMenuItem Content="Item 1"/>
            <telerikPrimitives:RadContextMenuItem Content="Item 2"/>
        </telerikPrimitives:RadContextMenu>
    </telerikPrimitives:RadContextMenu.ContextMenu>
</Rectangle>

The IsZoomEnabled property

The IsZoomEnabled property turns on or off the effect that shrinks the application and leaves associated element unzoomed so that it is clear with which element the contex menu is associated. It is a simple boolean property. Below are two screenshots that demonstrate how the context menu looks when this property is false and when it is true.

The IsFadeEnabled property

IsFadeEnabled is only taken into consideration if IsZoomEnabled is true. IsFadeEnabled dims the background to make the associated menu element appear as if it is focused.

The FocusedElement property

FocusedElement is an attached property that is used to determine which element in the element tree under the menu will be focused. If this property is null for a particular object the object itself will be the focused element. The above explanation is a little abstract so consider this example: There is a listbox on a page and you want to display context menu for each item. If this list box is not bound to data you have to declare the same context menu for every item (duplication of xaml - bad!). On the other hand, if the list box is in bound mode, you don't even have a way to specify the menu for the items. The solution it seems is to associate a RadContextMenu with the list box itself. But then another problem emerges. How do you tell the context menu to open only for the items, if the list box is empty you may not want the menu to open. Also when the menu opens and you want to modify the data of the list box item how do you know which list box item is associated with the menu, the menu is currently set on the list box itself. And here is where the FocusedElement property is used. It accepts a Type object that is used to find an appropriate UIElement from the originator of the open gesture up the parent chain. For example FocusedElement is set on RadDataBoundListBox to typeof(RadDataBoundListBoxItem). This way the menu knows which item in the list box it is associated with. The currently focused object can easily be retrieved manually with the GetElementUnderMenu() method of RadContextMenu. Below is an example of how to tell RadContextMenu that it should focus on individual items on a standard list box and that it should not open if the list box is empty.

CopyXAML
<Grid x:Name="LayoutRoot">
    <ListBox x:Name="listBox">
        <telerikPrimitives:RadContextMenu.ContextMenu>
            <telerikPrimitives:RadContextMenu OpenGesture="Tap"
                                              x:Name="menu"
                                              Opening="OnMenuOpening">
                <telerikPrimitives:RadContextMenuItem Content="delete"/>
                <telerikPrimitives:RadContextMenuItem Content="update"/>
            </telerikPrimitives:RadContextMenu>
        </telerikPrimitives:RadContextMenu.ContextMenu>
    </ListBox>
</Grid>
CopyC#
public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();
        this.listBox.ItemsSource = this.Generatedata();

        RadContextMenu.SetFocusedElementType(this.listBox, typeof(ListBoxItem));
    }

    IEnumerable Generatedata()
    {
        for (int i = 0; i < 100; ++i)
        {
            yield return "DataItem " + (i + 1).ToString();
        }
    }

    private void OnMenuOpening(object sender, ContextMenuOpeningEventArgs e)
    {
        ListBoxItem focusedItem = e.FocusedElement as ListBoxItem;
        if (focusedItem == null)
        {
            // We don't want to open the menu if the focused element is not a list box item.
            // If the list box is empty focusedItem will be null.
            e.Cancel = true;
            return;
        }
    }
}