TreeViewItem.Expanded [英] TreeViewItem.Expanded

问题描述

我正在使用最新版本的mvvm light工具包，但是我不清楚如何将EventToCommand用于事件TreeViewItem.Expanded.

Im using the latest version of mvvm light toolkit, however i'm not clear how I can use EventToCommand for the event TreeViewItem.Expanded.

这很重要...我在做什么错了?

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

非常感谢.

致谢.

加里

推荐答案

我能够通过为 TreeView 创建自定义的 ItemContainerStyle 来做到这一点.您应该可以将其与以下代码段放在一起.

I was able to do this by creating a custom ItemContainerStyle for the TreeView. You should be able to put this together with the following code snippets.

1..TreeView的ViewModel

1. A ViewModel for the 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..定义TreeView并设置所需的数据绑定:

2. Define the TreeView and setup the required 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..在Expression Blend中，您可以创建 ItemContainerStyle 模板的副本

3. In Expression Blend you can create edit a copy of the ItemContainerStyle template

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

    ...

</Style>

4..然后将 ToggleButton 替换为:

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

这篇关于TreeViewItem.Expanded的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！