MVVM DataBinding

Question

I've started an MVVM project and now I'm stucking with correct DataBinding. My project has:

A UserControl whit a ViewModel as DataContext like:

public partial class TestUserControl: UserControl
{
   public TestUserControl()
   {
       this.DataContext = new TestUserControlViewModel();
   }
}

ViewModel code is (BaseViewModel class contains PropertyChangedEventHandler):

public class TestUserControlViewModel : BaseViewModel
{
   public KrankenkasseControlViewModel()
   {}

   public IEnumerable<DataItem> GetAllData
   {
      get
      {
          IGetTheData src= new DataRepository();
          return src.GetData();
      }
   }
}

IGetTheData is the interface to DataContext:

public interface IGetTheData
{
   IEnumerable<DataItem> GetData();
}

}

and finally the DataRepository code:

public class DataRepository : IGetTheData
{
   private TestProjectDataContext dax = new TestProjectDataContext();

   public IEnumerable<DataItem> GetData()
   {
       return (from d in this.dax.TestData
               select new DataItem
               {
                  ID = d.ID,
                  SomeOtherData = d.SomeOtherData
               });
   }
}

My UserControl has a few TextBoxes, but what's the best way to bind correctly?

Thanks for your help, regards.

Answer 1

EDIT: Binding the data against multiple textboxes

After reading your comment, I will elaborate my example for textboxes.

First important thing is that the ViewModel will model the things in the View, so that the View gets all information it needs in the structure it needs. That means, if you have multiple textboses in the View, you will need multiple string Properties in your ViewModel, one for each textbox.

In your XAML you could have something like

<TextBox Text="{Binding ID, Mode=TwoWay}" />
<TextBox Text="{Binding SomeOtherData, Mode=TwoWay}" />

and in your ViewModel

public class TestUserControlViewModel : BaseViewModel {
    private string id;
    private string someOtherData;

    public TestUserControlViewModel() {
        DataItem firstItem = new DataRepository().GetData().First();
        this.ID = firstItem.ID;
        this.SomeOtherData = firstItem.SomeOtherData;
    }

    public string ID {
        get {
            return this.id;
        }
        set {
            if (this.id == value) return;
            this.id = value;
            this.OnPropertyChangedEvent("ID");
        }
    }

    public string SomeOtherData {
        get {
            return this.someOtherData;
        }
        set {
            if (this.someOtherData == value) return;
            this.someOtherData = value;
            this.OnPropertyChangedEvent("SomeOtherData");
        }
    }
}

Here I assume that in your BaseViewModel there is an OnPropertyChangedEvent method to fire the corresponding event. This tells the View that the property has changed and it must update itself.

Note the Mode=TwoWay in the XAML. This means, that it doesn't matter on which side the value changes, the other side will reflect the change immediately. So if the user changes a value in a TwoWay bound TextBox, then the corresponding ViewModel property will automatically change! And also vice versa: if you change the ViewModel property programmatically, the View will refresh.

If you want to show multiple textboxes for more than one data item, then you must introduce more Properties in the ViewModel and bind them accordingly. Maybe a ListBox with a flexible number of TextBoxes inside is a solution then, like @Haspemulator already answered.

Binding the data against a collection control

In the TestUserControl I guess you have a control (like a ListView) to show the list of loaded things. So bind that control against the list in the ViewModel with

<ListView ... ItemsSource="{Binding GetAllData}" ... />

First you must understand that Binding means not "read the data and then forget the ViewModel". Instead you bind the View to the ViewModel (and its Properties) as long as the View lasts. From this point of view, AllData is a much better name than GetAllData (thanks @Malcolm O'Hare).

Now in your code, every time the View reads the AllData property, a new DataRepository is created. Because of the Binding, that is not what you want, instead you want to have one instance of DataRepository for the whole lifetime of the View, which is used to read the initial data and can later be used to update the View, if the underlying database changes (maybe with an event).

To enable such a behavior you should change the type of the AllData property to an ObservableCollection, so that the View can automatically update the list if changes occur.

public class TestUserControlViewModel : BaseViewModel
    private ObservableCollection<DataItem> allData;

    public TestUserControlViewModel() {
         IGetTheData src = new DataRepository();
         this.allData = new ObservableCollection<DataItem>(src.GetData());
    }

    public ObservableCollection<DataItem> AllData {
        get {
            return this.allData;
        }
    }

    public void AddDataItem(DataItem item) {
        this.allData.Add(item);
    }
}

Now if you call AddDataItem later, the ListView will update itself automatically.

Answer 2

Your Property Name is bad. You should call it AllData, not GetAllData.

Since you are returning a collection, you probably should be using some sort of list control (ListBox, ListView).

In that case you'd be doing

<ListBox ItemsSource="{Binding GetAllData}" />

Answer 3

Guten Abend. :) As it already mentioned, since you're returning the collection, it's better to use a ListBox. The comment about having ObservableCollection as a cache is also absolutely valid. I would add that if you need to have your data editable, you should use TextBox inside the ItemTemplate:

<ListBox.ItemTemplate>
    <DataTemplate>
        <TextBox Text={Binding SomeOtherData,Mode=TwoWay} />
    </DataTemplate>
</ListBox.ItemTemplate>

In this case if user edits the text in the box, data will be updated in your data object, so that it could be saved in the database later.