c# - 数据绑定(bind)到异构列表

Question

我有一个带有 ListBox 和 ContentPanel 的 WPF UserControl。 ListBox 绑定(bind)到一个 ObservableCollection，其中有苹果和橙子。

设置它的正确方法是什么？如果我选择一个苹果，我会在右边看到一个 AppleEditor，如果我选择一个橙色，OrangeEditor 会出现在内容面板中？

Answer 1

我建议使用 DataTemplating创建和应用不同的编辑器。根据你的“苹果”和“橘子”的不同程度，我建议使用 DataTemplateSelector .另外，如果他们有类似 Type 属性的东西，你也可以使用 DataTriggers切换编辑器。

让我们用苹果和橙子做一个小样本。它们将具有一些共享属性，以及一些不同的属性。然后我们可以创建一个基础 IFruit 的 ObservableCollection 以在 UI 中使用。

public partial class Window1 : Window
{
    public ObservableCollection<IFruit> Fruits { get; set; }
    public Window1()
    {
        InitializeComponent();

        Fruits = new ObservableCollection<IFruit>();
        Fruits.Add(new Apple { AppleType = "Granny Smith", HasWorms = false });
        Fruits.Add(new Orange { OrangeType = "Florida Orange", VitaminCContent = 75 });
        Fruits.Add(new Apple { AppleType = "Red Delicious", HasWorms = true });
        Fruits.Add(new Orange { OrangeType = "Navel Orange", VitaminCContent = 130 });

        this.DataContext = this;
    }
}

public interface IFruit
{
    string Name { get; }
    string Color { get; }
}

public class Apple : IFruit
{
    public Apple() { }
    public string AppleType { get; set; }
    public bool HasWorms { get; set; }
    #region IFruit Members
    public string Name { get { return "Apple"; } }
    public string Color { get { return "Red"; } }
    #endregion
}

public class Orange : IFruit
{
    public Orange() { }
    public string OrangeType { get; set; }
    public int VitaminCContent { get; set; }
    #region IFruit Members
    public string Name { get { return "Orange"; } }
    public string Color { get { return "Orange"; } }
    #endregion
}

接下来，我们可以创建 DataTemplateSelector，它只会检查 Fruit 的类型并分配正确的 DataTemplate。

public class FruitTemplateSelector : DataTemplateSelector
{
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        string templateKey = null;

        if (item is Orange)
        {
            templateKey = "OrangeTemplate";
        }
        else if (item is Apple)
        {
            templateKey = "AppleTemplate";
        }

        if (templateKey != null)
        {
            return (DataTemplate)((FrameworkElement)container).FindResource(templateKey);
        }
        else
        {
            return base.SelectTemplate(item, container);
        }
    }
}

然后在 UI 中，我们可以为 Apples 和 Oranges 创建两个模板，并使用选择器来确定将哪个应用于我们的内容。

<Window x:Class="FruitSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FruitSample"
    Title="Fruits"
    Height="300"
    Width="300">
<Window.Resources>

    <local:FruitTemplateSelector x:Key="Local_FruitTemplateSelector" />

    <DataTemplate x:Key="AppleTemplate">
        <StackPanel Background="{Binding Color}">
            <TextBlock Text="{Binding AppleType}" />
            <TextBlock Text="{Binding HasWorms, StringFormat=Has Worms: {0}}" />
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="OrangeTemplate">
        <StackPanel Background="{Binding Color}">
            <TextBlock Text="{Binding OrangeType}" />
            <TextBlock Text="{Binding VitaminCContent, StringFormat=Has {0} % of daily Vitamin C}" />
        </StackPanel>
    </DataTemplate>

</Window.Resources>

<DockPanel>
    <ListBox x:Name="uiFruitList"
             ItemsSource="{Binding Fruits}"
             DisplayMemberPath="Name" />
    <ContentControl Content="{Binding Path=SelectedItem, ElementName=uiFruitList}"
                    ContentTemplateSelector="{StaticResource Local_FruitTemplateSelector}"/>
</DockPanel>
</Window>