ListBox with two ItemsSource and DataTemplate

Question

I'm sure this is simple, but I'm not finding the solution. how do I bind to two arrays within a data source with one ListBox?

Here is a sample of the data:

    <XmlDataProvider x:Key="ConfigurationData" XPath="Configuration/Component">
    <x:XData>
        <Configuration xmlns="">
            <Component ID="2252371">
                <ComponentAttribute ID="301080453">
                    <Name>ColorHexCodes</Name>
                    <Value />
                    <Values>
                        <Value>#FFFFFA</Value>
                        <Value>#FFFFFA</Value>
                        <Value>#FFFFFA</Value>
                        <Value>#FFFFFA</Value>
                        <Value>#FFFFFA</Value>
                        <Value>#FFFFFA</Value>
                        <Value>#A80000</Value>
                        <Value>#A80000</Value>
                        <Value>#A80000</Value>
                        <Value>#A80000</Value>
                        <Value>#A80000</Value>
                        <Value>#A80000</Value>
                        <Value>#D1D3D4</Value>
                        <Value>#D1D3D4</Value>
                        <Value>#D1D3D4</Value>
                        <Value>#D1D3D4</Value>
                        <Value>#D1D3D4</Value>
                        <Value>#D1D3D4</Value>
                    </Values>
                </ComponentAttribute>
                <ComponentAttribute ID="301080500">
                    <Name>ColorDescription</Name>
                    <Value />
                    <Values>
                        <Value>0010 - White</Value>
                        <Value>0010 - White</Value>
                        <Value>0010 - White</Value>
                        <Value>0010 - White</Value>
                        <Value>0010 - White</Value>
                        <Value>0010 - White</Value>
                        <Value>1902 - Red</Value>
                        <Value>1902 - Red</Value>
                        <Value>1902 - Red</Value>
                        <Value>1902 - Red</Value>
                        <Value>1902 - Red</Value>
                        <Value>1902 - Red</Value>
                        <Value>3971 - Silver</Value>
                        <Value>3971 - Silver</Value>
                        <Value>3971 - Silver</Value>
                        <Value>3971 - Silver</Value>
                        <Value>3971 - Silver</Value>
                        <Value>3971 - Silver</Value>
                    </Values>
                </ComponentAttribute>
            </Component>
        </Configuration>
    </x:XData>
</XmlDataProvider>

What I need to show is the list that shows the ColorDescription and ColorHexCodes side by side. These two collections will always line up.

I came up with this:

    <ListBox Grid.Row="0" Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" Width="Auto" Grid.ColumnSpan="2">
    <ListBox.ItemsSource>
        <Binding Source="{StaticResource ConfigurationData}" XPath="//ComponentAttribute[Name='ThreadDescription']/Values/*" />
    </ListBox.ItemsSource>
    <ListBox.ItemTemplate>
        <DataTemplate x:Key="Swatch">
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Height="20" FontSize="14" Foreground="CadetBlue">
                    <TextBlock.Text>
                        <Binding XPath="//ComponentAttribute[Name='ColorDescription']/Values/Value" />
                    </TextBlock.Text>
                </TextBlock>
                <TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Left" Height="20" Margin="20,0,0,0" FontSize="14" Foreground="CadetBlue">
                    <TextBlock.DataContext></TextBlock.DataContext>
                    <TextBlock.Text>
                        <Binding XPath="//ComponentAttribute[Name='ColorHexCodes']/Values/Value" />
                    </TextBlock.Text>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

It renders the correct number of ListBoxItems, but is only displaying the first value in each item. Where am I going wrong? I know this has to be something really easy I'm just missing.

Answer 1

Look into the use of a Composite Collection storage which can hold both of your lists, but be used to be bound to by one listbox and handle each item type specifically.

The link to MSDN gives an example of showing two different data items in one display.