How to make Catel recognise all MultiSelectTreeView properties?

Question

I am a fairly novice Visual Basic developer trying to use the MultiSelectTreeView control (https://github.com/ygoe/MultiSelectTreeView) in a MVVM application I am developing. To become familiar with using them together, I translated the MultiSelectTreeView demo to VB, and started implementing viewmodels using Catel.

What I found is that Catel seems to make some MultiSelectTreeView properties unavailable. On running the test using Catel, the demo window opens and mostly behaves as expected, but the immediate window shows a number of errors like:

System.Windows.Data Warning: 40 : BindingExpression path error: '(Controls:MultiSelectTreeView.HoverHighlighting)' property not found on 'object' ''MultiSelectTreeView' (Name='TheTreeView')'. BindingExpression:Path=(Controls:MultiSelectTreeView.HoverHighlighting); DataItem='MultiSelectTreeView' (Name='TheTreeView'); target element is 'MultiSelectTreeViewItem' (Name=''); target property is 'HoverHighlighting' (type 'Boolean')

Similar messages are present for the MultiSelectTreeView IsKeyboardMode and ItemIndent properties. Setting these properties in code or directly in the MainWindow XAML has no effect, and the MultiSelectTreeView's HoverHighlighting effect no longer works if Catel is used.

I have uploaded my test project to GitHub (https://github.com/AnotherKiwi/MultiSelectTreeViewDemoVB). The master branch contains the VB translation of MultiSelectTreeView demo, with all features working. In the ImplementingMainWindowViewModel branch I have started implementing a viewmodel using Catel. Most features of the demo work, except the ones involving the properties mentioned above.

I would really appreciate it if someone could provide guidance on why Catel seems to be interfering with these MultiSelectTreeView properties!

Some further information added after the answer from @Geert:

The declaration of the MultiSelectTreeView control in MainWindow.xaml is as follows

    <controls:MultiSelectTreeView
            x:Name="TheTreeView"
            ItemsSource="{Binding RootNode.Children}"
            AllowEditItems="{Binding AllowEditItems}"
            VerticalRulers="{Binding VerticalRulers}">

            <controls:MultiSelectTreeView.ContextMenu>
                ...
            </controls:MultiSelectTreeView.ContextMenu>

            <i:Interaction.Triggers>
                ...
            </i:Interaction.Triggers>

            <controls:MultiSelectTreeView.ItemContainerStyle>
                <Style TargetType="{x:Type controls:MultiSelectTreeViewItem}">
                    <Setter Property="DisplayName" Value="{Binding DisplayName}"/>
                    <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
                    <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                    <Setter Property="IsEnabled" Value="{Binding IsEnabled, Mode=TwoWay}"/>
                    <Setter Property="IsVisible" Value="{Binding IsVisible, Mode=TwoWay}"/>
                    <Setter Property="IsEditable" Value="{Binding IsEditable, Mode=TwoWay}"/>
                    <Setter Property="IsEditing" Value="{Binding IsEditing, Mode=TwoWay}"/>
                    <Setter Property="Remarks" Value="{Binding Remarks}"/>
                    <Setter Property="IsKeyboardMode" Value="{Binding IsKeyboardMode, Mode=TwoWay}"/>
                    <Setter Property="HoverHighlighting" Value="{Binding HoverHighlighting}"/>
                    <Setter Property="ItemIndent" Value="{Binding ItemIndent}"/>
                    <Setter Property="ToolTip" Value="{Binding ToolTip}" />

                    <Setter Property="ContentTemplateEdit">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Border Background="YellowGreen" CornerRadius="3" Width="16" Height="16"/>
                                    <controls:EditTextBox
                                        Text="{Binding DisplayName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                        Padding="2,0,0,0"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </controls:MultiSelectTreeView.ItemContainerStyle>

            <controls:MultiSelectTreeView.Resources>
                <!--
                Here the general item appearance is defined, for the ViewModel.TreeItemViewModel type
                -->
                <HierarchicalDataTemplate DataType="{x:Type vm:TreeItemViewModel}" ItemsSource="{Binding DataContext.Children}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding DataContext.ImageSource}" Width="16" Height="16" SnapsToDevicePixels="True"/>
                        <TextBlock Text="{Binding DataContext.DisplayName}" VerticalAlignment="Center" Padding="4,0,2,0"/>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </controls:MultiSelectTreeView.Resources>
        </controls:MultiSelectTreeView>

I have tried applying the advice given in @Geert's answer, but when I run the application the MultiSelectTreeView is not displayed. I'm very new to WPF and I'm probably not modifying the appropriate XAML statements. Some more help with this would be really appreciated!

Geert van Horrik Geert van Horrik · Accepted Answer · 2017-03-27T09:25:46

Note that items in an itemscontrol get a new DataContext (which is the item), so you cannot bind directly to the VM inside an ItemTemplate.

If you need to bind to the vm, you should do something like this:

<ItemsControl x:Name="myItemsControl" ItemsSource="{Binding MyItems}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
        <TextBlock Content="{Binding ElementName=myItemsControl, Path=DataContext.SomePropertyOnTheVm}" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

How to make Catel recognise all MultiSelectTreeView properties?

1 Answers