如何将 ReactiveUI 与分层数据源(树视图)一起使用
How to use ReactiveUI with a Hierarchical Data Source (Tree view)
我找到了一种使用 ReactiveUI 在树视图中动态绑定用户控件的方法。
但是...
到 HierachicalDataSource 的顶级绑定在 XAML 而不是后面的代码中,我需要直接设置 ItemsSource 而不是根据 ReactiveUI 绑定的一般模式使用 this.OneWayBind。
所以,我的问题是: 我是否遗漏了 ReactiveUI 框架中的某些内容,这些内容可以让我与 this.OneWayBind 绑定并将 HierachicalDataTemplete 移动到代码后面或自定义用户控件?
特别是-是否有另一个支持分层数据模板的OneWayBind重载,或者在使用时抑制调用数据模板生成的方法?
更新
我已经在我的测试项目中添加了选定项和对 Expand 和 Selected 的编程支持,但我必须向 XAML 添加样式。我也想用简单的 RxUI Bind 替换它。更新了示例。
以下是关键细节:
主视图中的树控件
<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>
后面的主视图代码
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;
}
...
}
MainViewModel
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; }
...
}
TreeItem 基础 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();
}
}
人Class
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;
}
个人查看用户控制
<UserControl x:Class="TreeViewInheritedItem.PersonView"... >
<StackPanel>
<TextBlock Name="PersonName"/>
</StackPanel>
</UserControl>
个人查看代码隐藏
public partial class PersonView : UserControl, IViewFor<Person>
{
public PersonView()
{
InitializeComponent();
this.OneWayBind(ViewModel, vm => vm.Name, v => v.PersonName.Text);
}
...
}
宠物和人一样工作
完整项目在这里ReactiveUI Tree view Sample
我查看了 ReactiveUI 源代码,这是唯一的方法。 Bind 帮助器方法始终使用 DataTemplate 而不是 HierarchicalDataTemplate。
因此,此方法将对最顶层使用 XAML 绑定,然后让您对所有 TreeView 项目使用 ReactiveUI 绑定。
我将了解如何创建拉取请求来处理这种边缘情况。
谢谢,
克里斯
我找到了一种使用 ReactiveUI 在树视图中动态绑定用户控件的方法。
但是... 到 HierachicalDataSource 的顶级绑定在 XAML 而不是后面的代码中,我需要直接设置 ItemsSource 而不是根据 ReactiveUI 绑定的一般模式使用 this.OneWayBind。
所以,我的问题是: 我是否遗漏了 ReactiveUI 框架中的某些内容,这些内容可以让我与 this.OneWayBind 绑定并将 HierachicalDataTemplete 移动到代码后面或自定义用户控件?
特别是-是否有另一个支持分层数据模板的OneWayBind重载,或者在使用时抑制调用数据模板生成的方法?
更新 我已经在我的测试项目中添加了选定项和对 Expand 和 Selected 的编程支持,但我必须向 XAML 添加样式。我也想用简单的 RxUI Bind 替换它。更新了示例。
以下是关键细节:
主视图中的树控件
<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>
后面的主视图代码
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;
}
...
}
MainViewModel
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; }
...
}
TreeItem 基础 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();
}
}
人Class
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;
}
个人查看用户控制
<UserControl x:Class="TreeViewInheritedItem.PersonView"... >
<StackPanel>
<TextBlock Name="PersonName"/>
</StackPanel>
</UserControl>
个人查看代码隐藏
public partial class PersonView : UserControl, IViewFor<Person>
{
public PersonView()
{
InitializeComponent();
this.OneWayBind(ViewModel, vm => vm.Name, v => v.PersonName.Text);
}
...
}
宠物和人一样工作
完整项目在这里ReactiveUI Tree view Sample
我查看了 ReactiveUI 源代码,这是唯一的方法。 Bind 帮助器方法始终使用 DataTemplate 而不是 HierarchicalDataTemplate。
因此,此方法将对最顶层使用 XAML 绑定,然后让您对所有 TreeView 项目使用 ReactiveUI 绑定。
我将了解如何创建拉取请求来处理这种边缘情况。
谢谢, 克里斯