wpf Datagrid :Position Listview when Datagridcell textchange

Question

I want to position a Listview when the Datagridcell text change .My datagrid has a column namely Product, when the user type something on that column a small listview popup with Products hence the user can select one product from the listview and the product is displayed on the datagrid's Product column .My problem is that I can't position the Listview near the cell which I edit.

My XAML is :

<!--My datagrid-->
<my:DataGrid Name="dgvSales" BeginningEdit="dgvSales_BeginningEdit" VirtualizingStackPanel.IsVirtualizing="False" AutoGenerateColumns="False" Margin="13,150,9,117" KeyDown="dgvSales_KeyDown" MouseDown="dgvSales_MouseDown" PreparingCellForEdit="dgvSales_PreparingCellForEdit" >
                    <my:DataGrid.Columns>
                        <my:DataGridTextColumn x:Name="naam" Header="Code" Width="120" Binding="{Binding ProductCode}"></my:DataGridTextColumn>
                        <my:DataGridTextColumn Header="Product Name" Width="200" Binding="{Binding ProductName}"></my:DataGridTextColumn>
                        <my:DataGridComboBoxColumn Header="Unit" Width="100"></my:DataGridComboBoxColumn>
                        <my:DataGridTextColumn Header="Purchase Rate" Width="100" Binding="{Binding PurchaseRate}"></my:DataGridTextColumn>
                        <my:DataGridTextColumn Header="Qty" Width="100" Binding="{Binding Qty}"></my:DataGridTextColumn>
                        <my:DataGridTextColumn Header="Amount" Width="100" Binding="{Binding Amount}"></my:DataGridTextColumn>
                    </my:DataGrid.Columns>
                </my:DataGrid>

<!--My listview-->
<ListView Height="161" ItemsSource="{Binding}" Name="lstvwProductCode" VerticalAlignment="Bottom"  Width="388">
                    <ListView.View>
                        <GridView>
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Record_Id}" Header="Record ID" Width="0" />
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Product_Code}" Header="Pcode" Width="110" />
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Product_Name}" Header="Product" Width="180" />
                        </GridView>
                    </ListView.View>
                </ListView>

Answer 1

Why dont you put your Listview in RowDetailsTemplate of your DataGrid and set the bindings accordingly to populate the listview.

            <DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <ListView Height="161" ItemsSource="{Binding}" Name="lstvwProductCode" VerticalAlignment="Bottom"  Width="388">
                    <ListView.View>
                        <GridView>
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Record_Id}" Header="Record ID" Width="0" />
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Product_Code}" Header="Pcode" Width="110" />
                            <GridViewColumn DisplayMemberBinding="{Binding Path=Product_Name}" Header="Product" Width="180" />
                        </GridView>
                    </ListView.View>
                </ListView>
                </DataTemplate>
            </DataGrid.RowDetailsTemplate>