CODEWITHSUNDEEP
wpfxamlbindingmvvmcollections
Joe K
Joe K

Reputation: 409

Binding to individual elements in a collection

I am fairly new to MVVM, so bear with. I have a view model class that has a public property implemented as so:

public List<float> Length
{
  get;
  set;
}

In my XAML for the view, I have several text boxes, with each one bound to a specific element in this Length list:

  <TextBox Text="{Binding Length[0], Converter=DimensionConverter}" />
  <TextBox Text="{Binding Length[2], Converter=DimensionConverter}" />
  <TextBox Text="{Binding Length[4], Converter=DimensionConverter}" />

The DimensionConverter is a IValueConverter derived class that formats the values like a dimension (i.e. 480.0 inches becomes 40'0" in the text box on screen), and back again (i.e. takes 35'0" for a string and yield 420.0 inches for the source)

My issue: I need to be able to validate each value in the List as it is changed in the associated TextBox. For some, I may need to modify other values in the List depending on the entered value (i.e. change the float at Length[0] will change the value at Length[4] and update the screen).

Is there any way to re-work the property to allow for an indexer? Or, do I need to create individual properties for each item in the List (which really makes the List unnecessary)? Essentially, since I already have the collection of float, I was hoping to be able to write MVVM code to validate each item as it is modified.

Thoughts? (and, thanks in advance)

Upvotes: 3

Views: 1905

Answers (4)

punker76
punker76

Reputation: 14611

if you want validate your text input with mvvm then create a model that you can youse at your viewmodel

public class FloatClass : INotifyPropertyChanged
{
  private ICollection parentList;

  public FloatClass(float initValue, ICollection pList) {
    parentList = pList;
    this.Value = initValue;
  }

  private float value;

  public float Value {
    get { return this.value; }
    set {
      if (!Equals(value, this.Value)) {
        this.value = value;
        this.RaiseOnPropertyChanged("Value");
      }
    }
  }

  private void RaiseOnPropertyChanged(string propName) {
    var eh = this.PropertyChanged;
    if (eh != null) {
      eh(this, new PropertyChangedEventArgs(propName));
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
}

at your viewmodel you can use the model like this

public class FloatClassViewmModel : INotifyPropertyChanged
{
  public FloatClassViewmModel() {
    this.FloatClassCollection = new ObservableCollection<FloatClass>();
    foreach (var floatValue in new[]{0f,1f,2f,3f}) {
      this.FloatClassCollection.Add(new FloatClass(floatValue, this.FloatClassCollection));
    }
  }

  private ObservableCollection<FloatClass> floatClassCollection;

  public ObservableCollection<FloatClass> FloatClassCollection {
    get { return this.floatClassCollection; }
    set {
      if (!Equals(value, this.FloatClassCollection)) {
        this.floatClassCollection = value;
        this.RaiseOnPropertyChanged("FloatClassCollection");
      }
    }
  }

  private void RaiseOnPropertyChanged(string propName) {
    var eh = this.PropertyChanged;
    if (eh != null) {
      eh(this, new PropertyChangedEventArgs(propName));
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;
}

here is the xaml example

<ItemsControl ItemsSource="{Binding Path=FloatClassViewmModel.FloatClassCollection}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <TextBox Text="{Binding Value, Mode=TwoWay, Converter=DimensionConverter}" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

hope this helps

Upvotes: 1

Joy George Kunjikkuru
Joy George Kunjikkuru

Reputation: 1528

It would be great if you can have a class which implements INotifyPropertyChanged to have the properties provided the length of list is constant.

Upvotes: 1

Louis Kottmann
Louis Kottmann

Reputation: 16628

Wouldn't something like this:

    <ItemsControl ItemsSource="{Binding Length}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBox Text="{Binding Mode=TwoWay, Converter=DimensionConverter}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Be close to what you want?
It will display the entire list, and allow the user to modify the values, which will be returned straight back to the list, as long as your IValueConverter implements ConvertBack.

Then do as Thomas said to validate, or implement an ObservableLinkedList

What you do at the moment looks dirty already and it's barely a few lines of code..

Upvotes: 1

Thomas Levesque
Thomas Levesque

Reputation: 292405

You can use an ObservableCollection<float> instead of a List<float>, and handle the CollectionChanged event to detect when the user changes a value.

Upvotes: 1

Related Questions