Affichage des détails de l'élément sélectionné sur son côté

Question

J'ai un ListView lié à un ObservableCollection<Foo>. En sélectionnant un ListViewItem, j'affiche les détails de SelectedItem (membres Foo) dans un conteneur. Ça fonctionne bien. Maintenant, tout ce que je veux, c'est afficher les détails juste à côté de SelectedItem. Par exemple, si je sélectionne le quatrième ListViewItem alors le Top du conteneur devrait être le même que le TopView de ListViewItem. Comment pourrais-je synchroniser leur position à condition que cela crée un problème même en faisant défiler la liste.

P.S: Les barres de défilement sont cachés

Cette question n'a pas encore été résolu. Quelqu'un peut-il aider?

Answer 1

Réponse originale

Est-ce que les détails doivent être dans un récipient séparé? Je peux être mal compris votre exemple, mais je l'aurais pensé que vous pourriez obtenir ce que vous vouliez en ajoutant la section des détails du modèle d'élément pour vos éléments de liste, puis cacher/montrer basé sur le drapeau IsSelected:

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

même si vous n'êtes pas après exactement ce comportement, je suppose que vous pourriez se rapprocher de ce que vous voulez en remplaçant le ContentControl de l'exemple avec quelque chose d'autre (par exemple un Popup)

---

Modifier en réponse aux commentaires

L'exemple ci-dessous, vous effectuerez une Popup au côté droit de la ListView qui est visible uniquement pour l'élément sélectionné:

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

Il utilise l'attribut Placement pour spécifier que le Popup doit apparaître à droite de la élément cible et lie la propriété PlacementTarget au premier ancêtre de type ListViewItem (c'est-à-dire le conteneur parent).

Cela provoque une apparition comme dans l'exemple ci-dessous: