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