Tag: MVVM

  • Silverlight 2: Nested user controls, data-binding and property change notification.

    The Problem:

    The parent form is in charge. This form has a view-model which has all the relevant information loaded, know which other views have been implemented, what data those view need and how and when to display and update those views. This is the master page.

    Within that page you can add user controls. These controls are discreet and reusable. They know about themselves, and any controls nested within. The values within these controls are bound to properties in a backing store (the view-model). This control does not know about it’s parent, it will just generate a notification event when the property changes. The parent must be enabled to process this event.

    A Solution:

    Start with your child control. These should function irrespective of where they are called from. For example a reusable data-grid control. In our situation, this control not only displays a collection of objects, it also dynamically sets the displayed fields in the data-grid, based on a collection of field definitions. This control has a view-model (to which the UI controls are data-bound). It also has dependency properties (which can be set by a parent class) and notification properties (which can notify the parent class of changed properties).So the ViewModel would be coded as follows:

      1:     /// 
      2:     /// Backing class for the data used within the UserControl_View
      3:     /// 
      4:     public class UserControl_ViewModel : ViewModelBase
      5:     {
      6: 
      7:         private ObservableCollection<object> _objectList;
      8:         public ObservableCollection<object> ObjectList
      9:         {
     10:             get { return _objectList;}
     11:             set
     12:             {
     13:                 _objectList = value;
     14:                 _OnPropertyChanged("ObjectList");
     15:             }
     16:         }
     17: 
     18:         private object _selectedObject;
     19:         public object SelectedObject
     20:         {
     21:             get { return _selectedObject;}
     22:             set
     23:             {
     24:                 _selectedObject;= value;
     25:                 _OnPropertyChanged("SelectedObject");
     26:             }
     27:         }
     28: 
     29:     }

    (where the ViewModelBase class takes care of the notification property interface).

    Within the UserControl_View we implement the INotifyPropertyChanged interface again, add an instance of the ViewModel class, and bind to it (We also set an event handler into the View to process the properties being changed in the ViewModel and pass these back into the respective UI dependency properties):

      1:     public partial class UserControl_View : UserControl, INotifyPropertyChanged
      2:     {
      3:         public UserControl_ViewModel ViewModel = new UserControl_ViewModel();
      4: 
      5:         public UserControl_View()
      6:         {
      7:             InitializeComponent();
      8:             this.DataContext = ViewModel;
      9: 
     10:             ViewModel.PropertyChanged += new PropertyChangedEventHandler(ViewModel_PropertyChanged);
     11:         }
     12: 
     13: 
     14:         public event PropertyChangedEventHandler PropertyChanged;
     15:         protected virtual void OnPropertyChanged(string propertyName)
     16:         {
     17:             PropertyChangedEventHandler pceh = PropertyChanged;
     18:             if (pceh != null)
     19:             {
     20:                 pceh(this, new PropertyChangedEventArgs(propertyName));
     21:             }
     22:         }
     23:     
     24:         ...
     25:     }

    The event handler for the ViewModel property changed event is as follows:

      1:         /// Watch for the property changed events in teh view model, and get the values
      2:         void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
      3:         {
      4:             if (e!=null)
      5:             {
      6:                 if (e.PropertyName == "SelectedObject")
      7:                 {
      8:                     SelectedObject = ((UserControl_ViewModel)sender).SelectedObject ;
      9:                     OnPropertyChanged("SelectedObject");
     10:                 }
     11:             }
     12:         }

    This will respond to property notification from the ViewModel, check the name of the property, set the respective dependency property on the VIew, and then raise a property notification event for the View (back to the parent).

    We then add dependency properties to the View to handle the objects being passed into the View, for example:

      1:         public ObservableCollection<object> ObjectCollection
      2:         {
      3:             get { return (ObservableCollection<object>)GetValue(ObjectCollectionProperty); }
      4:             set { SetValue(ObjectCollectionProperty, value); }
      5:         }
      6: 
      7:         /// 
      8:         /// Registration of a property container to hold the collection of objects.
      9:         /// 
     10:         /// This HAS to be a dependency property for parent controls to access this.
     11:         public static readonly DependencyProperty ObjectCollectionProperty =
     12:             DependencyProperty.Register("ObjectCollection",
     13:             typeof(ObservableCollection<object>),
     14:             typeof(UserControl_View),
     15:             new PropertyMetadata(new PropertyChangedCallback(ObjectCollectionChanged)));
     16: 
     17:         /// this method is called from the static DependencyProperty "ObjectCollectionProperty"
     18:         /// by the 4th argument as the PropertyMetadata callback value.
     19:         /// This sets the items in the datagrid
     20:         public static void ObjectCollectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
     21:         {
     22:             CaseDataGrid instance = d as CaseDataGrid;
     23:             if (instance != null)
     24:             {
     25:                 if (args.NewValue != null)
     26:                 {
     27:                     instance.ViewModel.ObjectCollection = args.NewValue as ObservableCollection<object> ;
     28:                 }
     29:             }
     30:         }

    Once all the DP’s for the View have been added you are complete with the control. Next you will look at the middle layer.

    Conceptually the middle layer works in exactly the same way as the child layer.

    • A ViewModel is used to maintain and bind data.
    • Notification properties are used from the ViewModel to the View
    • Notification properties are used from the View to any parents.
    • Dependency properties are registered in the view, to accept incoming data from a parent .
    • PropertyChangedCallback methods are used to set the properties on the child controls:

        1:         public static void ObjectCollectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs args)
        2:         {
        3:             ChildControl instance = (ChildControl)d;
        4:             if (instance != null)
        5:             {
        6:                 if (args.NewValue != null)
        7:                 {
        8:                     ObservableCollection<object> NewCollection = args.NewValue as ObservableCollection<object>;
        9:                     instance.UserControl_View.ObjectCollection = NewCollection;
       10:                 }
       11:             }
       12:         }

    The Master Control

    Once again the conceptual model is very  similar to the middle layer:

    • A view model is used to manage and bind data.
    • Notification properties are used to pass data from the ViewModel to the View.
    • The Master_View XAML binds the ViewModel properties to the Child Dependency Properties.

    This should work a treat 🙂

  • Silverlight 3, Validation, MVVM, WCF and EF

    All the current articles and tutorials on Silverlight 3 Validation show really simplistic examples, business objects in the UI space, no services etc etc

    My Problem

    When the business objects are being created and managed via the entity framework, there does not appear to be any simple ways of adding the validation properties to the object fields. This means that by the time the object gets to the UI, we have no control.

    in addition to this I need to be able to provide UI base validation and messaging based on user inputs. This has to happen on the field edit and also on “Save click”. Not as easy as it sounds.

    MY Workaround

    Anyway, I have a workaround that appears to be doing what I need. This involves a few more tweaks than I feel is appropriate, so I’d be interested to hear your thoughts on this approach. Anyway, our form is as follows:

    Previously we had a business object in the ViewModel (FocusedDepartment) and were binding the values of the textboxes to the fields of this object, for example:

    <TextBox x:Name="Txt_Number" Text="{Binding Mode=TwoWay, Path=FocusedDepartment.DepartmentId}" />

    The problem with this was the FocusedDepartment type (Department) was derived from the service layer, which in turn had come from our EF model. We did not find a solution to attach the validation properties to the EF model objects. The workaround for this was to add specific properties into the ViewModel to support the fields, and attach validation properties to these:

    This property still uses the FocusedDepartment property as a backing store. In the xaml we changed our binding to use this new property:

    <TextBox x:Name="Txt_Number" Text="{Binding Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True, Path=DepartmentId}" />

    The FocusedDepartment property also had to notify property changes for the new fields:

    //the currently selected item, bound to the datacontext of the view
    private Department _focusedDepartment = new Department();
    public Department FocusedDepartment
    {
    get { return _focusedDepartment; }
    set
    {
    _focusedDepartment = value;
    _OnPropertyChanged("FocusedDepartment");


    _OnPropertyChanged("Description");
    _OnPropertyChanged("DepartmentId");
    }
    }

    From this point we where able to see the validation on the text boxes appear correctly but only when the values in the textboxes had been changed.

    When tabbing through the fields, the bound fields where not getting touched, so the validation was not occurring. To workaround this issue I have added some code to the Save button click event (sorry MVVM purists!!) to update the source of the binding expressions, then checked the error count against the ViewModel before submitting the save action:

    Firstly, I have a handler to manage the error count in the VM

    Then handled the save button click in code behind

    This ensures the fields are valid (and the validation messages are displayed) before committing the Save action to the service.

    This approach (particularly the checking and setting of values directly in the VM) feels pretty dirty at the moment L, but it does seem to work for UI validation.

  • Silverlight MVVM and Testing

    During my investigations into this crazy land I have found a few good articles (and many not so good…):

    http://www.cauldwell.net/patrick/blog/MVVMAndTestingSilverlight.aspx

    http://silverlight.net/blogs/justinangel/archive/2009/02/25/silverlight-unit-testing-rhinomocks-unity-and-resharper.aspx

    Both use MVVM and both use RhinoMocks, but in subtly different ways.