Question

In a continuation from my question here

I tried using the solution provided in the linked answer, however when I give it the image which the ListBox is binding to, it gives me the wrong position, because the Item Template is loading in a source URL rather than the actual image, and it seems the data is null.

My Item Template looks like this:

<ListBox ItemsSource="{Binding Items}"
                     HorizontalContentAlignment="Left"
                     VerticalContentAlignment="Center"  
                     ScrollViewer.VerticalScrollBarVisibility="Disabled"
                     ScrollViewer.HorizontalScrollBarVisibility="Visible" 

                     Height="64" Name="listBoxSource" 
                     VerticalAlignment="Bottom" 
                     SelectionChanged="listBoxSource_SelectionChanged" Canvas.Left="32" Canvas.Top="365" Width="596"
             >

                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                        <Image x:Name="ListImage" Source="{Binding thumbnailURL}" Height="64" Width="64"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>

            </ListBox>

How do I get access to “ListImage” for the currently selected Item?

Answer 1

Every ItemsControl has an ItemsContainerGenerator, which (surprisingly enough) is responsible for generating a control for each item in the list. It provides a few useful methods for finding the container of a given item, and vice versa. You can use it like this:

private void listBoxSource_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listBox = (ListBox) sender;
    var containerGenerator = listBox.ItemContainerGenerator;
    var container = (UIElement)containerGenerator.ContainerFromItem(listBox.SelectedItem);
}

You can then use the variable container with the solution from your other post to find the coordinates,

Point position = container.GetRelativePosition(Application.Current.RootVisual);

And on a side note, in your DataTemplate you don’t need the StackPanel, since the ListBox is providing that with its ItemsPanelTemplate.

<DataTemplate>
    <Image x:Name="ListImage" Source="{Binding thumbnailURL}" Height="64" Width="64"/>
</DataTemplate>