Unable to bind a content control to same list as a listbox with data templates

Question

I am writing an editor which shows a list of parameters in a list box on the left hand side of the user control and with the details shown on the right hand side. There are 6 different types of parameters, each with its own set of values. The list box uses a DataTemplate to display each parameter type. I would like the editing to work similarly on the right hand side so that when a parameter in the list box is selected, the appropriate template is loaded on the right hand side. The following abbreviated XAML code works to display the left hand listbox, but fails to display anything on the right hand side, except for the word 'collection'. Parameters is the ObservableCollection with the list of parameters. I was trying to do this with just a set of xaml code in the Content provider resources, but switched to the technique suggested in this Microsoft article: Simple Navigation Technique in WPF using MVVM . However, this also gives exactly the same result. The ContentControl should be displaying the appropriate UserControl when an item on the list is selected, but nothing is displayed. The screen shot should being showing a custom control on the right for the selected parameter, not the word 'Collection'.

Any suggestions?

    <DockPanel Grid.Row="1" DataContext="{Binding Parameters}">
        <ListBox DockPanel.Dock="Left" MinWidth="250" 
                 ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" 
                 SelectedItem="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=DataContext.SelectedParameter}"
                 Margin="0,0,15,0" HorizontalAlignment="Left">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=Icon}" Stretch="None" />
                        <TextBlock Text="{Binding Position}" Margin="10,0,0,0" />
                        <TextBlock Text="{Binding Name}" Margin="10,0,0,0" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ContentControl Content="{Binding}">
            <ContentControl.Resources>
                <DataTemplate x:Key="InputParameterTemplate" DataType="x:Type local:ParameterDisplayLineInput">
                    <controls:EditInputParameter />
                </DataTemplate>
                <DataTemplate x:Key="OutputParameterTemplate" DataType="x:Type local:ParameterDisplayLineOutput">
                    <controls:EditOutputParameter />
                </DataTemplate>
                <DataTemplate x:Key="LogicParameterTemplate"  DataType="x:Type local:ParameterDisplayLineLogic">
                    <controls:EditLogicParameter />
                </DataTemplate>
                <DataTemplate x:Key="TableParameterTemplate"  DataType="x:Type local:ParameterDisplayLineTable">
                    <controls:EditTableParameter />
                </DataTemplate>
                <DataTemplate x:Key="TimerParameterTemplate"  DataType="x:Type local:ParameterDisplayLineTimer">
                    <controls:EditTimerParameter />
                </DataTemplate>
                <DataTemplate x:Key="NetworkListParameterTemplate"  DataType="x:Type local:ParameterDisplayLineNetworkList">
                    <controls:EditNetworkListParameter />
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>
    </DockPanel>

Answer 1

Lose that "x:Key"s,So your DataTemplate will apply automatically. (i guess you are having proper binding)

 <DockPanel Grid.Row="1" DataContext="{Binding Parameters}">
    <ListBox DockPanel.Dock="Left" MinWidth="250" 
             ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" 
             SelectedItem="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=DataContext.SelectedParameter}"
             Margin="0,0,15,0" HorizontalAlignment="Left">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Path=Icon}" Stretch="None" />
                    <TextBlock Text="{Binding Position}" Margin="10,0,0,0" />
                    <TextBlock Text="{Binding Name}" Margin="10,0,0,0" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <ContentControl Content="{Binding}">
        <ContentControl.Resources>
            <DataTemplate  DataType="x:Type local:ParameterDisplayLineInput">
                <controls:EditInputParameter />
            </DataTemplate>
            <DataTemplate  DataType="x:Type local:ParameterDisplayLineOutput">
                <controls:EditOutputParameter />
            </DataTemplate>
            <DataTemplate   DataType="x:Type local:ParameterDisplayLineLogic">
                <controls:EditLogicParameter />
            </DataTemplate>
            <DataTemplate   DataType="x:Type local:ParameterDisplayLineTable">
                <controls:EditTableParameter />
            </DataTemplate>
            <DataTemplate   DataType="x:Type local:ParameterDisplayLineTimer">
                <controls:EditTimerParameter />
            </DataTemplate>
            <DataTemplate  DataType="x:Type local:ParameterDisplayLineNetworkList">
                <controls:EditNetworkListParameter />
            </DataTemplate>
        </ContentControl.Resources>
    </ContentControl>
</DockPanel>

Answer 2

I ended up punting this. I cheated and stored a pointer to the appropriate editing line user control directly in my Parameter Display Line Model class and then bound the content control to that. There was no way that I could find to have the content control automatically change to the correct data template for a specific line. Please don't bother pointing out that this violates the separation of the UI from the Model - I know it and hang my head in shame, but nothing else worked.