Question

I've figured out a way to bind user controls inside a tree view dynamically with ReactiveUI.

But ... The top level binding to the HierachicalDataSource is in the XAML not the code behind, and I need to set the ItemsSource directly and not use this.OneWayBind per the general pattern for ReactiveUI binding.

So, my question is: did I miss something in the ReactiveUI framework that would let me bind with this.OneWayBind and move the HierachicalDataTemplete into the code behind or a custom user control?

In particular- Is there another overload of OneWayBind supporting Hierarchical Data Templates, or a way to suppress the data template generation for the call when using it?

Update I've added selected item, and programatic support for Expand and Selected to my test project, but I had to add a style to the XAML. I'd like to replace that with a simple RxUI Bind as well. Updated the examples.

Here are the key details:

Tree Control in Main View

skills = ['Python', 'PHP', 'back-end', 'CSS', 'MYSQL']
skills_to_add = []
for s in skills:
    try:
        skill = Skill.objects.get(name__iexact=s)
    except Skill.DoesNotExist:
        skill = Skill()
        skill.name = s
        skill.save()
    except Skill.MultipleObjectsReturned:
        print "Duplicate skill found: " + s
        continue

    skills_to_add.append(skill)

if len(skills_to_add):
    user.profile.skills.clear()
    user.profile.skills.add(*skills)

main view code behind

<TreeView Name="FamilyTree" >
                <TreeView.Resources>
                    <Style TargetType="{x:Type TreeViewItem}">
                        <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
                        <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}"/>
                  </Style>
                    <HierarchicalDataTemplate DataType="{x:Type local:TreeItem}" ItemsSource="{Binding Children}">
                        <reactiveUi:ViewModelViewHost ViewModel="{Binding ViewModel}"/>
                    </HierarchicalDataTemplate>
                </TreeView.Resources>
            </TreeView>

MainViewModel

      public partial class MainWindow : Window, IViewFor<MainVM>
        {
            public MainWindow()
            {
                InitializeComponent();
                //build viewmodel
                ViewModel = new MainVM();
                //Register views
                Locator.CurrentMutable.Register(() => new PersonView(), typeof(IViewFor<Person>));
                Locator.CurrentMutable.Register(() => new PetView(), typeof(IViewFor<Pet>));
                //NB. ! Do not use 'this.OneWayBind ... ' for the top level binding to the tree view
                 //this.OneWayBind(ViewModel, vm => vm.Family, v => v.FamilyTree.ItemsSource);
                FamilyTree.ItemsSource = ViewModel.Family;
    }
...
}

TreeItem base class

    public class MainVM : ReactiveObject
        {      
            public MainVM()
            {
                var bobbyJoe = new Person("Bobby Joe", new[] { new Pet("Fluffy") });
                var bob = new Person("Bob", new[] { bobbyJoe });
                var littleJoe = new Person("Little Joe");
                var joe = new Person("Joe", new[] { littleJoe });
                Family = new ReactiveList<TreeItem> { bob, joe };                                 
            _addPerson = ReactiveCommand.Create();
            _addPerson.Subscribe(_ =>
            {
                if (SelectedItem == null) return;
                var p = new Person(NewName);
                SelectedItem.AddChild(p);
                p.IsSelected = true;
                p.ExpandPath();
            });
    }
   public ReactiveList<TreeItem> Family { get; }
  ...
  }

Person Class

public abstract class TreeItem : ReactiveObject
{
    private readonly Type _viewModelType;

    bool _isExpanded;
    public bool IsExpanded
    {
        get { return _isExpanded; }
        set { this.RaiseAndSetIfChanged(ref _isExpanded, value); }
    }

    bool _isSelected;
    public bool IsSelected
    {
        get { return _isSelected; }
        set { this.RaiseAndSetIfChanged(ref _isSelected, value); }
    }

    private TreeItem _parent;

    protected TreeItem(IEnumerable<TreeItem> children = null)
    {

        Children = new ReactiveList<TreeItem>();
        if (children == null) return;
        foreach (var child in children)
        {
            AddChild(child);
        }
    }

    public abstract object ViewModel { get; }
    public ReactiveList<TreeItem> Children { get; }

    public void AddChild(TreeItem child)
    {
        child._parent = this;
        Children.Add(child);
    }

    public void ExpandPath()
    {
        IsExpanded = true;
        _parent?.ExpandPath();
    }
    public void CollapsePath()
    {
        IsExpanded = false;
        _parent?.CollapsePath();
    }
}

person view user control

public class Person : TreeItem
    {
        public string Name { get; set; }
        public Person(string name, IEnumerable<TreeItem> children = null)
            : base(children)
        {
            Name = name;
        }
        public override object ViewModel => this;
    }

Person view code behind

<UserControl x:Class="TreeViewInheritedItem.PersonView"... >                 
    <StackPanel>
        <TextBlock Name="PersonName"/>
    </StackPanel>
</UserControl>

Pet work the same as person.

And the full project is here ReactiveUI Tree view Sample

Answer 1

我查看了ReactiveUI源代码，这是执行此操作的唯一方法。绑定帮助器方法始终使用DataTemplate而不是HierarchicalDataTemplate。

因此，这种方法将使用最高级别的XAML绑定，然后让您在所有TreeView项目上使用ReactiveUI绑定。

我将看到创建拉取请求以处理此边缘情况。

谢谢，克里斯

How to use ReactiveUI with a Hierarchical Data Source (Tree view)

1 个答案: