Ajout d'une zone de sélection dans ItemsControl?

Question

J'ai un WPF ItemsControl avec un ItemPanel Canvas. Dessiner à partir d'une source interne, il affiche beaucoup de rectangles générés automatiquement.

A partir de maintenant, il ressemble à ceci:

<Window  
// .. NameSpaces 
    > 
    <Window.Resources> 
    <DataTemplate x:Key="binTemplate"> 
     <Rectangle x:Name="Rect" VerticalAlignment="Bottom" 
       Canvas.Left="10" StrokeThickness="0"> 
     // .. Databinding Height, Width, etc 
     </Rectangle> 
    </DataTemplate> 
    </Window.Resources> 
    <DockPanel x:Name="LayoutRoot" LastChildFill="True"> 
     <ItemsControl 
      ItemsSource="{Binding Bins}" 
      ItemTemplate="{StaticResource binTemplate}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
      <Canvas MouseDown="Canvas_MouseDown" MouseMove="Canvas_MouseMove" MouseUp="Canvas_MouseUp"> 
       <Rectangle x:Name="Selection" Canvas.Left="0" Canvas.Top="0" Visibility="Hidden" /> 
      </Canvas> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     </ItemsControl> 
    </DockPanel> 
</Window> 

J'essaie maintenant de mettre en œuvre une boîte de sélection aussi .. bien .. sélectionner mes Rectangles. =) J'ai essayé d'ajouter simplement la boîte dans le PanelTemplate ItemsControl, et de la contrôler avec les événements de la souris Canvas, mais il semble que je ne suis pas autorisé à le faire. Le message d'erreur est "Impossible de modifier explicitement la collection Children de Panel utilisée en tant que ItemsPanel pour ItemsControl. ItemsControl génère des éléments enfants pour Panel."

Quelle est la meilleure façon d'implémenter un tel comportement? J'ai pensé à superposer une autre toile (en utilisant Margin négatif) et à dessiner la boîte de sélection, mais cela semble être un mauvais hack.

Merci d'avance!

Answer 1

Plutôt que d'ajouter la zone de sélection au Canvas, vous devez l'ajouter en tant que Adorner au-dessus du Canvas. Pour récupérer le AdornerLayer pour le Canvas, vous pouvez utiliser la méthode AdornerLayer.GetAdornerLayer ou envelopper le Canvas dans un AdornerDecorator et utiliser sa propriété AdornerLayer.