Question

I’ve a ListView bound to an ObservableCollection<Foo>. On selecting a ListViewItem I display the details of the SelectedItem(Foo members) in a container. It works fine.

Now all I want is to display the details just next to the SelectedItem. ie, If I select the fourth ListViewItem then the Container’s Top should be the same as the ListViewItem’s Top. How would I sync their position provided it should create any problem even while scrolling the List.

P.S: Scrollbars are hidden

This question is not yet resolved. Can anybody help?

Answer 1

Original Answer

Does the detail need to be in a separate container? I may be misunderstanding your example, but I would have thought you could achieve what you wanted by adding the details section to the item template for your list items and then hiding/showing it based on the IsSelected flag:

<ListView ItemsSource="{Binding}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <DockPanel>
                    <ContentControl DockPanel.Dock="Right" Name="DetailsControl" Content="{Binding}" ContentTemplate="{StaticResource DetailsTemplate}" />
                    <TextBlock Text="{Binding}" />
                </DockPanel>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="False">
                        <Setter TargetName="DetailsControl" Property="Visibility" Value="Hidden" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Even if you aren’t after exactly this behaviour, I imagine you could get close to what you want by replacing the ContentControl from the example with something else (e.g. a Popup)

---

Edit in response to comments

The example below will place a Popup to the right hand side of the ListView that is visible only for the selected item:

<ListView ItemsSource="{Binding}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <TextBlock Text="{Binding}" />

                <Popup Placement="Right"
                        PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
                        IsOpen="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}">

                    <Border Background="Black" Padding="3">
                        <TextBlock Text="{Binding}" />
                    </Border>
                </Popup>

            </DockPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This uses the Placement attribute to specify that the Popup should appear to the right of the target element, and binds the PlacementTarget property to the first ancestor of type ListViewItem (i.e. the parent container).

This causes an appearance like the example below: