UWP - 如何在项的属性更改时更改 ItemsControl 项的 DataTemplate？

Question

我有一个绑定到 ItemsSource 的 ItemsControl。 每个项目都可以分配多个 DataTemplate 之一，具体取决于项目的各种属性的值。 这些属性可以在运行时更改，并且需要单独换出 DataTemplate。 在 WPF 中，我可以使用以下内容（部分简化的 xaml）：

<ItemsControl 
    ItemsSource="{Binding Items}">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="{x:Type ContentPresenter}">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <MultiBinding Converter="{StaticResource RowTemplateConverter}">
                        <Binding Path="(local:Row.Sum)" />
                        <Binding Path="(local:Row.Avg)" />
                        <Binding Path="(local:Row.ShowFlagA)" />
                        <Binding Path="(local:Row.ShowFlagB)" />    
                    </MultiBinding>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>

我在尝试将其移动到 UWP 时遇到了几个问题：

1. 不支持多重绑定
2. 为了弥补上述问题，我尝试将转换器逻辑合并到 Row 的单个字符串属性中，但似乎没有分配 DataTemplate。 此外，我使用的绑定语法会导致运行时 XAML 错误，不知道为什么。

<ItemsControl 
    ItemsSource="{Binding Items}" >
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <Binding Path="RowTemplate" Converter="{StaticResource RowTemplateConverter}"/>
                </Setter.Value>
            </Setter>  
        </Style>
    </ItemsControl.ItemContainerStyle>

3. DataTemplateSelector 和 ItemContainerStyleSelectors 不起作用，因为它们只评估一次，我需要在各种属性更改时更新模板
4. 我在这里看到了一些答案，说要将上述选择器归零并重新分配它们。 这是我能够获得的最接近我想要的行为的方法，但是由于有几十个项目和快速变化的属性，性能很差，所以我无法使用它。

Answer 1

您可以编写附加行为来完成此操作。 或者扩展例如ItemsControl （或派生类型）。

关键是重新分配项目容器的内容，以便再次调用 DataTemplateSelector。
附加属性将重置内容以触发 DataTemplateSelector。 您的视图模型将跟踪需要重新评估实际 DataTemplate 并最终触发附加属性的数据项的更改。 这是通过简单地将更改的项目分配给绑定到附加行为的视图模型属性来完成的。

首先通过扩展 DataTemplateSelector 创建一个模板选择器：

public class DataItemTemplateSelector : DataTemplateSelector
{
  public DataTemplate ActivatedTemplate { get; set; }
  public DataTemplate DeactivatedTemplate { get; set; }

  protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
  {
    switch (item)
    {
      case DataItem dataItem when dataItem.IsActivated: return this.ActivatedTemplate; 
      default: return this.DeactivatedTemplate; 
    }
  }
}

实现修改已更改项的容器的附加行为：

public class TemplateSelector : DependencyObject
{
  public static object GetChangedItem(DependencyObject obj)
  {
    return (object)obj.GetValue(ChangedItemProperty);
  }

  public static void SetChangedItem(DependencyObject obj, object value)
  {
    obj.SetValue(ChangedItemProperty, value);
  }

  public static readonly DependencyProperty ChangedItemProperty =
      DependencyProperty.RegisterAttached("ChangedItem", typeof(object), typeof(TemplateSelector), new PropertyMetadata(default(object), OnChangedItemChanged));

  private static void OnChangedItemChanged(DependencyObject attachingElement, DependencyPropertyChangedEventArgs e)
  {
    if (!(attachingElement is ItemsControl itemsControl))
    {
      throw new ArgumentException($"Attaching element must be of type '{nameof(ItemsControl)}'");
    }

    var container = (itemsControl.ItemContainerGenerator.ContainerFromItem(e.NewValue) as ContentControl);
    var containerContent = container.Content;
    container.Content = null;
    container.Content = containerContent; // Trigger the DataTemplateSelector
  }
}

应用附加属性并将其绑定到您的视图模型。 还分配模板选择器：

<Page>    
  <Page.Resources>
    <local:DataItemTemplateSelector x:Key="TemplateSelector">
      <local:DataItemTemplateSelector.ActivatedTemplate>
        <DataTemplate x:DataType="local:DataItem">
          <TextBlock Text="{Binding Text}" Foreground="Red" />
        </DataTemplate>
      </local:DataItemTemplateSelector.ActivatedTemplate>
      <local:DataItemTemplateSelector.DeactivatedTemplate>
        <DataTemplate x:DataType="local:DataItem">
          <TextBlock Text="{Binding Text}" Foreground="Black" />
        </DataTemplate>
      </local:DataItemTemplateSelector.DeactivatedTemplate>
    </local:DataItemTemplateSelector>
  </Page.Resources>

  <Grid>
    <ListBox ItemsSource="{x:Bind MainViewModel.DataItems}"
             local:TemplateSelector.ChangedItem="{x:Bind MainViewModel.UpdatedItem, Mode=OneWay}"
             ItemTemplateSelector="{StaticResource TemplateSelector}" />

  </Grid>
</Page>

最后让视图模型跟踪相关属性更改并将更改的属性设置为例如绑定到附加行为的UpdatedItem属性（见上文）：

public class MainViewModel : ViewModel, INotifyPropertyChanged
{
  public MainViewModel()
  {
    DataItems = new ObservableCollection<DataItem>();

    for (int index = 0; index < 10; index++)
    {
      DataItem newItem = new DataItem();

      // Listen to property changes that are relevant 
      // for the selection of the DataTemplate
      newItem.Activated += OnItemActivated;

      this.DataItems.Add(newItem);
    }
  }

  // Trigger the attached property by setting the property that binds to the behavior
  private void OnItemActivated(object sender, EventArgs e) => this.UpdatedItem = sender as DataItem

  public ObservableCollection<DataItem> DataItems { get; }

  private DataItem updatedItem;
  public DataItem UpdatedItem
  {
    get => this.updatedItem;
    set 
    {
      this.updatedItem = value;
      OnPropertyChanged();
    }
  }
}

Answer 2

这只会更新您在视图模型中选择的项目的容器。

是的， DataItemTemplateSelector在准备项目时起作用。 即使它实现了INotifyPropertyChanged接口，它也不会响应项目的属性更改，更好的方法是使用IValueConverter根据特定属性更新 uielement。

例如

public class ImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        object img = null;

        switch (value.ToString())
        {
            case "horizontal":
                img = new BitmapImage(new Uri("ms-appx:///Assets/holder1.png"));
                break;
            case "vertical":
                img = new BitmapImage(new Uri("ms-appx:///Assets/holder2.png"));
                break;
            default:
                break;
        }

        return img;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

有关请参阅 IValueConverter 文档。