Telerik Forums / UI for Silverlight Forum / TreeView /

ContextMenu trigger area

Telerik UI for Silverlight
Resources Buy Try

6 posts, 0 answers

yjh

67 posts

Member since:
Aug 2007
Posted 09 Aug 2011 Link to this post

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.

BMP.PNG
Tina Stancheva
Admin

3299 posts

Posted 12 Aug 2011 Link to this post

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 >>
yjh

67 posts

Member since:
Aug 2007

Posted 12 Aug 2011 Link to this post

Unfortunately,it doesn't work.
Petar Mladenov
Admin

3162 posts
Posted 17 Aug 2011 Link to this post

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 >>

TreeView.zip
yjh

67 posts

Member since:
Aug 2007

Posted 18 Aug 2011 Link to this post

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="Auto" />



                    <ColumnDefinition Width="Auto" />



                    <ColumnDefinition Width="Auto" />



                    <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>



                </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="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>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

May be they affect ?
Petar Mladenov
Admin

3162 posts

Posted 23 Aug 2011 Link to this post

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 >>

ContextMenu trigger area

yjh

Tina Stancheva

yjh

Petar Mladenov

yjh

Petar Mladenov