Редактирование в ячейках таблицы и удаление строк

Сегодня, убегая с работы, в спешке перепутал DataGrid и GridView, поэтому не смог показать, как задать шаблон для редактирования ячейки. В общем, исправляюсь и показываю. Ну и чтобы жизнь медом не казалась, пусть еще будет в каждой строке кнопка, которая будет удалять текущую строку.
Итак, задача номер раз. Сделать в таблице возможность редактирования ячейки.
Для демонстрации возьму вот такую структуру данных:

class Item

{
    public string Name { get; set; }
    public double Percent { get; set; }

    public static ObservableCollection<Item> GetItems()

    {
        ObservableCollection<Item> result = new ObservableCollection<Item>();
        result.Add(new Item() { Name = "Параметр 1", Percent = 10 });
        result.Add(new Item() { Name = "Параметр 2", Percent = 23 });
        result.Add(new Item() { Name = "Параметр 3", Percent = 15.5 });
        result.Add(new Item() { Name = "Параметр 4", Percent = 0 });
        result.Add(new Item() { Name = "Параметр 5", Percent = 56 });
        result.Add(new Item() { Name = "Параметр 6", Percent = 78 });
        return result;
    }
}
Для показа такого списка, можно воспользоваться вот таким DataGrid:

<DataGrid x:Name="dgMain" AutoGenerateColumns="False" IsReadOnly="True">

    <DataGrid.Columns>
        <DataGridTextColumn Header="Имя" Binding="{Binding Name}" Width="1*" />
        <DataGridTextColumn Header="Процент" Width="100" Binding="{Binding Percent,StringFormat={}{0}%}" />
    </DataGrid.Columns>
</DataGrid>

Ну и можем инициализировать его данными:
 

public partial class MainWindow : Window

{
    public MainWindow()
    {
        InitializeComponent();
        Loaded += MainWindow_Loaded;
    }

    void MainWindow_Loaded(object sender, RoutedEventArgs e)

    {
        dgMain.ItemsSource = Item.GetItems();
    }
}
Запускаем:

Все. Показ работает. Теперь необходимо сделать поддержку редактирования процентов. Для этого заменим TextColumn на TemplateColumn и определим для него не только шаблон показа, но и шаблон редактирования:
<DataGridTemplateColumn Header="Процент" Width="100">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Percent,StringFormat={}{0}%}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
    <DataGridTemplateColumn.CellEditingTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="auto" />
                </Grid.ColumnDefinitions>
                <TextBox Text="{Binding Percent,Mode=TwoWay}" />
                <TextBlock Grid.Column="1" Text="%" />
            </Grid>
        </DataTemplate>
    </DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

Теперь, запустив приложение и дважды кликнув на ячейке мы получим возможность редактирования:

Единственная проблема, которая здесь раздражает, это необходимость двойного клика, чтобы перейти к редактированию. Давайте изменим эту прискорбную ситуацию.
Для этого, установим значение двух свойств и подпишемся на изменение выбранной ячейки у нашего DataGrid:

<DataGrid x:Name="dgMain" AutoGenerateColumns="False" CanUserAddRows="False" SelectionMode="Extended" SelectionUnit="Cell" SelectedCellsChanged="dgMain_SelectedCellsChanged_1">

Обработчик будет иметь вид:

private void dgMain_SelectedCellsChanged_1(object sender, SelectedCellsChangedEventArgs e)

{
    if (e.AddedCells.Count == 0) return;
    var currentCell = e.AddedCells[0];
    if (currentCell.Column ==
        dgMain.Columns[1])
    {
        dgMain.BeginEdit();
    }
}

Все, теперь редактирование будет начинаться по одиночному клику.

Ну и вторая задача, с необходимостью удалить элемент из списка. Для этого, немного изменим код главной формы, добавив свойство, которое будет содержать нашу коллекцию, свойство команды, метод удаления и класс реализующий команду:

public partial class MainWindow : Window

{
    public MainWindow()
    {
        InitializeComponent();
        Items = Item.GetItems();
        DeleteCommand = new MyCommand() { Collection = Items };
    }

    class MyCommand : ICommand

    {
        public ObservableCollection<Item> Collection { get; set; }

        public bool CanExecute(object parameter)

        {
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)

        {
            Collection.Remove(parameter as Item);
        }
    }

    public ObservableCollection<Item> Items

    {
        get { return (ObservableCollection<Item>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }

    // Using a DependencyProperty as the backing store for Items.  This enables animation, styling, binding, etc...

    public static readonly DependencyProperty ItemsProperty =

        DependencyProperty.Register("Items", typeof(ObservableCollection<Item>), typeof(MainWindow), new PropertyMetadata(null));

 

    public ICommand DeleteCommand

    {
        get { return (ICommand)GetValue(DeleteCommandProperty); }
        set { SetValue(DeleteCommandProperty, value); }
    }
 
    // Using a DependencyProperty as the backing store for DeleteCommand.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty DeleteCommandProperty =
        DependencyProperty.Register("DeleteCommand", typeof(ICommand), typeof(MainWindow), new PropertyMetadata(null));

    private void dgMain_SelectedCellsChanged_1(object sender, SelectedCellsChangedEventArgs e)

    {
        if (e.AddedCells.Count == 0) return;
        var currentCell = e.AddedCells[0];
        if (currentCell.Column ==
            dgMain.Columns[1])
        {
            dgMain.BeginEdit();
        }
    }
}

Добавляем новый столбец, в который помещаем кнопки привязанную к команде:
 

<DataGridTemplateColumn Width="30">

    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Button Content="Х" Command="{Binding Path=DeleteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding}" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Единственной проблемой этого решения, условно можно считать наличие заголовка столбца над кнопками:

Но ведь это же WPF, давайте зададим стиль заголовка таким, чтобы его не было видно на белом фоне:
<DataGridTemplateColumn.HeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}" >
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="BorderBrush" Value="White"></Setter>
        <Setter Property="BorderThickness" Value="1"></Setter>
    </Style>
</DataGridTemplateColumn.HeaderStyle>

Теперь DataGrid выглядит так:

Мелочь конечно, но приятно.

На сегодня все, единственно, я приведу полную разметку DataGrid, вдруг выше чего забыл:

<DataGrid x:Name="dgMain" AutoGenerateColumns="False" CanUserAddRows="False" Margin="5"

            SelectionMode="Extended" SelectionUnit="Cell" SelectedCellsChanged="dgMain_SelectedCellsChanged_1"
            ItemsSource="{Binding Path=Items, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Имя" Binding="{Binding Name}" Width="1*" />
        <DataGridTemplateColumn Header="Процент" Width="100">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Percent,StringFormat={}{0}%}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="auto" />
                        </Grid.ColumnDefinitions>
                        <TextBox Text="{Binding Percent,Mode=TwoWay}" />
                        <TextBlock Grid.Column="1" Text="%" />
                    </Grid>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Width="30">
            <DataGridTemplateColumn.HeaderStyle>
                <Style TargetType="{x:Type DataGridColumnHeader}" >
                    <Setter Property="Background" Value="White"></Setter>
                    <Setter Property="Foreground" Value="White"></Setter>
                    <Setter Property="BorderBrush" Value="White"></Setter>
                    <Setter Property="BorderThickness" Value="1"></Setter>
                </Style>
            </DataGridTemplateColumn.HeaderStyle>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="Х" Command="{Binding Path=DeleteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding}" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>