Question

I have a ListBox (with ItemTemplate defined in the XAML), and a DataGrid.
I would like to perform drag and drop operations from the DataGrid to the ListBox.
My problem is I don’t understand how to know on which ListBoxItem the dragged row has been dropped.

Does anyone have an idea ?

Thanks in advance.

Edit: Here is the ListBox’s XAML:

<toolkit:DockPanel Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Width="200">
            <toolkit:ListBoxDragDropTarget Name="dropTarget1"  AllowDrop="True" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" AllowedSourceEffects="Move">
                <ListBox Name="lbClusters">

                    <!-- Override default HorizontalContentAlignment -->
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <!-- Override default presentation panel (to be able to organize) -->
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <!--  Items presentation -->
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" BorderThickness="1" Margin="5">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition />
                                        <RowDefinition />
                                    </Grid.RowDefinitions>

                                    <Border Background="Gray" Padding="10,5,0,5" Grid.Row="0" >
                                        <TextBlock Text="{Binding Name}" HorizontalAlignment="Stretch" />
                                    </Border>
                                    <ListBox ItemsSource="{Binding MatchingProcessors}" DisplayMemberPath="Name" Grid.Row="1" MinHeight="100" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </toolkit:ListBoxDragDropTarget>
        </toolkit:DockPanel>

And here is the DataGrid:

<toolkit:DataGridDragDropTarget VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch">

                <sdk:DataGrid Name="Grid1" SelectionChanged="Grid_SelectionChanged" AutoGenerateColumns="False">
                    <sdk:DataGrid.Columns>
                        <sdk:DataGridTextColumn Binding="{Binding Configuration.Nickname}" Header="NickName" />
                        <sdk:DataGridTextColumn Binding="{Binding SerialNumber}" Header="SN" />
                        <sdk:DataGridTextColumn Binding="{Binding ComputerName}" Header="IPHostname"/>
                        <sdk:DataGridTextColumn Binding="{Binding Configuration.GroupName}" Header="Group" />
                    </sdk:DataGrid.Columns>
                </sdk:DataGrid>

            </toolkit:DataGridDragDropTarget>

Answer 1

Ok here is what I did… Maybe there is a better solution ? But this one seems to fit what I need.

I changed my ListBox.ItemTemplate to add 2 events: MouseEnter and MouseLeave on the Grid:

<ListBox.ItemTemplate>
<DataTemplate>
    <Border BorderBrush="Black" BorderThickness="1" Margin="5">
        <Grid MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave">
            <Grid.RowDefinitions>                                            
                <RowDefinition />                                            
                <RowDefinition />
            </Grid.RowDefinitions>

            <Border Background="Gray" Padding="10,5,0,5" Grid.Row="0" >
                <TextBlock Text="{Binding Name, Mode=TwoWay}" HorizontalAlignment="Stretch" />
            </Border>
            <ListBox ItemsSource="{Binding MatchingProcessors, Mode=TwoWay}" DisplayMemberPath="SerialNumber" Grid.Row="1" MinHeight="100" />
        </Grid>
    </Border>
</DataTemplate>
</ListBox.ItemTemplate>

Then in the code I implemented thos events, and keep a reference to the hovered element in the ListBox.

    private ListBoxItem currentListBoxItem = null;

    private void Grid_MouseEnter(object sender, MouseEventArgs e)
    {
        List<UIElement> list = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(null), LayoutRoot as UIElement) as List<UIElement>;
        var tmp = list.OfType<ListBoxItem>().Where(el => el.DataContext != null && el.DataContext is MyType).FirstOrDefault();

        if (tmp != null)
        {
            this.currentListBoxItem = tmp;
        }
    }

    private void Grid_MouseLeave(object sender, MouseEventArgs e)
    {
        this.currentListBoxItem = null;
    }