Bruno Klein
Bruno Klein

Reputation: 3367

ContextMenu and TreeView

How can I create a context menu which will show up when the user right clicks on an element of my tree view?

I would like to get the name of the item which was clicked, how is this possible?

This is my Tree View:

<TreeView Name="tvwResultados" 
                  MouseMove="DataGrid_MouseMove"
                  MouseLeftButtonDown="DataGrid_PreviewMouseLeftButtonDown"
                  ItemTemplate="{StaticResource empresaTemplate}"
                  ItemsSource="{Binding Empresas}"
                  Padding="0,6,0,6"
                  Background="Black"
                  BorderBrush="Gray"
                  BorderThickness="1">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <Setter Property="BorderThickness" Value="1" />
                    <Setter Property="Padding" Value="4,2,4,2" />
                    <Style.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="BorderBrush" Value="Gray" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TreeView.ItemContainerStyle>
            <TreeView.Resources>
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#171717" />
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Silver" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#333333" />
                <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Silver" />
                <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Gray" />
                <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="Silver" />
            </TreeView.Resources>
        </TreeView>

Upvotes: 0

Views: 661

Answers (2)

Neon Blue
Neon Blue

Reputation: 391

Easier still... Add the ContextMenuStrip from the toolbox to the design view. Add in the menu options as you so desire (rename the name if you so desire or leave it at the ContextMenuStrip1. Then all you have to do is select the TreeView in design mode, properties, and set the context menu.

Upvotes: 2

Brian S
Brian S

Reputation: 5785

There are several ways you can add a ContextMenu to your TreeViewItems depending on many factors. For example, is the ContextMenu the same for each TreeViewItem? Where do the MenuItems come from?

One solution would be to add a ContextMenu to your ItemContainerStyle. You can define the ContextMenu as a Resource in your Window or whatever the top-level control is like this:

<Window.Resources>
    <ContextMenu x:Key="TreeItemMenu">
        <MenuItem Header="Menu Item 1" Click="MenuItem_Click_1"/>
        <MenuItem Header="Menu Item 2" Click="MenuItem_Click_2"/>
    </ContextMenu>
</Window.Resources>

And then you can update your ItemContainerStyle to use this ContextMenu like this:

<TreeView.ItemContainerStyle>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Padding" Value="4,2,4,2" />
        <Setter Property="ContextMenu" Value="{DynamicResource TreeItemMenu}"/>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="BorderBrush" Value="Gray" />
            </Trigger>
        </Style.Triggers>
    </Style>
</TreeView.ItemContainerStyle>

To get the Item that was clicked, you will need to handle that separately. You can use an EventSetter to attach an event to each TreeViewItem and then track which item was last clicked like this:

Add this to the setters of the style:

<EventSetter Event="MouseRightButtonDown" Handler="OnTreeItemClicked"/>

And then this goes in the code behind:

private void OnTreeItemClicked(object sender, MouseButtonEventArgs e)
{
    _item = sender as TreeViewItem;
    if (_item != null)
    {
        string header = _item.Header.ToString();
    }
}

This will add the same ContextMenu to each TreeViewItem, and it hard-codes the MenuItems, however it demonstrates how you would add a ContextMenu. You can certainly get more flexible/dynamic/advanced, but this should give you the foundation to get started.

Upvotes: 1

Related Questions