MVUX ListView 中解决模板选择器数据绑定难题的终极指南

2024-04-27 14:21:45

MVUX 中 ListView 模板选择器的终极指南：解决数据绑定难题

简介

使用 MVUX 创建动态且灵活的界面是一个激动人心的挑战。然而，当我们希望在 ListView 中显示不同类别对象时，使用模板选择器将这些对象绑定到特定页面可能会出现意想不到的障碍。在这个博客文章中，我们将深入探讨如何解决此难题，并提供一步一步的指南来实现无缝的数据绑定。

问题

MVUX 的模板选择器允许我们根据每个对象的类型为 ListView 中的项目选择特定视图。然而，当我们尝试使用 ComboBox 对象的事件处理程序时，问题就出现了。附加到 DataContext 的对象是对象本身，而不是可绑定的代理对象。这会导致事件处理程序无法正确访问数据。

解决方案

为了解决这个问题，我们需要进行一些关键的更改：

使用可绑定的代理列表： 在 ReportEditorModel.cs 中，将 ReportItems 属性更改为 ListState<IReportItem>.Empty().Bind(this)。此操作将创建可绑定的代理列表，其项属性包含绑定到 ReportEditorModel 实例的对象。
设置 DataContext 属性： 在 ReportItemTemplateSelector.xaml 中，添加 DataContext="{Binding}" 属性，以便每个模板都从 ReportEditorModel 实例中继承 DataContext。
绑定 StackPanel 的 DataContext： 在 ReportItemTablePage.xaml 中，将 <StackPanel> 的 DataContext 绑定到 BindingContext.Item, RelativeSource={RelativeSource AncestorType=Page}，将控件绑定到可绑定的代理对象，而不是底层对象。

实施指南

步骤 1：在 ReportEditorModel 中实现可绑定列表

public IListState<IReportItem> ReportItems => ListState<IReportItem>.Empty().Bind(this);

步骤 2：在 ReportItemTemplateSelector 中设置 DataContext

<local:ReportItemTemplateSelector x:Key="ReportItemTemplateSelector"
      TableTemplate="{StaticResource TableTemplate}"
      TextTemplate="{StaticResource TextTemplate}"
      NumberTemplate="{StaticResource NumberTemplate}"
      DataContext="{Binding}">

步骤 3：在 ReportItemTablePage 中绑定 StackPanel 的 DataContext

<StackPanel DataContext="{Binding BindingContext.Item, RelativeSource={RelativeSource AncestorType=Page}}" Spacing="4" Orientation="Horizontal" AllowDrop="False" Padding="10">

    <TextBlock Text="Table"/>
    <TextBlock Text="{Binding Title}" FontWeight="Bold" VerticalAlignment="Center"/>

    <ComboBox ItemsSource="{Binding Tables}" SelectionChanged="OnSelectedTableChanged" SelectedValue="{Binding SelectedTable}"/>
    <ComboBox ItemsSource="{Binding Types}" SelectionChanged="OnSelectedTypeChanged" SelectedValue="{Binding SelectedType}"/>
  
  </StackPanel>