MVVM binding double click to method using telerik radtreecontrol

Question

I've been working on this problem for a stupid amount of time. It is time to ask for directions despite my inner man saying "don't do it."

I am coding in WPF C# using MVVM design pattern. We try to adhere strictly to the pattern and put nothing in the code behind unless there is no option or it is completely unreasonable to do so. Having said that, I am working with a Telerik RadTreeView. Here is a snippet of it in my XAML:

<telerik:RadTreeView IsExpandOnSingleClickEnabled="True" IsLineEnabled="True" Margin="5" 
                                 ItemsSource="{Binding ItemsView}"
                                 SelectedItem="{Binding SelectedWidget, Mode=TwoWay}"
                                 ItemTemplate="{StaticResource NodeTemplate}" />

Currently the tree is working properly so that if you highlight a tree item and click the OK button on the view, all is good. However, I need to also allow the user to double click on one of the tree items. This means I already have a command and method, protected override void OkAction(), in my view model with the needed logic. Telerik supplies a property called ItemDoubleClick that is supposed to supply functionality for the tree item double click. But I can't find anything to allow me to do this in the view model. In other words, how do I do the binding? We also have a behavior setup in our project for double clicking that I was told I could use, but I have no experience with behaviors. I'm still a little wet with WPF.

If it helps, here is a link to the documentation for Telerik: http://www.telerik.com/help/wpf/radtreeview-events-overview.html

I would appreciate any help or direction anyone can provide.

Try this out Stan:

<Grid.Resources>
            <DataTemplate x:Key="WidgetTemplate">
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Resources/gear1.png" Margin="1" Stretch="None" />
                    <TextBlock Text="{Binding Name}" VerticalAlignment="Center" Margin="6,0,0,0" />
                </StackPanel>
            </DataTemplate>

            <HierarchicalDataTemplate x:Key="NodeTemplate" ItemsSource = "{Binding Children}" ItemTemplate="{StaticResource WidgetTemplate}">
                <TextBlock Text="{Binding Name}"/>
            </HierarchicalDataTemplate>

        </Grid.Resources>

Answer 1

This is where you are going to want to possibly use the Attached Behavior that you already have for the DoubleClick.

Otherwise, here is the complete code that I use which creates the Attached Behavior and will create two Attached Properties which bind to a Command and optionally a Command Parameter.

AttachedBehaviors.cs

public static class MouseDoubleClick
{
    public static DependencyProperty CommandProperty = 
        DependencyProperty.RegisterAttached("Command", 
            typeof(ICommand), 
            typeof(MouseDoubleClick), 
            new UIPropertyMetadata(CommandChanged));

    public static DependencyProperty CommandParameterProperty = 
        DependencyProperty.RegisterAttached("CommandParameter", 
            typeof(object), 
            typeof(MouseDoubleClick), 
            new UIPropertyMetadata(null));

    public static void SetCommand(DependencyObject target, ICommand value)
    {
        target.SetValue(CommandProperty, value);
    }

    public static void SetCommandParameter(DependencyObject target, object value)
    {
        target.SetValue(CommandParameterProperty, value);
    }
    public static object GetCommandParameter(DependencyObject target)
    {
        return target.GetValue(CommandParameterProperty);
    }

    private static void CommandChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
    {
        Control control = target as Control;
        if (control != null)
        {
            if ((e.NewValue != null) && (e.OldValue == null))
            {
                control.MouseDoubleClick += OnMouseDoubleClick;
            }
            else if ((e.NewValue == null) && (e.OldValue != null))
            {
                control.MouseDoubleClick -= OnMouseDoubleClick;
            }
        }
    }

    private static void OnMouseDoubleClick(object sender, RoutedEventArgs e)
    {
        Control control = sender as Control;
        ICommand command = (ICommand)control.GetValue(CommandProperty);
        object commandParameter = control.GetValue(CommandParameterProperty);
        if (command.CanExecute(commandParameter))
            command.Execute(commandParameter);
    }
}

.xaml - Remember to add the namespace of where the Attached Behavior lies.

<telerik:RadTreeView IsExpandOnSingleClickEnabled="True" 
                     IsLineEnabled="True" 
                     Margin="5" 
                     ItemsSource="{Binding ItemsView}"
                     SelectedItem="{Binding SelectedWidget, Mode=TwoWay}"
                     ItemTemplate="{StaticResource NodeTemplate}"
                     acb:MouseDoubleClick.Command="{Binding ShowItemCommand}" />

SampleViewModel.cs

private RelayCommand _showItemCommand;
public RelayCommand ShowItemCommand
{
    get
    {
        return _showItemCommand ?? (_showItemCommand =
            new RelayCommand(ShowItemDetails, IsItemSelected));
    }
}

Answer 2

obviously I don't have Telerik code so I can't really help as much as i would like to but you can try something like this. (Disclaimer: I am writing from top of my head)

Define your style in Grid.Resources

<Style TargetType="{x:Type RadTreeViewItem }" x:Key="TreeViewItemStyle">
    <EventSetter Event="MouseDoubleClick" Handler="{Binding DoubleClick}" />
</Style>

Add the Style to Container Style.

<telerik:RadTreeView IsExpandOnSingleClickEnabled="True" IsLineEnabled="True" Margin="5" 
                                 ItemsSource="{Binding ItemsView}"
                                 SelectedItem="{Binding SelectedWidget, Mode=TwoWay}"
                                 ItemTemplate="{StaticResource NodeTemplate}"
                                 ItemContainerStyle ="{StaticResource TreeViewItemStyle}"/>

Let me know if it works.

Answer 3

I tried several ways to get this accomplished.In the end I found that VS2012 was giving me fits. I noticed that changes weren't being applied on a build and run.

I opened VS2010 to find I wasn't experiencing the same issues. After speaking with my boss, we found this to be a good example of a situation that adhering to MVVM may not be the wisest choice since double clicking was strictly UI related.

I simply bounced through the code behind and into the view model using the instantiation of the view model as the data context. Didn't take but a second to do that.

As for the other solutions, I am sure it is completely possible, but I cannot confirm or deny the posts I've made here because of my VS2012 issues.