TreeViewItem.Expanded

Question

I am using the latest version of the mvvm light toolkit, however I do not understand how I can use EventToCommand for the TreeViewItem.Expanded event.

THIS IS A MUST WORK ... what am I doing wrong?

<TreeView Grid.Column="0" Grid.Row="0" ItemsSource="{Binding Path= MonitoredDatabases}"> <TreeView.ItemTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Queues}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding ServerName}" /> <TextBlock Text="\" /> <TextBlock Text="{Binding DatabaseName}" /> </StackPanel> <HierarchicalDataTemplate.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding QueueName}" /> </DataTemplate> </HierarchicalDataTemplate.ItemTemplate> </HierarchicalDataTemplate> </TreeView.ItemTemplate> <i:Interaction.Triggers> <i:EventTrigger EventName="TreeViewItem.Expanded"> <cmd:EventToCommand Command="{Binding Path=NodeExpanded}" CommandParameter="Expanded" /> </i:EventTrigger> <i:EventTrigger EventName="TreeViewItem.Collapsed"> <cmd:EventToCommand Command="{Binding Path=NodeCollapsed}" CommandParameter="Collapsed" /> </i:EventTrigger> </i:Interaction.Triggers> </TreeView> 

will help evaluate.

Sincerely.

Gary

Answer 1

I was able to do this by creating my own ItemContainerStyle for the TreeView. You should consider this along with the following code snippets.

1. ViewModel for TreeView

 public class TreeViewModelView { public IEnumerable<object> Values { get { /* return hierarchical data source here ... */ } } /// <summary> /// Command executed when the TreeViewItem expanding event is raised. The data item is passed in as a parameter. /// </summary> public RelayCommand<object> ExpandedCommand { get { return new RelayCommand<object>( o => MessageBox.Show( o.GetType().Name ) ); } } /// <summary> /// Command executed when the TreeViewItem collapsing event is raised. /// </summary> public RelayCommand CollapsedCommand { get { return new RelayCommand( () => MessageBox.Show( "Collapsed" ) ); } } } 

2. Define a TreeView and configure mandatory data binding:

  <TreeView x:Name="lstItems" HorizontalAlignment="Left" Margin="21,19,0,80" Width="283" DataContext="{DynamicResource TreeViewModelView}" ItemsSource="{Binding Values, Mode=OneWay}" ItemTemplate="{DynamicResource TreeViewDataTemplate}" ItemContainerStyle="{DynamicResource TreeViewItemStyle}"> <TreeView.Resources> <mv:TreeViewModelView x:Key="TreeViewModelView" /> <HierarchicalDataTemplate x:Key="TreeViewDataTemplate" ItemsSource="{Binding Items}"> <Grid> <TextBlock Text="{Binding Name}" /> </Grid> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView> 

3. In Expression Blend, you can create an editing copy of the ItemContainerStyle template

 <Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}"> ... </Style> 

4. Then replace ToggleButton with:

 <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"> <i:Interaction.Triggers> <!-- When the Checked event is raised execute the ExpandedCommand with the data item as a parameter. --> <i:EventTrigger EventName="Checked"> <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Path=DataContext.ExpandedCommand, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}, Mode=OneWay}" CommandParameter="{Binding}" /> </i:EventTrigger> <!-- When the Unchecked event is raised execute the CollapsedCommand. --> <i:EventTrigger EventName="Unchecked"> <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Path=DataContext.CollapsedCommand, RelativeSource={RelativeSource AncestorType={x:Type TreeView}}, Mode=OneWay}"/> </i:EventTrigger> </i:Interaction.Triggers> </ToggleButton> 

Answer 2

The behavior command is activated as an attached property that must be bound to the FrameworkElement element. Your sample has a trigger-related property attached to a TreeView that does not have an extended or collapsed event. You tried to use "TreeViewItem.Expanded" as the name of the event, but this does not work.

If you created your TreeViewItems statically in XAML or manually encoded, you can attach to each TreeViewItem. Unfortunately, I do not know how to connect to the TreeViewItem from the HierarchicalDataTemplate. You can bind to TemplatedParent RelativeSource, but you cannot connect to it. Your only solution is to iterate over the encoded TreeViewItems and manually process the events, but even then you will have to do it with VisualTreeHelper only after the TreeView control has been bound and displayed with data, which is a huge hack.