VIBlend
Home Products Downloads Purchase Support Forum About Blog

Using a Context Menu with a TreeView

by viblend 14. November 2010 01:44

This blog post demonstrates how to capture the right click event on a tree view in order to display a context menu.

At first, we need to drag and drop a new instances of the TreeView and ContextMenu controls from the Visual Studio 2010 Toolbox.


 

The xaml markup is shown below:

<UserControl x:Class="TreeViewContextMenu.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:viblendTreeView="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.TreeView" xmlns:viblendMenu="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.Menu">

    <Grid x:Name="LayoutRoot" Background="White">
        <viblendTreeView:TreeView Height="250" HorizontalAlignment="Center"  Name="treeView1" VerticalAlignment="Center" Width="200">
            <viblendTreeView:TreeViewItem DisplayValue="Tree Item 1" IsExpanded="True">
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 1" />
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 2" />
                <viblendTreeView:TreeViewItem DisplayValue="Tree Sub Item 3" />
            </viblendTreeView:TreeViewItem>
            <viblendTreeView:TreeViewItem DisplayValue="Tree Item 2" />
        </viblendTreeView:TreeView>
        <viblendMenu:ContextMenu HorizontalAlignment="Left"  Name="contextMenu1" VerticalAlignment="Top">   
            <viblendMenu:MenuItem Click="AddItem_Click" Text="Add" />
            <viblendMenu:MenuItem Click="RemoveItem_Click" Text="Remove" />
            <viblendMenu:MenuItem Click="DisplayItem_Click" Text="Disable" />
         </viblendMenu:ContextMenu>
    </Grid>
</UserControl>

Then we need to subscribe to the MouseRightButtonDown event and we can do this either in the xaml markup or in code-behind:

C#

this.MouseRightButtonDown += new MouseButtonEventHandler(MainPage_MouseRightButtonDown); 

VB .NET

AddHandler MouseRightButtonDown, AddressOf MainPage_MouseRightButtonDown

After we subscribe to the MouseRightButtonDown event, we should implement its event handler. In the event handler, we display the ContextMenu control on the position where the right mouse button is clicked.

C#

void MainPage_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
   Point point = e.GetPosition(this.treeView1);
   if (point.X >= 0 && point.X <= this.treeView1.Width)
   {
       if (point.Y >= 0 && point.Y <= this.treeView1.Height)
       {
           Point contextMenuLocation = e.GetPosition(this);
           this.contextMenu1.Open(contextMenuLocation);
           e.Handled = true;
       }
   }
}

VB .NET

Private Sub MainPage_MouseRightButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
   Dim point As Point = e.GetPosition(Me.treeView1)
   If point.X >= 0 AndAlso point.X <= Me.treeView1.Width Then
      If point.Y >= 0 AndAlso point.Y <= Me.treeView1.Height Then
          Dim contextMenuLocation As Point = e.GetPosition(Me)
          Me.contextMenu1.Open(contextMenuLocation)
          e.Handled = True
       End If
   End If
End Sub

Finally, we implement the event handlers that will add, remove and disable TreeViewItem objects.

C#

private void AddItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        TreeViewItem item = new TreeViewItem("New Item");
        this.treeView1.SelectedItem.Items.Add(item);
    }
}

private void RemoveItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        if (this.treeView1.SelectedItem.ParentTreeViewItem != null)
        {
            this.treeView1.SelectedItem.ParentTreeViewItem.Items.Remove(this.treeView1.SelectedItem);
        }
        else if (this.treeView1.Items.Contains(this.treeView1.SelectedItem))
        {
            this.treeView1.Items.Remove(this.treeView1.SelectedItem);
        }
    }
}

private void DisableItem_Click(object sender, EventArgs e)
{
    if (this.treeView1.SelectedItem != null)
    {
        this.treeView1.SelectedItem.IsEnabled = false;
    }
}

VB .NET

Private Sub AddItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        Dim item As New TreeViewItem("New Item")
        Me.treeView1.SelectedItem.Items.Add(item)
    End If
End Sub

Private Sub RemoveItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        If Me.treeView1.SelectedItem.ParentTreeViewItem IsNot Nothing Then
            Me.treeView1.SelectedItem.ParentTreeViewItem.Items.Remove(Me.treeView1.SelectedItem)
        ElseIf Me.treeView1.Items.Contains(Me.treeView1.SelectedItem) Then
            Me.treeView1.Items.Remove(Me.treeView1.SelectedItem)
        End If
    End If
End Sub

Private Sub DisableItem_Click(ByVal sender As Object, ByVal e As EventArgs)
    If Me.treeView1.SelectedItem IsNot Nothing Then
        Me.treeView1.SelectedItem.IsEnabled = False
    End If
End Sub

Here is the result:

VIBlend Silverlight Controls - ver. 2.0 Released

by viblend 3. March 2010 05:26

We are proud to announce the second major release of VIBlend Controls for Silverlight.

With the new release, VIBlend has officially included in the suite four new controls – OutlookPane, NavigationPane, DateTimePicker and ScrollablePanel. Not only we introduced new controls, but we also improved the quality and functionality of the existing ones and added over 10 new examples to show how our controls work.

The Menu and Context Menu controls from the toolset are now provided free of charge to all registered users.

See our Silverlight Controls Live Demo and Download a free trial today.

Custom node Editors with VIBlend TreeView for Silverlight

by viblend 23. December 2009 19:12

Today, we are going to share with you how you can use custom editors in our brand new TreeView control. The process of assigning a custom editor includes three steps. The first step is to make the TreeView editable. To do that, set its EnableItemEdit property to true which will ensure that an edit operation will start over the Selected item when you press the F2 key.

<viblend:TreeView
   EnableItemEdit="True"
   Width="280"
   Height="350"
   Style="{StaticResource OfficeBlackTreeViewStyle}"
   VerticalAlignment="Center"
   HorizontalAlignment="Center"
   Background="White"
   x:Name="TreeView">

   <viblend:TreeViewItem 
      DisplayValue="Product - Espresso Truffle" 
      Style="{StaticResource OfficeBlackTreeViewItemStyle}" 
      EditTemplate="{StaticResource ComboBoxTemplate}"
      Value="Espresso Truffle">
   </viblend:TreeViewItem>
</viblend:TreeView>

The second step is to set the DisplayValue, Value and EditTemplate properties of the TreeViewItem in order to associate the custom editor with the specific TreeViewItem. The TreeView uses a TextBox control as a default editor.

The DisplayValue property represents the value which will be displayed when the item is shown. The Value property represents the logical value which will be edited.  The most important property which we need to set is the EditTemplate. It specifies the actual DataTemplate of the custom editor control. Here is the ComboBoxTemplate which we use as an EditTemplate in our TreeViewItem.

 <DataTemplate x:Name="ComboBoxTemplate">
      <ComboBox SelectedIndex="0">
           <ComboBoxItem Content="Green Tea"/>
           <ComboBoxItem Content="Caffe Espresso"/>
           <ComboBoxItem Content="Caffe Latte"/>
           <ComboBoxItem Content="White Chocolate Mocha"/>
           <ComboBoxItem Content="Caffe Americano"/>
           <ComboBoxItem Content="Cappuccino"/>
           <ComboBoxItem Content="Espresso Truffle"/>            
      </ComboBox>
</DataTemplate>


Finally, you need to update the editor’s value when the edit operation begins and we need to save the edited value when the edit operation ends. We will do this step in the code behind.

Subscribe to the ItemBeginEdit and ItemEndEdit events.
 

 this.TreeView.ItemBeginEdit += new VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemBeginEdit);

 this.TreeView.ItemEndEdit += new VIBlend.Silverlight.Controls.TreeView.ItemStateChangedHandler(TreeView_ItemEndEdit);


Set the editor’s value when it is opened. This will allow us to show the item in the combobox which corresponds to the edited TreeViewItem’s value.

void TreeView_ItemBeginEdit(object sender, TreeViewEventArgs args)
{
     if (args.Item.EditTemplate == this.ComboBoxTemplate)
     {
          ComboBox comboBox = this.ComboBoxTemplate.LoadContent() as ComboBox;
          int index = 0;
          foreach (ComboBoxItem item in comboBox.Items)
          {
                    if (item.Content.Equals(args.Item.Value))
                    {
                        ComboBox editor = this.TreeView.ActiveEditor as ComboBox;
                        editor.SelectedIndex = index;
                        break;
                    }

                    index++;
          }
     }
}

 

Save the editor’s value when the edit operation has finished. In the sample code we update the Value and DisplayValue properties.
 

void TreeView_ItemEndEdit(object sender, TreeViewEventArgs args)
{
            if (args.Item == null)
                return;


            if (args.Item.EditTemplate == this.ComboBoxTemplate)
            {
                ComboBox editor = this.TreeView.ActiveEditor as ComboBox;
                ComboBoxItem item = editor.Items[editor.SelectedIndex] as ComboBoxItem;
                args.Item.Value = item.Content;
                args.Item.DisplayValue = "Product - " + args.Item.Value;
            }
 }


The full demo source code is included in the installation of VIBlend Silverlight controls. You can also see the online demo in action as part of  the Live demo of VIBlend Silverlight Controls.

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
ALL RIGHTS RESERVED  
 
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
       
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET