Löschen von Zeilen in WPF Datagrid mit der Schaltfläche "Löschen"

Question

Ich habe ein Datenraster in meinem WPF-Anwendungsfenster, und die Daten sind an eine beobachtbare Sammlung gebunden. Im DataGrid habe ich die Eigenschaft CanUserDeleteRows=True eingestellt und kann die Zeile durch Drücken der Entf-Taste auf der Tastatur löschen.

Das sieht für mich nicht ganz intuitiv aus. Ich möchte eine zusätzliche Spalte behalten, die eine Lösch-Schaltfläche hat, auf die gedrückt wird, um die Zeile zu löschen. (So ​​etwas wie das, was in ItemTemplate in ASP.NET getan werden)

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

Wie diese Funktionalität erhalten Zeilen zu löschen, indem eine button innerhalb des Datagrid mit sich

Answer 1

Sie können eine DataGridTemplateColumn hinzufügen, die eine Schaltfläche enthält das ruft den Befehl Delete auf. Das DataGrid behandelt den Befehl Löschen und entfernt die Zeile.

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

Answer 2

Sie müssen DataGridTemplateColumn zu Ihrem Grid hinzufügen. So etwas wie

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

binden Sie dann Ihre Taste zu einer ID oder das Element {Binding} und Sie können Ereignis in Code-behind (OnDelete) behandeln oder Sie können Taste direkt an den Befehl binden, aber dann müssen Sie binden SelecteItem zum ViewModel und mit ihm umgehen On Command ausgeführt:

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