Search code examples
c#wpfxamlinfragisticsdatacontext

WPF Tree in ComboEditor - Infragistics WPF controls

I'm currently working on a WPF .NET 4.7 application and I use Infragistics WPF controls version 18.

I need to create a custom XamComboEditor which has a XamDataTree inside. Thus a ComboBox with a Tree selection inside.

The Tree selection works fine without the XamComboEditor and looks like this:

<iWPF:XamDataTree ItemsSource="{Binding Locations}">
    <iWPF:XamDataTree.GlobalNodeLayouts>
        <iWPF:NodeLayout Key="Locations" TargetTypeName="LocationViewModel" DisplayMemberPath="Name"/>
        <iWPF:NodeLayout Key="ChildLocations" TargetTypeName="string"/>
    </iWPF:XamDataTree.GlobalNodeLayouts>
</iWPF:XamDataTree>

enter image description here

My XamDataTree is bound to an observable collection Locations:

public ObservableCollection<LocationViewModel> Locations { get; set; } = new ObservableCollection<LocationViewModel>();

public class LocationViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<LocationViewModel> ChildLocations { get; set; } = new List<LocationViewModel>();
}

I need to use the style setter on my XamComboEditor to put the XamDataTree inside the combobox.

My problem is now, I don't know how to achieve this, or how to pass the context from the XamComboEditor further to the XamDataTree.

I tried the following, in vain:

<iWPF:XamComboEditor ItemsSource="{Binding Locations}">
    <iWPF:XamComboEditor.ComboBoxStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <iXaml:XamDataTree ItemsSource="{Binding .}">
                            <iXaml:XamDataTree.GlobalNodeLayouts>
                                <iXaml:NodeLayout Key="Locations" TargetTypeName="LocationViewModel" DisplayMemberPath="{Binding Name}"/>
                                <iXaml:NodeLayout Key="ChildLocations" TargetTypeName="string"/>
                            </iXaml:XamDataTree.GlobalNodeLayouts>
                        </iXaml:XamDataTree>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </iWPF:XamComboEditor.ComboBoxStyle>
</iWPF:XamComboEditor>

Do you know how to solve this issue? Do you know how to pass the data context from the parent control to, let's say, the child control? Or rather, how to put the XamDataTree inside the XamComboEditor?

Solution

  • If I understood this correctly, the DataContext of your XamlDataTree is no what you expect it to be (the Locations bound in you XamComboEditor).

    One way to solve this problem is to specify the source of the path in your Binding markup extension.
    You can use the {x:Reference ...} markup extension to reference a named controled in your control tree.

    <iWPF:XamComboEditor x:Name="comboEditor" ItemsSource="{Binding Locations}">
    <iWPF:XamComboEditor.ComboBoxStyle>
        <Style TargetType="ComboBox">
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <iXaml:XamDataTree ItemsSource="{Binding Source={x:Reference Name=comboEditor}, Path=DataContext.Locations}">
                            <iXaml:XamDataTree.GlobalNodeLayouts>
                                <iXaml:NodeLayout Key="Locations" TargetTypeName="LocationViewModel" DisplayMemberPath="{Binding Name}"/>
                                <iXaml:NodeLayout Key="ChildLocations" TargetTypeName="string"/>
                            </iXaml:XamDataTree.GlobalNodeLayouts>
                        </iXaml:XamDataTree>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </iWPF:XamComboEditor.ComboBoxStyle>
</iWPF:XamComboEditor>

    You can also achieve this without naming your controls with the RelativeSource property in the Binding (something like RelativeSource={RelativeSource AncestorType=iWPF:XamComboEditor}).