Question

I have a WPF UserControl with a ListBox and ContentPanel. The ListBox is bound to a ObservableCollection that has apples and oranges in it.

What is considered the proper way to have it setup so if I select an apple I see an AppleEditor on the right and if I select an orange an OrangeEditor shows up in the content panel?

Answer 1

I would suggest using DataTemplating to create and apply the different editors. Depending on how different your ‘apples’ and ‘oranges’ are I would recommend using a DataTemplateSelector. Also, if they had something like a Type property you could also use DataTriggers to switch out the editors.

Lets set up a small sample with apples and oranges. They’ll have some shared properties, and a few different properties as well. And then we can create an ObservableCollection of the base IFruits to use in the 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
}

Next, we can create DataTemplateSelector, that will just check the type of the Fruit and assign the correct 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);
        }
    }
}

Then in the UI, we can create the two templates for Apples and Oranges, and use the selector to determine which gets applied to our content.

<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>