DataGrid data binding and MVVM in WPF

Question

A WPF application with a Window containing a DataGrid, trying to implement the MVVM architecture. There is a single Model class:

public class Book
{
    public int id {get; set;}
    public string title {get; set;}
    public string isbn {get; set;}
}

This is the ViewModel:

class BookViewModel
{
    public ObservableCollection<Book> Books;

    public BookViewModel()
    {
        Books = new ObservableCollection<Book>();

        // TODO: execute LoadData comand
    }
}

A partial snippet of XAML code for markup for the View, which consists of a single Window:

<Window.CommandBindings>
    <CommandBinding Command="self:CustomCommands.LoadData" CanExecute="LoadDataCommand_CanExecute" Executed="LoadDataCommand_Executed"/>
</Window.CommandBindings>

<DataGrid Name="BooksDataGrid>
    <DataGrid.Columns>
        <DataGridTextColumn Header="Title" Width="200" Binding="{Binding title}"/>
        <DataGridTextColumn Header="isbn" Width="200" Binding="{Binding isbn}"/>
    </DataGrid.Columns>
</DataGrid>

The code behind for the View above:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // TODO: execute LoadData command
    }

    private void LoadDataCommand_CanExecute(object sender, CanExecuteRoutedEventArgs args)
    {
        args.CanExecute = true;
    }

    private void LoadDataCommand_Executed(object sender, ExecutedRoutedEventArgs args)
    {
       // TODO: ask the model for the data
    }
}

public static class CustomCommands
{
    public static readonly RoutedUICommand LoadData = new RoutedUICommand
        (
            "LoadData",
            "LoadData",
            typeof(CustomCommands),
            new InputGestureCollection()
            {
                // allow Ctrl+L to perform this command
                new KeyGesture(Key.L, ModifierKeys.Control)
            }
        );
}

The codebehind for App.xaml:

public partial class App : Application
{
    [STAThread()]
    public static void Main()
    {
        App app = new App();
        app.InitializeComponent();
        app.Run();
    }

    // bind application and show main window on startup
    // data context is default source of bindings
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);

        View.MainWindow mainWin = new View.MainWindow();
        ViewModel.BookViewModel bookViewModel = new ViewModel.BookViewModel();
        mainWin.DataContext = bookViewModel;
        mainWin.Show();
    }
}

I am transitioning from WinForms to WPF, and find certain aspects of WPF confusing. What is trying to be achieved, and the problems faced, are as follows:

the LoadData command should clean the GridView, then fill it again from a database. The database connection has already been implemented. So far, I can't see how to get the databinding working.
the LoadData command should be executed from both a menu and button (already implemented).
the LoadData command should be executed when the application starts. This is so the DataGrid would be filled when it starts.

Why are you writing code in `Window` code behind instead of view model? — Pavel Anikhouski, Jun 08 '20 at 08:13

score 3 · Accepted Answer · answered Jun 08 '20 at 17:16

step one: you created a window, its view model and connected them via DataContext. Already done

View.MainWindow mainWin = new View.MainWindow();
ViewModel.BookViewModel bookViewModel = new ViewModel.BookViewModel();
mainWin.DataContext = bookViewModel;

step two: fix (add) binding in xaml:

<DataGrid Name="BooksDataGrid" ItemsSource="{Binding Books}">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Title" Width="200" Binding="{Binding title}"/>
        <DataGridTextColumn Header="isbn" Width="200" Binding="{Binding isbn}"/>
    </DataGrid.Columns>
</DataGrid>

step three: fix view model for Binding to work - Binding works with properties:

class BookViewModel
{
    public ObservableCollection<Book> Books { get; private set; }

    public BookViewModel()
    {
        Books = new ObservableCollection<Book>();
    }
}

step four: implement load data method in the view model amd call it from command, and after mainWin.Show(); to load initial data

Most helpful answer. The problem was the `ObservableCollection` was not a property. — Al2110, Jun 09 '20 at 08:29

score 0 · Answer 2 · answered Jun 08 '20 at 09:05

You shouldn't have much code in the code-behind of the window, other than initializing the component and setting the data context.

public MainWindow()
{
   IntializeComponent();
   DataContext = new BookViewModel();
}

and your loadData command would be implemented in the BookViewModel

private bool _canLoadDataExecute;
private ICommand _loadDataCommand;
public Icommand LoadDataCommand => _loadDataCommand ?? _loadDataCommand = new RelayCommand((obj) => LoadDataCommand = LoadData(), canLoadDataExecute);

public void LoadData()
{
}

For the code above to work you would also need to implement RelayCommand.cs, code for this can be found here : Full implementation of Relay Command - can it be applied to all cases?. Additionally, there are many other useful answers and resources online with RelayCommand implementation.

DataGrid data binding and MVVM in WPF

2 Answers2