Question

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

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

Answer 1

我建议使用DataTemplating来创建和应用不同的编辑器。根据您的“苹果”和“橙子”的不同，我建议使用DataTemplateSelector。此外，如果他们有类似属性的东西，您也可以使用DataTriggers来切换编辑器。

让我们用苹果和橘子设置一个小样本。他们将拥有一些共享属性，以及一些不同的属性。然后我们可以在UI中创建一个基本IFruits的ObservableCollection。

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>

数据绑定到异构列表

1 个答案: