WPF MVVM：如何在UI中反映ObservableCollection的更改

Question

I am relatively new in WPF and am trying to understand the MVVM pattern and how data-binding works with ObservableCollection, in order to build the application I am working on with MVVM. I have created a sample of my application that has a MainWindow where, depending on which button the user presses, a different View (UserControl) is displayed. The general idea is that the user will have access to the data of some elements from a database (eg: Customers, Products, etc.) and will be able to add new and edit, or delete, existing ones.

So, there is a CustomerView , with its CustomerViewModel, and a ProductView , with its ProductViewModel respectively. Also, there are two classes (Customer.cs & Product.cs) that represent the Models. The structure of the project is displayed here .

The MainWindow.xaml is as follows:

<Window.Resources>
    <DataTemplate DataType="{x:Type viewModels:CustomerViewModel}">
        <views:CustomerView DataContext="{Binding}"/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type viewModels:ProductViewModel}">
        <views:ProductView DataContext="{Binding}"/>
    </DataTemplate>
</Window.Resources>

<Grid >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20*"/>
        <ColumnDefinition Width="80*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="btnCustomers" Click="btnCustomers_Click" Content="Customers" Width="80" Height="50" Margin="10"/>
        <Button x:Name="btnProducts" Click="btnProducts_Click" Content="Products" Width="80" Height="50" Margin="10"/>
    </StackPanel>

    <Grid Grid.Column="1">
        <ContentControl Grid.Column="0" Content="{Binding}"/>
    </Grid>
</Grid>

and the code behind MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public CustomerViewModel customerVM;
    public ProductViewModel productVM;

    public MainWindow()
    {
        InitializeComponent();
    }

    private void btnCustomers_Click(object sender, RoutedEventArgs e)
    {
        if (customerVM == null)
        {
            customerVM = new CustomerViewModel();
        }
        this.DataContext = customerVM;
    }

    private void btnProducts_Click(object sender, RoutedEventArgs e)
    {
        if (productVM == null)
        {
            productVM = new ProductViewModel();
        }
        this.DataContext = productVM;
    }
}

Finally, the CustomerView.xaml is as follows:

<UserControl.Resources>
    <viewModel:CustomerViewModel x:Key="customerVM"/>
    <!-- Styling code here...-->
</UserControl.Resources>

<Grid DataContext="{StaticResource ResourceKey=customerVM}">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="7*"/>
        <RowDefinition Height="3*"/>
    </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <TextBlock Text="Customers" FontSize="18"/>
    </Grid>

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*"/>
            <ColumnDefinition Width="5*"/>
        </Grid.ColumnDefinitions>

        <ComboBox x:Name="cmbCustomers" Grid.Column="0" VerticalAlignment="Top"
                  IsEditable="True"
                  Text="Select customer"
                  ItemsSource="{Binding}"
                  DisplayMemberPath="FullName" IsSynchronizedWithCurrentItem="True">
        </ComboBox>

        <StackPanel Grid.Column="1" Margin="5">
            <StackPanel Orientation="Horizontal">
                <TextBlock Grid.Column="0" Text="Id:" />
                <TextBlock Grid.Column="1" x:Name="txtId" Text="{Binding Path=Id}" FontSize="16"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Grid.Column="0" Text="Name:" />
                <TextBlock Grid.Column="1" x:Name="txtFirstName" Text="{Binding Path=FirstName}" FontSize="16"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Grid.Column="0" Text="Surname:" />
                <TextBlock Grid.Column="1" x:Name="txtLastName" Text="{Binding Path=LastName}" FontSize="16"/>
            </StackPanel>
        </StackPanel>
    </Grid>

    <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
        <Button x:Name="btnAddNew" Content="Add New" Click="btnAddNew_Click"/>
        <Button x:Name="btnDelete" Content="Delete Customer" Click="btnDelete_Click"/>
    </StackPanel>
</Grid>

and the CustomerViewModel.cs:

public class CustomerViewModel : ObservableCollection<Customer>
{
    public CustomerViewModel()
    {
        LoadCustomers();
    }

    private void LoadCustomers()
    {
        for (int i = 1; i <= 5; i++)
        {
            var customer = new Customer()
            {
                Id = i,
                FirstName = "Customer_" + i.ToString(),
                LastName = "Surname_" + i.ToString()
            };
            this.Add(customer);
        }
    }

    public void AddNewCustomer(int id)
    {
        var customer = new Customer()
        {
            Id = id,
            FirstName = "Customer_" + id.ToString(),
            LastName = "Surname_" + id.ToString()
        };
        Add(customer);
    }
}

Please note that the ProductView.xaml & ProductViewModel.cs are similar. Currently, when the user presses the "Customers" or the "Products" button of the MainWindow, then the respective View is displayed and the collections are loaded according to the LoadCustomers (or LoadProducts) method, which is called by the ViewModel's constructor. Also, when the user selects a different object from the ComboBox, then its properties are displayed correctly (ie Id, Name, etc.). The problem is when the user adds a new (or deletes an existing) element.

---

Question 1 : Which is the correct and best way to update a changed Observable Collection of an element and reflect its changes in the UI (Combobox, properties, etc.)?

Question 2 : During testing this project I noticed that the constructor of the ViewModels (consequently the LoadCustomers & LoadProducts method) are called twice. However, it is only called when the user presses the Customers or the Products button respectively. Is it also called via the XAML data binding? Is this the optimum implementation?

Answer 1

Your first question is basically a UX one, there is no correct or "best" way. You'll definitely end up using some sort of ItemsControl , but which one depends heavily on how you want your users to interact with it.

To your second question, you have a few mistakes in your code:

1. <viewModel:CustomerViewModel x:Key="customerVM"/> Instantiates a new view model, apart from the one that the main application created

2. Grid DataContext="{StaticResource ResourceKey=customerVM}" Then uses this "local" view model, ignoring the inherited one from the main application

That's why you see the constructor fire twice, you are constructing two instances! Eliminate the local VM and don't assign the DC on the grid. Other issues:

• <views:ProductView DataContext="{Binding}"/> The DataContext assignment is total unnecessary, by virtue of being in the data template it's data context is already set up

• <ContentControl Grid.Column="0" Content="{Binding}"/> Yuck, you should have a "MainViewModel" with a property that this uses. Don't make it be the whole data context

• Lack of commands for your button clicks (related to the bullet above)

Answer 2

There is 3 kinds of Change Notification you need with Lists in MVVM:

1. Change Notificataions on every property of the list items.
2. Change Notification on the property exposing the list, in case the whole instance has to be replaced (wich is common because of 3)
3. Change Notification if elements are added to or removed from the collection. That is the only thing ObservableCollection takes care off. Unfortunately there is no Addrange option, so bulk operations wil lsmwap the GUI with Notifications. That is what Nr. 2 is there for.

As advanced option, consider exposing the CollectionView rather then the raw Collection. WPF GUI elements do not bind to raw Collections, only CollectionViews. But if you do not hand them one, they will create one themself.