C# MVVM: Edit a SelectedItem of an ObservableCollection with a RelayCommand

Question

I am quiet new to programming and am currently learning C# and the MVVMC pattern (which is I think basically the same as MVVM pattern).

I need to code a database tool for ChiliPlants for university. There you should be able to edit an existing item from an ObservableCollection.

This ObservableCollection I displayed in a DataGrid, see this: DataGrid Below the DataGrid there are three buttons: Add, Edit and Delete. I was able to programm the AddButton, aswell as the DeleteButton.

Unfortunately I don't know how to programm the EditButton. It should open a new window, where the SelectedItem should be opened like this: EditWindow

Until now my EditButton does the same thing as my AddButton.

See my code here:

View:

<StackPanel Grid.Row="1" Orientation="Horizontal">
        <Button Content="Add" Margin="5,5,0,5" Width="100" Command="{Binding AddCommand}" />
        <Button Content="Edit" Margin="5,5,0,5" Width="100" Command="{Binding EditCommand}" />
        <Button Content="Delete" Margin="5,5,540,5" Width="100" Command="{Binding DeleteCommand}" />
        <Button Content="Sichern" Margin="5,5,5,5" Width="100" Command="{Binding SaveCommand}" />
</StackPanel>

ViewModel:

    private ICommand _editCommand;

    public ICommand EditCommand
    {
        get { return _editCommand; }
        set { _editCommand = value; }
    }

Controller:

public void SDInitialize()                                          
    {
        var view = new WindowStammdatenverwaltung();

        mViewModel = new WindowStammdatenverwaltungViewModel
        {
            EditCommand = new RelayCommand(EditCommandExecute, EditCommandCanExecute)
        };
        view.DataContext = mViewModel;
        view.ShowDialog();
    }

private void EditCommandExecute(object obj)
    {
        var editedObject = new WindowEditController().EditChiliModel();
        if (editedObject != null)
        {
            mViewModel.Stock.Add(mViewModel.SelectedChili);
        }
    }

private bool EditCommandCanExecute(object obj)
    {
        return mViewModel.SelectedChili != null;
    }

The problem is with the EditCommandExecute. Currently I have just put the Code for an AddCommandExecute in there. I unfortunately don't know how to code such an EditCommandExecute.

My WindowEditController looks like this:

public class WindowEditController
{
    WindowEdit mView;

    public ChiliModel EditChiliModel()
    {
        mView = new WindowEdit();
        WindowEditViewModel mViewModel = new WindowEditViewModel
        {
            ChiliModel = new ChiliModel(),
            OkCommand = new RelayCommand(ExecuteOkCommand),
            CancelCommand = new RelayCommand(ExecuteCancelCommand),
        };
        mView.DataContext = mViewModel;
        if (mView.ShowDialog() == true)
        {
            return mViewModel.ChiliModel;
        }
        else
        {
            return null;
        }
    }

    private void ExecuteOkCommand(object obj)
    {
        mView.DialogResult = true;
        mView.Close();
    }

    private void ExecuteCancelCommand(object obj)
    {
        mView.DialogResult = false;
        mView.Close();
    }

I know, that I could let the user edit the SelectedItem inside the DataGrid, but this is not allowed in my task...

Could I maybe use the same window as for my AddCommand? Basically they should look the same, the EditWindow should just already contain the information of the SelectedItem.

I looked up almost every entry similar to this topic, but I did not find a simple solution. Or a solution which I was able to understand with my bad coding skills :( ...

I would be very happy if you guys could help me. Please keep it simple for this newbie :)

What I already tried:

I tried to add a CommandParameter to my Button looking like this: CommandParameter="{Binding SelectedItem, ElementName=StockDataGrid}" But this still didn't open the window containing the data of the SelectedItem. It just opened a completely new Window for a new Item.

Answer 1

Use CommandParameter just after the Command property, and bind it to the SelectedItem of the DataGrid .

For example, suppose that you DataGrid has the attribute Name=MyDataGrid .

The Button becomes:

<Button Content="Edit"
        Margin="5,5,0,5"
        Width="100"
        Command="{Binding EditCommand}"
        CommandParameter="{Binding SelectedItem, ElementName=MyDataGrid}"/>

When EditCommandExecute(object obj) is executed, obj is actually the current SelectedItem that you want.