数据绑定/设置源到我的DataGrid [WPF]的正确方法是什么

Question

I'm begginer at wpf so please be patient with me :)

I have stored 40.000 articles in MySql database, and when I click on a button I'm opening a window that loads that articles, and I did it on this way:

/// <summary>
/// Interaction logic
/// </summary>
public partial class ArticlesAdd : Window
{ 
   public ObservableCollection<MyArticles> articlesList = ObservableCollection<MyArticles>(ArticlesController.SelectAll());

   public ArticlesAdd()
   {
      this.InitializeComponent();

      // Setting source to my DATAGRID when this window is loaded/opened

      dataGridMyArticles.ItemsSource = articlesList;
    }
}

But I saw some examples are setting ItemsSource directly on DataGrid Control like this (IN XAML PART):

<DataGrid Name="dataGridMyArticles" ItemsSource="{Binding Source=articlesList}"  AutoGenerateColumns="False">

But I don't know how this works and how this should be implemented because I'm using dataGridMyArticles.ItemsSource = articlesList;

Is that ItemsSource="{Binding Source=articlesList}" on a XAML side faster than my code behind binding ?

and would it IsAsync=True make data binding faster/opens window faster or smth like that?

So how can I bind that list to my DataGrid without using code behind, and is that approach faster than setting DataGrid's source there in my Class constructor.. ?

Thanks guys Cheers

Answer 1

Binding an element in a view to a source property of a view model is common practice when you follow the Model-View-ViewModel (MVVM) design pattern . MVVM has nothing to do with performance but it is the recommended design pattern to use when developing XAML based UI applications.

It won't make your application faster, but if you do it right it will make the application easier to maintain, test and develop. You can read more about the motivations for implementing an application using MVVM pattern on MSDN: https://msdn.microsoft.com/en-us/library/hh848246.aspx . There are a lot more resources available online if your Google or Bing for it.

In your particular example, you would define a view model class which holds the list of articles:

public class ArticlesViewModel
{
    public ObservableCollection<MyArticles> ArticlesList { get; private set; }

    public ArticlesViewModel()
    {
        ArticlesList = ObservableCollection<MyArticles>(ArticlesController.SelectAll());
    }
}

Set the DataContext of the view to an instance of this class:

public partial class ArticlesAdd : Window
{
    public ArticlesAdd()
    {
        this.InitializeComponent();
        DataContext = new ArticlesViewModel();
    }
}

You can then bind to any public property of the DataContext /view model:

<DataGrid Name="dataGridMyArticles" ItemsSource="{Binding Source=ArticlesList}" AutoGenerateColumns="False">

You probably also want to call the ArticlesController.SelectAll() method on a background in order to prevent the UI from freezing during the time it takes to collect the data from the database, but that's another story that is not directly related to MVVM and the use of bindings.