Eliminación de filas en la cuadrícula de datos WPF utilizando el botón Eliminar

Question

Tengo una cuadrícula de datos en la ventana de mi aplicación WPF, y los datos están vinculados a una colección observable. En DataGrid, configuré la propiedad CanUserDeleteRows=True y puedo eliminar la fila presionando el botón Eliminar en el teclado.

Esto no me parece muy intuitivo. Quiero mantener una columna adicional que tenga el botón Eliminar al presionar para eliminar la fila. (Algo así como lo que se puede hacer en ItemTemplate en ASP.NET)

<DataGrid x:Name="dgrQuestions" AutoGenerateColumns="False" Height="224" HorizontalAlignment="Left" Margin="42,73,0,0" VerticalAlignment="Top" Width="663" ItemsSource="{Binding QueList}" CanUserAddRows="True" CanUserDeleteRows="True"> 
      <DataGrid.Columns>     
       <DataGridTextColumn Header="Qu" Binding="{Binding Path=Que, UpdateSourceTrigger=PropertyChanged}"/> 
       <DataGridTextColumn Header="An" Binding="{Binding Path=Ans, UpdateSourceTrigger=PropertyChanged}"/> 
       <DataGridTextColumn Header="Hi" Binding="{Binding Path=Hi, UpdateSourceTrigger=PropertyChanged}"/> 

      </DataGrid.Columns> 

¿Cómo conseguir esta funcionalidad de eliminación de filas utilizando un button dentro de la misma cuadrícula de datos

Answer 1

se puede añadir un DataGridTemplateColumn que contiene un botón que invoca el comando Delete. El DataGrid manejará el comando Eliminar y eliminará la fila.

<DataGridTemplateColumn Header="Actions" IsReadOnly="True"> 
    <DataGridTemplateColumn.CellTemplate> 
     <DataTemplate> 
      <Button Content="Remove Row" Command="Delete"/> 
     </DataTemplate> 
    </DataGridTemplateColumn.CellTemplate> 
</DataGridTemplateColumn> 

Answer 2

Deberás agregar DataGridTemplateColumn a tu grilla. Algo así como

<DataGrid x:Name="dgrQuestions" AutoGenerateColumns="False" Height="224" HorizontalAlignment="Left" Margin="42,73,0,0" VerticalAlignment="Top" Width="663" ItemsSource="{Binding QueList}" CanUserAddRows="True" CanUserDeleteRows="True"> 
      <DataGrid.Columns>     
      <DataGridTemplateColumn Header="Delete" Width="75">     
       <DataGridTemplateColumn.CellTemplate>      
        <DataTemplate>       
         <Button Content="Delete" Tag="{Binding}" Click="OnDelete"/>      
        </DataTemplate>     
       </DataGridTemplateColumn.CellTemplate>    
      </DataGridTemplateColumn> 
       <DataGridTextColumn Header="Qu" Binding="{Binding Path=Que, UpdateSourceTrigger=PropertyChanged}"/> 
       <DataGridTextColumn Header="An" Binding="{Binding Path=Ans, UpdateSourceTrigger=PropertyChanged}"/> 
       <DataGridTextColumn Header="Hi" Binding="{Binding Path=Hi, UpdateSourceTrigger=PropertyChanged}"/> 

      </DataGrid.Columns> 

A continuación, se unen a su botón para cualquier ID o elemento {Binding} y se puede manejar evento en código detrás (OnDelete) o el botón que se puede unir directamente a la orden, pero entonces tendrá que unirse Seleccione el elemento en el modelo de vista y trátelo en el comando ejecutado:

SelectedItem="{Binding SelectedItem, Mode=TwoWay}"