Context menu in the header area of the RadTabControl

[Priya]

I would like to pop-up a RadContextMenu upon right clicking anywhere in the header area of the TabControl (anywhere in the green area).

Attaching the Context menu as shown below pops up the menu everywhere including the body(ie: red area), which is not desired. I only want the menu to popup in the header area (when clicking on the tabitem headers or in the blank area after the tabitems)

     <telerik:RadTabControl     x:Name="radTabCtrl"
                                   Grid.Row="1"
                                   Margin="20,10,5,5"
                                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                   TabStripPlacement="Left" Align="Right"
                                   DataContext="{Binding Itemss}"
                                   ItemsSource="{Binding}"
                                   PreviewTabClosed="PreviewTabClosed">
            <telerik:RadContextMenu.ContextMenu>
                <telerik:RadContextMenu x:Name="tabCtrlContextMenu" Opening="TabCtrlContextMenu_Opening">
                    <telerik:RadMenuItem Header="Add" Click="Menu_Add_Click"/>
                </telerik:RadContextMenu>
            </telerik:RadContextMenu.ContextMenu>

 </telerik:RadTabControl>

 

Your help is much appreciated.

[Stenly]

Hello Priya,

To achieve the desired result, you could subscribe to the Loaded event of the RadTabControl element. In it, using the ChildrenOfType extension method, retrieve the ScrollViewer control with x:Name="ScrollViewerElement". After that, via the RadContextMenu.SetContextMenu static method, you could set a RadContextMenu instance to the returned ScrollViewer element.

The following code snippets show this logic's implementation:

<Grid x:Name="gridLayout">
    <Grid.Resources>
        <telerik:RadContextMenu x:Key="RadContextMenu">
            <telerik:RadMenuItem Header="Add"/>
        </telerik:RadContextMenu>
    </Grid.Resources>
    <telerik:RadTabControl Name="tabControl" Loaded="RadTabControl_Loaded">
        <telerik:RadTabControl.Items>
            <telerik:RadTabItem Header="Link 1"/>
            <telerik:RadTabItem Header="Link 2"/>
            <telerik:RadTabItem Header="Link 3"/>
        </telerik:RadTabControl.Items>
    </telerik:RadTabControl>
</Grid>

private void RadTabControl_Loaded(object sender, RoutedEventArgs e)
{
    var scrollViewer = ((RadTabControl)sender)
        .ChildrenOfType<ScrollViewer>()
        .FirstOrDefault(x => x.Name == "ScrollViewerElement");

    if (scrollViewer != null)
    {
        var contextMenu = this.gridLayout.Resources["RadContextMenu"] as RadContextMenu;

        RadContextMenu.SetContextMenu(scrollViewer, contextMenu);
    }
}

With that said, I have attached a sample application, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[Priya]

Hi Stenly,

That worked great. Thank you.