This is a migrated thread and some comments may be shown as answers.

ContextMenu trigger area

5 Answers 99 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

yjh asked on 10 Aug 2011, 04:52 AM

BMP.PNG

I have a treeview as below:

<telerik:RadTreeView BorderThickness="0" Margin="5,6,0,0"

IsLoadOnDemandEnabled="True" telerik:TextSearch.TextPath="CName"

ExpanderStyle="{StaticResource ExpanderStyle}" IsLineEnabled="True"

ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"

ItemsSource="{Binding Model.Menus}"

ItemTemplate="{StaticResource TreeViewItemTemplate}"

SelectedItem="{Binding SelectedNode, Mode=TwoWay}"/>

<telerik:HierarchicalDataTemplate x:Key="TreeViewItemTemplate"

ItemsSource="{Binding Children}"

telerik:ContainerBinding.ContainerBindings=

"{StaticResource BindingsCollection}"

<TextBlock Text="{Binding CName}"

<telerik:RadContextMenu.ContextMenu

<telerik:RadContextMenu

<telerik:RadMenuItem Header="MenuDetail"/

<telerik:RadMenuItem Header="AddChildMenu"

</telerik:RadContextMenu

</telerik:RadContextMenu.ContextMenu>

</TextBlock

</telerik:HierarchicalDataTemplate>

The problem is only mouse right click on TextBlock can trigger context menu, if click area in the treeviewnode but not in textblock, can't
trigger the context menu.

Yes, this is right behavior,but I want right click the the whole treeviewnode(as shown in attatch file, the color area)
to show context menu.It may be treeviewnode's item container,but I don't know how to do it using MVVM.

5 Answers, 1 is accepted

answered on 12 Aug 2011, 03:05 PM

Hi Yjh,

In your case the easiest way to implement the desired functionality is to set the RadTreeViewItems HorizontalContentAlignment property to Stretch. This will stretch the TextBlock through the RadTreeViewItem and you will be able to open the ContextMenu clicking anywhere on the item.

<Style TargetType="telerik:RadTreeViewItem" x:Key="RadTreeViewItemStyle">

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

</Style>

Give it a try and let us know f it works for you.

Regards,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

answered on 17 Aug 2011, 08:36 AM

TreeView.zip

Hello Yjh,

You can see how our suggestion work in the attached solution and let us know if we are missing something.
On the other hand, you can also define the ContextMenu in the RadTreeView like so:

<telerik:RadTreeView x:Name="tree" ItemTemplate="{StaticResource allleveltemplate}">

<telerik:RadContextMenu.ContextMenu>

<telerik:RadContextMenu HorizontalAlignment="Stretch">

<telerik:RadMenuItem Header="MenuDetail" />

<telerik:RadMenuItem Header="AddChildMenu" />

</telerik:RadContextMenu>

</telerik:RadContextMenu.ContextMenu>

</telerik:RadTreeView>

All the best,
Petar Mladenov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

answered on 18 Aug 2011, 11:10 AM

Thank you Tina Stancheva .

In your example,it works.But in my application, it is still not.

I'm apologize, I'm not point out that I using a ItemContainerStyle as below:

<telerik:Office_BlueTheme x:Key="Theme" />

<LinearGradientBrush x:Key="NavigationMouseoverFill" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFDFDF1" Offset="0" />

<GradientStop Color="#FFFDEDBD" Offset="1" />

<GradientStop Color="#FFFDF2CC" Offset="0.5" />

<GradientStop Color="#FFFDE6A5" Offset="0.51" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="NavigationMouseoverStroke" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFE8E0C2" Offset="0" />

<GradientStop Color="#FFE6E2D0" Offset="1" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="RadTreeViewSelectUnFocusFill" EndPoint="0,1">

<GradientStop Color="#FFf8f6f9" Offset="0" />

<GradientStop Color="#FFf0f0f0" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="RadTreeViewSelectUnFocus" Color="#FFdbdbdb" />

<LinearGradientBrush x:Key="NavigationSelectFill" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFFEFDF1" Offset="0" />

<GradientStop Color="#FFFEE699" Offset="1" />

<GradientStop Color="#FFFEEBAA" Offset="0.5" />

<GradientStop Color="#FFFED560" Offset="0.51" />

</LinearGradientBrush>

<LinearGradientBrush x:Key="NavigationSelectStroke" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFDBCF9C" Offset="0" />

<GradientStop Color="#FFD8D1B3" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="LineBrush" Color="#FFCCCCCC" />

<SolidColorBrush x:Key="FocusBrushBlack" Color="#FF000000" />

<ControlTemplate x:Key="TreeViewItemDefaultTemplate" TargetType="telerik:RadTreeViewItem">

<Grid x:Name="RootElement">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="EditStates">

<VisualState x:Name="Display" />

<VisualState x:Name="Edit">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="EditHeaderElement"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Header"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="DisabledVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Header"

Storyboard.TargetProperty="Opacity" To="0.35" />

<DoubleAnimation Duration="0:0:0.0" Storyboard.TargetName="Image"

Storyboard.TargetProperty="Opacity" To="0.35" />

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.1"

Storyboard.TargetName="MouseOverVisual"

Storyboard.TargetProperty="Opacity" To="0.9" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected" />

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="SelectionVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="SelectionUnfocusedVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="LoadingOnDemandStates">

<VisualState x:Name="LoadingOnDemand">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="LoadingVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="Expander"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:1" RepeatBehavior="Forever"

Storyboard.TargetName="LoadingVisualAngleTransform"

Storyboard.TargetProperty="Angle" From="0" To="359" />

</Storyboard>

</VisualState>

<VisualState x:Name="LoadingOnDemandReverse" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetName="FocusVisual"

Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<Grid x:Name="HeaderRow" MinHeight="{TemplateBinding MinHeight}"

Background="Transparent" HorizontalAlignment="Left">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Rectangle Fill="{TemplateBinding Background}"

Stroke="{TemplateBinding BorderBrush}"

StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="2"

RadiusY="2" Grid.Column="2" Grid.ColumnSpan="6" />

<Rectangle x:Name="MouseOverVisual"

Fill="{StaticResource NavigationMouseoverFill}"

Stroke="{StaticResource NavigationMouseoverStroke}" RadiusX="2"

RadiusY="2" Opacity="0" Grid.Column="2" Grid.ColumnSpan="6" />

<Rectangle x:Name="SelectionUnfocusedVisual"

Fill="{StaticResource RadTreeViewSelectUnFocusFill}"

Stroke="{StaticResource RadTreeViewSelectUnFocus}" RadiusX="2"

RadiusY="2" IsHitTestVisible="False" Visibility="Collapsed"

Grid.Column="2" Grid.ColumnSpan="6" />

<Rectangle x:Name="SelectionVisual" Fill="{StaticResource NavigationSelectFill}"

Stroke="{StaticResource NavigationSelectStroke}" RadiusX="2" RadiusY="2"

IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2"

Grid.ColumnSpan="6" />

<StackPanel x:Name="IndentContainer" Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine" Stroke="{StaticResource LineBrush}"

VerticalAlignment="Top" Width="1" Visibility="Collapsed">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000" />

</Rectangle.Clip>

</Rectangle>

</StackPanel>

<Grid x:Name="ListRootContainer" HorizontalAlignment="Center" MinWidth="20"

Grid.Column="1">

<Rectangle x:Name="HorizontalLine" Stroke="{StaticResource LineBrush}"

Height="1" HorizontalAlignment="Right" VerticalAlignment="Center">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,10000,1" />

</Rectangle.Clip>

</Rectangle>

<Rectangle x:Name="VerticalLine" Stroke="{StaticResource LineBrush}"

HorizontalAlignment="Center" VerticalAlignment="Top" Width="1">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000" />

</Rectangle.Clip>

</Rectangle>

<ToggleButton x:Name="Expander" Background="{TemplateBinding Background}"

IsTabStop="False" />

<Grid x:Name="LoadingVisual" HorizontalAlignment="Center"

VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5"

Visibility="Collapsed">

<Grid.RenderTransform>

<TransformGroup>

<RotateTransform x:Name="LoadingVisualAngleTransform" Angle="0"

CenterX="0.5" CenterY="0.5" />

</TransformGroup>

</Grid.RenderTransform>

<Path Stretch="Fill" Stroke="{TemplateBinding Foreground}"

StrokeStartLineCap="Round" StrokeThickness="1" Height="10"

Width="10" Data="M1,0 A1,1,90,1,1,0,-1" />

<Path Fill="{TemplateBinding Foreground}" Stretch="Fill"

StrokeThickness="1" Height="4" HorizontalAlignment="Left"

Margin="5,-1.5,0,0" VerticalAlignment="Top" Width="4"

Data="M0,-1.1 L0.1,-1 L0,-0.9" />

</Grid>

<CheckBox x:Name="CheckBoxElement" Margin="5,0,0,0" VerticalAlignment="Center"

Visibility="Collapsed" IsTabStop="False" Grid.Column="2"

telerik:StyleManager.Theme="{StaticResource Theme}" />

<RadioButton x:Name="RadioButtonElement" Margin="5,0,0,0"

VerticalAlignment="Center" Visibility="Collapsed" IsTabStop="False"

Grid.Column="2" telerik:StyleManager.Theme="{StaticResource Theme}" />

<Image x:Name="Image" HorizontalAlignment="Center" Margin="2" MaxHeight="16"

MaxWidth="16" VerticalAlignment="Center" Grid.Column="3"

Source="{TemplateBinding DefaultImageSrc}" />

<Rectangle x:Name="FocusVisual" Stroke="{StaticResource FocusBrushBlack}"

StrokeDashArray="1 2" StrokeThickness="1" RadiusX="3" RadiusY="3"

IsHitTestVisible="False" Visibility="Collapsed" Grid.Column="2"

Grid.ColumnSpan="6" />

<Grid Grid.Column="4" Grid.ColumnSpan="2">

<ContentPresenter x:Name="Header"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}" />

<ContentPresenter x:Name="EditHeaderElement"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Visibility="Collapsed" />

</Grid>

<Rectangle x:Name="DisabledVisual" IsHitTestVisible="true"

Visibility="Collapsed" Grid.Column="2" Grid.ColumnSpan="3" />

</Grid>

<ItemsPresenter x:Name="ItemsHost" Visibility="Collapsed" Grid.Row="1" />

</Grid>

</ControlTemplate>

<Style x:Key="RadTreeViewItemStyle" TargetType="telerik:RadTreeViewItem">

<!--<Setter Property="telerik:AnimationManager.IsAnimationEnabled"

Value="False"/>-->

<Setter Property="HorizontalContentAlignment" Value="Left" />

<Setter Property="VerticalContentAlignment" Value="Center" />

<Setter Property="CheckState" Value="Off" />

<Setter Property="BorderThickness" Value="1" />

<Setter Property="Padding" Value="1 0 5 0" />

<Setter Property="IsDropAllowed" Value="True" />

<Setter Property="ItemsOptionListType" Value="Default" />

<Setter Property="IsEnabled" Value="True" />

<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />

<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<telerik:TreeViewPanel VerticalAlignment="Bottom" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>

</Style>

A ExpanderStyle as below:

<Style x:Key="ExpanderStyle" TargetType="ToggleButton">

<Setter Property="IsEnabled" Value="True" />

<Setter Property="IsTabStop" Value="False" />

<Setter Property="Cursor" Value="Hand" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ToggleButton">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal"></VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="Button"

Storyboard.TargetProperty="Opacity" To="0" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="ButtonOver"

Storyboard.TargetProperty="Opacity" To="1" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CheckStates">

<VisualState x:Name="Checked">

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity" To="0" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity" To="0" />

</Storyboard>

</VisualState>

<VisualState x:Name="Unchecked">

<Storyboard>

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisual"

Storyboard.TargetProperty="Opacity" To="1" />

<DoubleAnimation Duration="0:0:0.05"

Storyboard.TargetName="CollapsedVisualOver"

Storyboard.TargetProperty="Opacity" To="1" />

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right"

VerticalAlignment="Top" Width="11" Height="11">

<Grid.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#3F047BA5" Offset="0.996" />

<GradientStop Color="#00000000" Offset="0" />

</LinearGradientBrush>

</Grid.Background>

<Rectangle Stroke="#FF000000" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="11" Height="11" />

<Rectangle x:Name="CollapsedVisual" Fill="#FF000000"

HorizontalAlignment="Left" VerticalAlignment="Top" Width="1"

Height="5" Margin="5,3,0,0" />

<Rectangle HorizontalAlignment="Left" VerticalAlignment="Top"

Height="1" Width="5" Margin="3,5,0,0" Fill="#FF000000" />

</Grid>

<Grid x:Name="ButtonOver" Margin="0,7,4,0" HorizontalAlignment="Right"

VerticalAlignment="Top" Width="11" Height="11">

<Rectangle Stroke="#FF167497" HorizontalAlignment="Left"

VerticalAlignment="Top" Width="11" Height="11">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#26167497" Offset="1" />

<GradientStop Color="#00167497" Offset="0" />

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<Rectangle x:Name="CollapsedVisualOver" Fill="#FF167497"

HorizontalAlignment="Left" VerticalAlignment="Top" Width="1"

Height="5" Margin="5,3,0,0" />

<Rectangle Fill="#FF167497" VerticalAlignment="Top"

HorizontalAlignment="Left" Height="1" Width="5" Margin="3,5,0,0" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

May be they affect ?

answered on 23 Aug 2011, 05:02 PM

Hi Yjh,

We understand that the ContextMenu does not appear when you click above or below the TextBlock. So, if you are not using binding in the ContextMenu, we think that the best approach here is to define the ContextMenu inside the TreeView like so:

<telerik:RadTreeView

x:Name="tree"

ItemTemplate="{StaticResource allleveltemplate}" ItemContainerStyle="{StaticResource RadTreeViewItemStyle}"

ExpanderStyle="{StaticResource ExpanderStyle}">

<telerik:RadContextMenu.ContextMenu>

<telerik:RadContextMenu HorizontalAlignment="Stretch">

<telerik:RadMenuItem Header="MenuDetail" />

<telerik:RadMenuItem Header="AddChildMenu" />

</telerik:RadContextMenu>

</telerik:RadContextMenu.ContextMenu>

</telerik:RadTreeView>

If you are about to bind the ContexMenuItems, you may need several changes in the ControlTemplate of the RadtreeViewItem so that its Header will be stretched properly.All the best,
Petar Mladenov
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>